Repository: willianjusten/willianjusten.com.br Branch: main Commit: 2a0dc65c415e Files: 262 Total size: 1.6 MB Directory structure: gitextract_r4l6jmqc/ ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .nvmrc ├── .prettierrc ├── Readme.md ├── jsconfig.json ├── next-seo.config.js ├── next.config.js ├── package.json ├── posts/ │ ├── 3-meses-de-globocom.md │ ├── 65-dicas-para-ser-um-programador-melhor.md │ ├── a-estrutura-do-svg.md │ ├── a-historia-por-tras-do-meu-curso-de-react-avancado.md │ ├── a-importancia-do-github-para-desenvolvedores.md │ ├── achievement-concluido-braziljs.md │ ├── adicionando-icone-de-github-nos-projetos-opensource.md │ ├── adicionando-night-mode-no-seu-site.md │ ├── alguns-seletores-css-importantes-para-aprender.md │ ├── analisando-seu-codigo-js-com-linter.md │ ├── animacoes-em-svg-com-css.md │ ├── animando-svg-com-smil.md │ ├── ano-novo-blog-novo.md │ ├── atomic-design-no-svg.md │ ├── atualizacoes.md │ ├── background-fixo-com-css.md │ ├── build-incremental-gatsby-netlify.md │ ├── burnout-e-o-tempo.md │ ├── chamada-curso-git-e-github-na-vida-real.md │ ├── coisas-que-eu-nao-sei-em-ti.md │ ├── colorindo-em-svg.md │ ├── comandos-uteis-do-chrome-devtools.md │ ├── comecando-com-react.md │ ├── como-colocar-seu-site-no-ar-de-graca.md │ ├── como-configurar-o-google-analytics-no-nextjs-em-2021.md │ ├── como-configuro-meu-editor-e-desktop-para-gravar-codigo.md │ ├── como-criar-e-publicar-um-pacote-de-extensoes-do-vscode.md │ ├── como-criar-footer-fixo.md │ ├── como-criar-secoes-fullscreen-com-css.md │ ├── como-criar-um-curso-online.md │ ├── como-criar-um-spinner-loader-com-css-puro-e-uma-div.md │ ├── como-deixar-a-imagem-da-webcam-redonda-no-obs.md │ ├── como-fazer-seu-site-funcionar-offline-com-pwa.md │ ├── como-melhorar-meu-seo.md │ ├── como-mostrar-trechos-de-codigo-num-blog-com-nextjs.md │ ├── como-se-manter-atualizado-no-frontend.md │ ├── como-se-tornar-um-desenvolvedor-front-end.md │ ├── como-ter-um-blog-ajuda-a-conseguir-oportunidades.md │ ├── como-um-patinho-me-ajudou-a-ser-um-programador-melhor.md │ ├── como-usar-e-se-comportar-melhor-em-chats.md │ ├── como-usar-o-google-analytics-events-tracker.md │ ├── como-usar-o-reactjs.md │ ├── como-usar-svg.md │ ├── configurando-2-contas-de-git-no-mesmo-computador.md │ ├── configurando-o-macbook-m1-para-desenvolvimento-web.md │ ├── configurando-o-webpack-para-rodar-react-e-es6.md │ ├── convertendo-um-class-based-component-para-react-hooks.md │ ├── criando-animacao-ondas-css-svg.md │ ├── criando-apresentacoes-e-hospedando-no-github.md │ ├── criando-botao-animado-com-css-e-svg.md │ ├── criando-componente-de-tipografia-com-styled-components.md │ ├── criando-componentes-react-com-testes-lyef-flag.md │ ├── criando-componentes-usando-so-es6.md │ ├── criando-e-exportando-svg-para-web.md │ ├── criando-efeito-parallax-no-header.md │ ├── criando-icone-menu-hamburguer-animado-com-css-puro.md │ ├── criando-imagens-bonitas-de-codigo.md │ ├── criando-menu-fullscreen-animado-com-css-puro.md │ ├── criando-o-efeito-da-chuva-do-matrix-com-javascript-puro.md │ ├── criando-reading-progress-com-css-variables.md │ ├── criando-svg-responsivo.md │ ├── criando-textos-responsivos-com-css.md │ ├── criando-toda-a-estrutura-de-um-site-usando-o-strapi-cms.md │ ├── criando-um-background-com-gradient-animado.md │ ├── criando-um-codepen-simples-em-poucas-linhas.md │ ├── criando-um-loader-animado-em-svg.md │ ├── criando-um-menu-off-canvas-com-css3.md │ ├── criando-um-react-custom-hook-com-testes.md │ ├── criando-um-switch-button-com-css.md │ ├── criando-um-tooltip-animado-com-css-clip-path.md │ ├── criando-uma-animacao-de-card-com-hover.md │ ├── criando-uma-animacao-de-digitacao-com-css.md │ ├── criando-uma-animacao-de-reveal-block-com-css.md │ ├── criando-uma-lib-js-com-testes-do-zero.md │ ├── customizando-o-disqus.md │ ├── debugando-e-agilizando-testes-na-react-testing-library.md │ ├── devo-fazer-faculdade.md │ ├── devs-brasileiros-gringos-trabalhar-exterior.md │ ├── dez-anos-de-blog.md │ ├── dica-de-css-scroll-snap.md │ ├── dica-rapida-1.md │ ├── diga-nao-ao-medium-tenha-sua-propria-plataforma.md │ ├── dominio-proprio-no-github-pages.md │ ├── efeito-de-desenhar-com-svg.md │ ├── entendendo-especificidade-em-css.md │ ├── entendendo-testes-de-software.md │ ├── erros-comuns-com-o-react-testing-library.md │ ├── esta-tudo-bem-nao-fazer-nada.md │ ├── estilizando-svg-com-css-parte-1.md │ ├── estilizando-svg-com-css-parte-2.md │ ├── exemplos-de-sites-com-parallax.md │ ├── falando-sobre-rscss.md │ ├── fazendo-o-browser-falar-por-voce-web-speech-api.md │ ├── feito-e-melhor-que-perfeito.md │ ├── filtros-css.md │ ├── formatando-datas-com-js-puro.md │ ├── formatando-numero-em-dinheiro-com-js-puro.md │ ├── fundamentos-javascript-antes-de-aprender-react.md │ ├── gatsby-e-nextjs-performance-e-developer-experience.md │ ├── guia-como-contribuir-em-open-source.md │ ├── habemus-react-hooks.md │ ├── happy-halloween-caca-ao-tesouro.md │ ├── https-no-github-pages-com-custom-domain.md │ ├── introducao-ao-strapi-headless-cms.md │ ├── js-com-tdd-na-pratica-e-novidades.md │ ├── juntando-arrays-e-objetos-com-spread-syntax-no-javascript.md │ ├── lancamento-curso-de-git-e-github-na-vida-real.md │ ├── links-da-semana-1.md │ ├── links-da-semana-2.md │ ├── links-da-semana-3.md │ ├── links-da-semana-4.md │ ├── links-da-semana-5.md │ ├── links-da-semana-6.md │ ├── lista-de-dicas-de-seo-para-devs.md │ ├── lyef-criando-componentes-desacoplados-em-reactjs.md │ ├── mais-de-10-mil-alunos-na-udemy.md │ ├── making-of-blog-novo-gatsby-js.md │ ├── making-of-parte-1.md │ ├── making-of-parte-2.md │ ├── manipulando-svg-com-js.md │ ├── mantendo-seu-projeto-atualizado-com-dependabot-e-github-actions.md │ ├── mask-e-clip-com-css-e-svg.md │ ├── medindo-performance-do-seu-site-com-lighthouse.md │ ├── menu-sticky-e-smooth-scroll-com-css-puro.md │ ├── meu-ano-de-2015.md │ ├── meu-ano-de-2016.md │ ├── meu-ano-de-2017.md │ ├── meu-ano-de-2018.md │ ├── meu-ano-de-2019.md │ ├── meu-ano-de-2020.md │ ├── meu-ano-de-2021.md │ ├── meu-ano-de-2023.md │ ├── meu-ano-de-2024.md │ ├── meu-dia-a-dia-como-dev-frontend.md │ ├── meu-processo-para-a-toptal.md │ ├── meu-setup.md │ ├── meus-15-dias-no-chile.md │ ├── meus-20-dias-no-peru.md │ ├── meus-50-dias-na-espanha.md │ ├── meus-plugins-favoritos-do-sublime-text.md │ ├── migrei-meu-blog-do-gatsby-para-o-nextjs.md │ ├── migrei-para-o-vscode-e-estou-feliz.md │ ├── minha-trajetoria-ate-ser-desenvolvedor.md │ ├── minhas-experiencias-com-trabalho-remoto-em-ti.md │ ├── mini-curso-gratuito-de-typescript.md │ ├── mostrando-ultimos-posts-e-videos-no-github-profile.md │ ├── mudando-sua-vida-atraves-de-projetos-paralelos.md │ ├── mude.md │ ├── mulheres-na-tecnologia.md │ ├── nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa.md │ ├── novidades-do-react-16.md │ ├── novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows.md │ ├── novo-curso-de-git-e-github-para-iniciantes.md │ ├── novo-projeto-awesome-audioviz.md │ ├── o-basico-da-api-do-reactjs.md │ ├── o-que-ninguem-diz-para-iniciantes.md │ ├── o-que-preciso-saber-para-trabalhar-no-exterior.md │ ├── onde-baixar-svg.md │ ├── organizando-seu-css-com-itcss.md │ ├── perfomance-web-critical-css-e-jekyll.md │ ├── performance-web-evite-escrever-html-demais.md │ ├── performance-web-usando-fontes-do-sistema.md │ ├── perguntas-e-respostas-jekyll.md │ ├── por-que-ir-em-eventos-vale-a-pena.md │ ├── por-que-usar-jekyll.md │ ├── por-que-usar-svg.md │ ├── porque-eu-evito-funcoes-anonimas.md │ ├── pre-venda-curso-de-svg.md │ ├── refatorando-componentes-react-para-es6.md │ ├── saude-deve-ser-a-prioridade.md │ ├── semantic-version.md │ ├── share-button-sem-dependencias.md │ ├── sistemas-de-icones-em-svg.md │ ├── social-meta-tags.md │ ├── sou-bom-o-suficiente.md │ ├── talk-uma-conversa-sobre-trabalho-remoto.md │ ├── tecnicas-de-aprendizado.md │ ├── theme-color-android-lollipop.md │ ├── trabalhando-com-a-tela-util-do-iphone.md │ ├── trabalhando-com-git-hooks-de-forma-facil.md │ ├── um-novo-projeto-um-novo-desafio.md │ ├── um-post-por-dia.md │ ├── um-tema-para-todos-os-lugares-dracula-pro.md │ ├── usando-netlify-cms-com-nextjs-vercel-e-github.md │ ├── usando-o-preact-no-nextjs-para-mais-performance.md │ ├── usando-svg-sprites.md │ ├── usando-um-agregador-de-conteudo.md │ ├── utilizando-css-counters.md │ ├── utilizando-svg-sprites-com-react.md │ ├── valorize-suas-conquistas.md │ ├── varrendo-seu-site-atras-de-links-quebrados.md │ ├── video-em-background-com-object-fit.md │ ├── video-iniciando-um-app-react-em-3-minutos.md │ └── vindo-morar-e-estudar-na-irlanda.md ├── public/ │ ├── cms/ │ │ ├── config.yml │ │ └── index.html │ └── robots.txt └── src/ ├── components/ │ ├── Analytics/ │ │ └── index.js │ ├── Avatar/ │ │ ├── index.js │ │ └── styled.js │ ├── Comments/ │ │ └── index.js │ ├── Course/ │ │ ├── index.js │ │ └── styled.js │ ├── Layout/ │ │ ├── index.js │ │ └── styled.js │ ├── MenuBar/ │ │ ├── index.js │ │ └── styled.js │ ├── MenuLinks/ │ │ ├── content.js │ │ ├── index.js │ │ └── styled.js │ ├── Pagination/ │ │ ├── index.js │ │ └── styled.js │ ├── Post/ │ │ ├── index.js │ │ └── styled.js │ ├── Profile/ │ │ ├── index.js │ │ └── styled.js │ ├── RecommendedPosts/ │ │ ├── index.js │ │ └── styled.js │ ├── Search/ │ │ ├── Hit.js │ │ ├── index.js │ │ └── styled.js │ ├── Sidebar/ │ │ ├── index.js │ │ └── styled.js │ └── SocialLinks/ │ ├── Icons.js │ ├── content.js │ ├── index.js │ └── styled.js ├── lib/ │ ├── api.js │ ├── buildAlgoliaIndexes.js │ ├── constants.js │ ├── generateRSS.js │ ├── generateSitemap.js │ ├── gtag.js │ ├── markdownToHtml.js │ └── utils.js ├── pages/ │ ├── 404.js │ ├── [slug].js │ ├── _app.js │ ├── _document.js │ ├── about.js │ ├── api/ │ │ ├── auth.js │ │ └── callback.js │ ├── cursos.js │ ├── index.js │ ├── search.js │ └── series.js ├── styles/ │ ├── base.js │ ├── global.js │ └── transitions.js └── templates/ ├── blog-list.js └── blog-post.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true } ], [ "prismjs", { "languages": [ "javascript", "css", "typescript", "json", "jsx", "markdown", "bash", "yaml" ], "plugins": ["line-numbers"], "theme": "tomorrow", "css": true } ] ], "env": { "test": { "plugins": [ [ "babel-plugin-styled-components", { "ssr": false, "displayName": false } ] ] } } } ================================================ FILE: .editorconfig ================================================ # Editorconfig: https://editorconfig.org/ root = true [*] charset = utf-8 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true indent_style = space indent_size = 2 ================================================ FILE: .eslintrc ================================================ { "extends": "next" } ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ *.xml # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env.development.local .env.test.local .env.production.local # vercel .vercel public/images ================================================ FILE: .nvmrc ================================================ lts/* ================================================ FILE: .prettierrc ================================================ { "trailingComma": "none", "tabWidth": 2, "semi": false, "singleQuote": true, "arrowParens": "avoid" } ================================================ FILE: Readme.md ================================================ # Willian Justen - Blog Personal website/blog. Currently using: - [NextJS](https://nextjs.org/) - [Vercel](https://www.vercel.com) If you're interested on learn these technologies, check [my courses](https://willianjusten.com.br/cursos/). ================================================ FILE: jsconfig.json ================================================ { "compilerOptions": { "baseUrl": "src" } } ================================================ FILE: next-seo.config.js ================================================ const DefaultSEO = { openGraph: { type: 'website', locale: 'en_US', url: 'https://willianjusten.com.br', site_name: 'Willian Justen' }, twitter: { handle: '@Willian_justen', site: '@site', cardType: 'summary_large_image' } } export default DefaultSEO ================================================ FILE: next.config.js ================================================ module.exports = { webpack: (config, { dev, isServer }) => { // Replace React with Preact only in client production build if (!dev && !isServer) { Object.assign(config.resolve.alias, { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat' }) } return config }, async rewrites() { return [ { source: '/js/', destination: 'https://willianjusten.com.br/' }, { source: '/jekyll/', destination: 'https://willianjusten.com.br/' }, { source: '/svg/', destination: 'https://willianjusten.com.br/' }, { source: '/dev/', destination: 'https://willianjusten.com.br/' }, { source: '/tags/', destination: 'https://willianjusten.com.br/' }, { source: '/making-of-blog-novo/', destination: 'https://willianjusten.com.br/making-of-blog-novo-gatsby-js' }, { source: '/page/:slug*', destination: 'https://willianjusten.com.br/' } ] }, async redirects() { return [ { source: '/my-trips/', destination: 'https://my-trips.willianjusten.com.br/', permanent: true }, { source: '/japanese-words/', destination: 'https://japanese-words.willianjusten.com.br/', permanent: true }, { source: '/learn-japanese/', destination: 'https://learn-japanese.willianjusten.com.br/', permanent: true }, { source: '/js-com-tdd-na-pratica-na-udemy/', destination: 'https://www.youtube.com/@WillianJustenCursos', permanent: true }, { source: '/novo-curso-aprenda-criar-sites-animados-greensock/', destination: 'https://willianjusten.com.br', permanent: true }, { source: '/novo-curso-gatsby-crie-um-site-pwa-com-react-graphql-netlify-cms/', destination: 'https://willianjusten.com.br', permanent: true } ] }, images: { domains: ['pbs.twimg.com', 'avatars.githubusercontent.com'] } } ================================================ FILE: package.json ================================================ { "name": "willianjusten-blog", "private": true, "description": "My personal blog on willianjusten.com.br", "version": "3.0.0-alfa", "author": "Willian Justen ", "dependencies": { "@babel/core": "^7.14.6", "@openlab/vercel-netlify-cms-github": "^1.1.0", "algoliasearch": "^4.10.2", "babel-plugin-prismjs": "^2.1.0", "babel-plugin-styled-components": "^1.12.0", "date-fns": "^2.22.1", "gray-matter": "^4.0.3", "next": "^11.0.1", "next-instantsearch": "^0.3.15", "next-seo": "^4.26.0", "nextjs-progressbar": "^0.0.11", "preact": "^10.5.14", "preact-render-to-string": "^5.1.19", "prismjs": "^1.24.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-infinite-scroll-component": "^6.1.0", "react-instantsearch-dom": "^6.11.2", "remark": "^13.0.0", "remark-autolink-headings": "^6.0.1", "remark-html": "^13.0.1", "remark-oembed": "^1.2.2", "remark-slug": "^6.0.0", "slugify": "^1.5.3", "styled-components": "5.3.0", "styled-icons": "^10.30.0", "styled-media-query": "^2.1.2" }, "devDependencies": { "eslint": "^7.30.0", "eslint-config-next": "^11.0.1", "globby": "^11.0.4", "prettier": "^2.2.1", "sitemap": "^7.0.0" }, "keywords": [ "nextjs", "frontend", "blog" ], "license": "MIT", "scripts": { "dev": "NODE_OPTIONS='--openssl-legacy-provider' next dev", "build": "NODE_OPTIONS='--openssl-legacy-provider' next build", "start": "NODE_OPTIONS='--openssl-legacy-provider' next start", "lint": "next lint" }, "repository": { "type": "git", "url": "https://github.com/willianjusten/willianjusten.com.br" }, "bugs": { "url": "https://github.com/willianjusten/willianjusten.com.br" } } ================================================ FILE: posts/3-meses-de-globocom.md ================================================ --- layout: post date: 2015-06-28T20:36:52.000Z title: 3 meses de globo.com description: Um pouco do que passei desde o primeiro contato, processo seletivo, contratação, minha mudança e o dia-a-dia. main-class: dev tags: - trabalho - globo categories: null --- ## Introdução Como 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. Algumas 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. Pretendo 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. P.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 ## Contatos Eu 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). Conversa 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ã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. ## Processo Seletivo - Parte 1 Ao 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). Passou 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. ## Processo Seletivo - Parte 2 Do 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. Na 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. Quando 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!!!). Apó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. Depois 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. ## Processo Seletivo - Parte 3 Passado 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. Eu 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: **"Como ter Domínio Proprio no Github Pages" date: 2015-01-29 04:16:36**. Sim, eu praticamente não dormi!! Apó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. Pela 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. Na 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. Já 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. ## Contratação Deu 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. ## Conhecendo meu novo time Ao 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: [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. [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. [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! ## Dia-a-dia no globoesporte No 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. Existem 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. Dentro 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. Prezamos 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". A 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. Dava 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. ## Mudança e Conclusão Bom, 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. Se você tem interesse, não tenha medo de tentar e basta enviar seu currículo no [github da globo](https://talentos.globo.com/). Uffa, 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. ================================================ FILE: posts/65-dicas-para-ser-um-programador-melhor.md ================================================ --- layout: post date: 2017-06-27T16:14:42.000Z title: 65 dicas para ser um programador melhor description: Algumas dicas que podem ajudar muito a sua maneira de programar e pensar. main-class: dev tags: - dev - dicas categories: null --- ## Introdução Fala 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. Esse 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 =) E 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. Junto 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. Bom, 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. ## Dicas 1. **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? 2. **Pense! Sobre o seu trabalho** - Desligue o piloto automático e tome o controle. Constantemente critique e avalie o seu trabalho. 3. **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. 4. **Não conviva com janelas quebradas** - Corrija designs ruins, decisões erradas e código ruim quando vê-los. 5. **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. 6. **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. 7. **Faça da Qualidade um requisito** - Envolva os usuários para determinar a real qualidade que o projeto precisa ter e cumpra. 8. **Invista regularmente no seu Portfolio de Conhecimento** - Faça do aprender um hábito. 9. **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. 10. **É 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. 11. **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. 12. **Faça ser fácil de reutilizar** - Se é fácil de reutilizar, pessoas vão reutilizar. Crie um ambiente que suporte o reuso. 13. **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. 14. **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. 15. **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. 16. **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. 17. **Programe perto do problema** - Crie e codifique na linguagem do seu usuário, como se você fosse ele. 18. **Estime para evitar surpresas** - Estime antes de começar. Você irá possivelmente ver problemas a frente e conseguirá se organizar melhor. 19. **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. 20. **Escreva e Rabisque** - Textos e rabiscos nunca se tornam obsoletos. Eles ajudam a melhorar o seu trabalho e simplificar depurações e testes. 21. **Use o poder da linha de comando** - Use linha de comando quando interfaces não são necessárias. 22. **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. 23. **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! 24. **Corrija o problema. Não fique culpando** - Não importa se o bug é sua culpa ou de outro, é um problema e precisa ser corrigido. 25. **Não entre em pânico quando estiver debugando** - Respire bem fundo e *pense!* sobre o que pode estar causando o bug. 26. **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. 27. **Não presuma, prove!** - Prove suas premissas num ambiente com dado real e sob as mesmas condições. 28. **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ê? 29. **Escreva código que faça código** - Geradores de código aumentam sua produtividade e ajudam a evitar duplicações. 30. **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. 31. **Faça o Design com contratos** - Use contratos para documentar e verificar se o código faz o que se é pedido. 32. **Quebre cedo** - Um programa morto normalmente dá menos problemas que um programa deficiente. 33. **Use *assertions* para previnir o impossível** - use assertions para validar suas premisas. E use para proteger seu código de incertezas. 34. **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. 35. **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. 36. **Minimize o acoplamento entre os módulos** - Evite o acoplamento aplicando a [Lei de Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter). 37. **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. 38. **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. 39. **Analise o Workflow para melhorar a concorrência** - busque formas de realizar código em concorrência no workflow de seu usuário. 40. **Desenvolva usando serviços** - Codifique em termos de serviços, independentes, bem definidos e com interfaces consistentes. 41. **Separe as Views das Models** - Para ganhar flexibilidade a baixo custo, desenvolva sua aplicação em termos de models e views. 42. **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. 43. **Estime a ordem de seus algoritmos** - Tenha uma ideia de o quão demoradas as coisas podem acontecer antes de escrever seu código. 44. **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. 45. **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. 46. **Codifique para testar** - Comece pensando sobre como testar antes de escrever uma linha de código. 47. **Teste seu software, ou seus usuários irão testar por você** - Teste implacavelmente. Não deixe seus usuários acharem bugs para você. 48. **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. 49. **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. 50. **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. 51. **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. 52. **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. 53. **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?". 54. **Comece quando você estiver pronto** - Você tem adquirido experiência com o tempo, não ignore as dúvidas que tiver. 55. **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. 56. **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. 57. **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. 58. **Organize equipes por funcionalidades** - Não separe designers de desenvolvedores, monte equipes da mesma forma que você cria o código. 59. **Teste cedo, teste frequentemente, teste automaticamente** - Testes que rodam a cada build são muito mais efetivos que testes esporádicos. 60. **O código não está pronto até que os testes rodem** - só isso. 61. **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. 62. **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. 63. **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. 64. **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. 65. **Assine o seu trabalho** - os grandes construtores ficam orgulhosos de assinar suas obras, você também deveria se orgulhar. ## Conclusão Espero 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. É 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! ================================================ FILE: posts/a-estrutura-do-svg.md ================================================ --- layout: post date: 2015-01-20T15:01:39.000Z title: "#4 - A estrutura do SVG" description: Saiba como o SVG funciona de verdade, seus elementos, alguns de seus atributos e alguns atalhos para facilitarem nosso trabalho. main-class: svg tags: - svg - tutorial categories: - O mundo mágico do SVG --- ## Índice da série - [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) - [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) - [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) ## Introdução Sei 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". A 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. ## Estrutura Como 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. ```xml ``` ### O que são essas coisas ali com a tag SVG? Sã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. ### Preciso definir isso sempre? Nã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. Se quiser entender um pouco melhor sobre Namespaces, acessa o [link da MDN](https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course). ## Elementos O 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. ### O elemento rect

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

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

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

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

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

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

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

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

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

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

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

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

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

O 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. Existem 5 tipos de paths: - Curveto (C,c) - Smooth Curveto (Curveto Suave) (S,s) - Curva Quadrática de Bézier (Q,q) - Curva Quadrática de Bézier Suave (T,t) - Arco Elíptico (A,a) A letra **maiúscula** utiliza coordenadas **absolutas** para criar a forma, enquanto a letra **minúscula** utiliza coordenadas **relativas**. ## Conclusão

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

A 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 =) Se 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 E 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 =) ================================================ FILE: posts/a-historia-por-tras-do-meu-curso-de-react-avancado.md ================================================ --- layout: post date: 2020-06-30T08:36:52.000Z title: A história por trás do meu curso de React Avançado description: As primeiras ideias do curso, desistências, saída da Toptal e reinicio de tudo! main-class: misc tags: - react - curso --- ## Introdução Fala 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). E 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. No [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! Se 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! ## Prelúdio do curso A 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. No 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** ## Um curso mais próximo do real Assim 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. Muitos 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". Foi 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. ## Primeiras ideias, desistências e problemas Quando 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. A 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. Foi 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. ## Saída da Toptal Durante 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. Conversei 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!). ## Foco total e novo integrante! Assim 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! Uma 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?) E, 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). Eu 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: ![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) O cara me mandou uma mensagem as **2 horas da manhã**, não teve jeito, tive que chamar para participar da ideia e ele topou!!! ## Criação de um branding e conversas No 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 O 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. ![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) ## Ansiedade mais de 8000 e mudança na estrutura ![Veggeta do Dragonball Z destruindo seu óculos e dizendo que é mais de 8000](/assets/img/more-8000.jpg) Eu 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! Mas 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. Foi 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. ## Mais crises de ansiedade e inseguranças Já 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). E 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. Direto 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. Noite 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é?). Enfim, 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. ## Agradecimentos Eu 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. Cada 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! ================================================ FILE: posts/a-importancia-do-github-para-desenvolvedores.md ================================================ --- layout: post date: 2017-08-04T15:04:36.000Z title: A importância do Github para Desenvolvedores description: Alguns motivos do porque eu acho que o Github é importante para os desenvolvedores. main-class: dev tags: - dev - dicas categories: null --- ## Introdução Fala 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 Vou 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 Bom, vamos parar com a enrolação e vamos ao post! ## Um tweet inocente Meu amigo [Bernard de Luna](https://twitter.com/bernarddeluna) que vem fazendo um trabalho muito maneiro na Bunee.io fez o seguinte tweet:

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
O 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. E 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. ## Colaboração Antes 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. Mas 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: - [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. - [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. - [Vagas FrontendBR](https://github.com/frontendbr/vagas) - um repositório para divulgação de boas vagas para desenvolvedores e moderado por desenvolvedores. - [Training Center](https://github.com/training-center) - um local onde mentores se oferecem para ajudar novatos a entrar nessa área maravilhosa que estamos. - [Learn X in Y minutes](https://github.com/adambard/learnxinyminutes-docs) - outro projeto genial para quem quer aprender algum assunto novo. Enfim, 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á. Entã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 ## Felicidade em poder ajudar Eu 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: ![Imagem com o pedido sobre projetos para contribuir](/assets/img/github-importancia/ajuda-projetos.png) Depois 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. ![Imagem onde eu parabenizo ele pelo primeiro PR](/assets/img/github-importancia/primeiro-pr.png) ## Portfólio Vivo Quando 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: - Ver quais linguagens você tem mais costume de trabalhar - Ver mais ou menos como você pensa - Entender como você resolve alguns problemas particulares E 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. Assim 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? ## Conclusão Bom, 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. Você 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ê! =) Existem 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. A 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. E 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! Nossas 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? ================================================ FILE: posts/achievement-concluido-braziljs.md ================================================ --- layout: post date: 2016-08-29T16:35:49.000Z title: Achievement concluído - BrazilJS description: Tudo que me aconteceu antes, durante e depois desse que foi meu maior evento de desenvolvimento. main-class: misc tags: - dev - eventos - braziljs categories: null --- ## Introdução Faaaaala 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. Eu vou separar o post entre antes, durante e depois da BrazilJS no meu ponto de vista e meus acontecimentos, acho que vai ser legal. Para não perder o costume, vou ouvindo [Madeon](https://open.spotify.com/track/4PTPZeJlK1rYlYr6bf11hk), música eletrônica bem maneira =) ## Antes ### Envio do Call for Papers e Resposta Eu 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 Eu 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. Bom, 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! ![Imagem dos emails trocados com o Jaydson](/assets/img/brazil-js-16/email.png) ### Montagem dos slides e vôo Eu 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... Enfim 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/). ![Eu e meus 2 amigos no avião](/assets/img/brazil-js-16/aviao.jpg) ### Chegada e Teste dos slides Cheguei 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). A 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 Mas, 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.

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
## Durante O 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. De 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! Ter 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.

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

— yuri (@ybrntt) August 26, 2016
E 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). ## Depois ### Tweets e carinho Sabe 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! Eu 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

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

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

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

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
Alé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! ### Lançamento do Curso ![Banner curso](https://dien0bhzxjun5.cloudfront.net/ea2d1627-1750-4142-b8de-e806adbcb798/cursowill.crop_1438x532_0,0.resize_1440x532.png) Durante 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í =) Para quem quiser já aproveitar a oportunidade, a [pré-venda está disponível nesse link](https://www.eventick.com.br/javascript-com-tdd-na-pratica). ### Agradecimento no Aeroporto E para finalizar, eu gravei um vídeo rapidinho agradecendo todos vocês, diretamente do aeroporto de Porto Alegre, assiste aí =D ================================================ FILE: posts/adicionando-icone-de-github-nos-projetos-opensource.md ================================================ --- layout: post date: 2021-02-21T08:55:59.000Z title: Adicionando ícone de GitHub nos projetos opensource description: Já pensou como o pessoal sempre usa aquele ícone bonitinho no canto? Agora vai saber! main-class: misc tags: - dica categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando com SVG puro ou componentes React/Vue O [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. Mas 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/). ## Conclusão E 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. ================================================ FILE: posts/adicionando-night-mode-no-seu-site.md ================================================ --- layout: post date: 2018-03-27T03:35:52.000Z title: Adicionando Night Mode no seu site description: Aprenda como criar um botão para mudar as cores do seu site com JS puro. main-class: js tags: - js - theme categories: null --- ## Introdução Fala 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. > 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 Pensando 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. ## Como funciona a mudança de cores? Basicamente 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. ## E para ativar os modos? Para 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. ```html ``` Repare 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: ```js const nightMode = document.querySelector('#night-mode') // ao clicar mudaremos as cores nightMode.addEventListener('click', () => { // adiciona a classe `night-mode` ao html document.documentElement.classList.toggle('night-mode') }) ``` E prontinho, só com isso, a gente já fez o night mode ativar e desativar, toda vez que clicamos nele! Mas podemos ir além! ## Salvando o estado do usuário Depois 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: ```js // pegamos o valor no localStorage const nightModeStorage = localStorage.getItem('gmtNightMode') const nightMode = document.querySelector('#night-mode') // caso tenha o valor no localStorage if (nightModeStorage) { // ativa o night mode document.documentElement.classList.add('night-mode') // já deixa o input marcado como ativo nightMode.checked = true } // ao clicar mudaremos as cores nightMode.addEventListener('click', () => { // adiciona a classe `night-mode` ao html document.documentElement.classList.toggle('night-mode') // se tiver a classe night-mode if (document.documentElement.classList.contains('night-mode')) { // salva o tema no localStorage localStorage.setItem('gmtNightMode', true) return } // senão remove localStorage.removeItem('gmtNightMode') }) ``` Show de bola! Agora o tema tá persistindo em todos os posts de forma bem legal! ## Mudando a cor na barra de navegação (Android) Se 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: ```js // pegamos o valor no localStorage const nightModeStorage = localStorage.getItem('gmtNightMode') const nightMode = document.querySelector('#night-mode') // pega o valor do meta tag const metaThemeColor = document.querySelector('meta[name=theme-color]') // caso tenha o valor no localStorage if (nightModeStorage) { // ativa o night mode document.documentElement.classList.add('night-mode') // pinta o theme color na meta tag metaThemeColor.setAttribute('content', '#2b2b2b') // já deixa o input marcado como ativo nightMode.checked = true } // ao clicar mudaremos as cores nightMode.addEventListener('click', () => { // adiciona a classe `night-mode` ao html document.documentElement.classList.toggle('night-mode') // se tiver a classe night-mode if (document.documentElement.classList.contains('night-mode')) { // salva o tema no localStorage localStorage.setItem('gmtNightMode', true) // pinta o theme color na meta tag metaThemeColor.setAttribute('content', '#2b2b2b') return } // senão remove localStorage.removeItem('gmtNightMode') // senão bota a cor original metaThemeColor.setAttribute('content', '#005f97') }) ``` ## E o visual do input? Você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! ## Conclusão Bom 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! ================================================ FILE: posts/alguns-seletores-css-importantes-para-aprender.md ================================================ --- layout: post date: 2015-06-30T00:22:47.000Z title: Alguns seletores css importantes para aprender description: Porque CSS é muito mais do que só classes e ids. Aprenda alguns truques legais para facilitar nos seus layouts. main-class: css tags: - css - frontend - tutorial categories: null --- ## Introdução Como 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. Escolhi 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á. Vai ser um post rapidinho, com alguns exemplos e caso tenham alguma dúvida, podem usar os comentários sempre =) ## A + B Chamado de seletor adjacente, serve para selecionar o elemento imediatamente depois do primeiro elemento.

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

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

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

Como pode-se notar, as tags `p` diretas de `.container` ganharam o estilo, enquanto a tag `p` mais interna não sofreu alteração. ## A ~ B Conhecido 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.

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

Perceba 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. ## A[contexto] Acho que um dos seletores mais interessantes, de acordo com o que está definido no contexto, conseguimos estilizar em diferentes abordagens. ### A[alt] Esse irá selecionar os elementos com o atributo `alt` definido.

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

Somente 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. ### A[href='link'] Irá editar só os links determinados.

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

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

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

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

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

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

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

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

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

## A:first-child | A:last-child Para 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.

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

## A:checked Seletor 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/). E aqui um exemplo simples:

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

## A:nth-child(n) Outro 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...).

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

## Conclusão Existem 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). ================================================ FILE: posts/analisando-seu-codigo-js-com-linter.md ================================================ --- layout: post date: 2015-12-05T00:43:23.000Z title: Analisando seu código JS com um linter description: Valide seu código em JS/ES6 em busca de erros, warnings, códigos esquecidos e melhore a sua qualidade. Seu amiguinho agradece um código mais limpo. main-class: js tags: - js - linter - tutorial categories: null --- ## Introdução Faaaala 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!! Como 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 ## Qualidade de Código Provavelmente 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. ![John Travolta Meme](https://media.giphy.com/media/FWXpxEbWcOapq/giphy.gif) Você, então, em toda sua humildade, chegou para um amigo e pediu para ele dar uma olhada e ele falou frases assim: > Você esqueceu de colocar o ponto e vírgula no final da linha.
> Essa variável tá escrita errada, faltou um 'a' ali.
> Cara, esse método não existe nessa linguagem... Se 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. No momento você está igual o John Travolta de novo. ![John Question](https://media.giphy.com/media/FxufOs6bQwxO0/giphy.gif) ## Entendi seu ponto, mas como evitar isso? Pensando nisso, foram criadas várias ferramentas para fazer análise por você. Seguem as principais e mais famosas: - [JSlint](http://www.jslint.com/) - [JSHint](http://jshint.com/) - [Eslint](http://eslint.org/) Cada uma dessas ferramentas possui um módulo no npm e podem ser fácilmente instaladas. ```bash npm install -g jslint npm install -g jshint ## para poder fazer lint de ES6 e JSX npm install -g eslint npm install -g babel-eslint ``` E todas elas também possuem integrações com vários editores de código como Sublime, Atom, Brackets, etc... ## Mas como elas funcionam? Cada 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. Para 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. Apó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. ![Print do eslint sendo usado](/assets/img/linter/eslint.png) Após isso, será criado um arquivo chamado `.eslintrc` dentro da pasta raiz do seu projeto, contendo informações parecidas com: ```js module.exports = { "rules": { "indent": [ 2, 4 ], "quotes": [ 2, "single" ], "linebreak-style": [ 2, "unix" ], "semi": [ 2, "always" ] }, "env": { "es6": true, "browser": true }, "extends": "eslint:recommended", "ecmaFeatures": { "jsx": true, "experimentalObjectRestSpread": true }, "plugins": [ "react" ] }; ``` Se 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. Tendo 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: ```js (function () { 'use strict'; const a = 'will'; function() { console.log('Hello!') } })() ``` Se eu rodar o `eslint` no terminal analisando esse código, ele vai me retornar os seguintes erros: ![imagem mostrando os erros como variável não utilizada e falta de ponto e vírgula](/assets/img/linter/erro-1.png) Eu 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! Para 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 Mas 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! ## Usando o eslint no Sublime Primeiro 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. Feito 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: ![Sublime indicando os erros](/assets/img/linter/sublime.png) Se 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: ![Opção](/assets/img/linter/show.png) Com essa opção selecionada, cada vez que você salvar o código, irá ver uma lista da seguinte forma: ![Lista de erros](/assets/img/linter/errors-list.png) ## Habilitando o Sublime para entender código ES6 + Eslint Caso 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: 1) Abra um arquivo com a extensão JS ou JSX 2) Vá na opção View do Menu 3) Escolha Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel). Feito 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! ![John Kissing](https://media.giphy.com/media/D4QLJVmdHB44g/giphy.gif) ## Conclusão Bom, é basicamente isso, se preocupe com seu código e evite demorar horas procurando o erro se uma ferramenta pode fazer por você. ================================================ FILE: posts/animacoes-em-svg-com-css.md ================================================ --- layout: post date: 2015-07-01T07:22:29.000Z title: "#12 - Animações em SVG com CSS" description: Aprenda como criar animações para o SVG usando só CSS e tenha um site leve e bonito. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série 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 [séries](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução Como 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. O post de hoje será em forma de mini-tutorial, então já vou passando logo os exemplos que faremos hoje. - [Airplane Loader SVG](https://willianjusten.github.io/svg-animation-css/loader.html) - [Earth SVG](https://willianjusten.com.br/svg-animation-css/) - [Repositório no Github](https://github.com/willianjusten/svg-animation-css) ## Relembrando... Uma 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/). E 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/). ### Passo 1 - Obtendo um SVG Para 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. Os 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). Se você quiser, tem o link de [onde baixar svg?](https://willianjusten.com.br/onde-baixar-svg/). ### Passo 2 - Limpando o vetor Como 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. ![Imagem do Illustrator](/assets/img/svg-animacoes-css/illustrator.png) ### Passo 3 - Otimizando o SVG Em 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%!!! ![Imagem do Illustrator](/assets/img/svg-animacoes-css/svgomg.png) ### Passo 4 - Dando nome aos bois Já tendo o nosso código otimizado, podemos nomear os elementos dos quais queremos estilizar e animar.

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

Nesse 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. ### Passo 5 - Criando a animação Para 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. No 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: - [CSS Transition e CSS Animation por Raphael Fabeni](https://tableless.com.br/transition-e-animation/) - [CSS Animation for Beginners por Rachel Cope](https://robots.thoughtbot.com/css-animation-for-beginners) - [Usando animações CSS pela MDN](https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_animations) - [Criando animação Flipping por Maujor](http://www.maujor.com/tutorial/criando-animacao-flipping-com-css.php) ### Extras: bug do Firefox e Safari Para 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: - `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. - `transform-origin: Kpx Zpx;`: onde K é a metade da largura e Z a metade da altura. Poré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. `-moz-transform-origin: Apx Bpx` Assim 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.

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

Para 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. Na dúvida do que funciona? Sempre veja no [Can I use](http://caniuse.com/). ### Dica: SVG com muitos elementos ![Segundo Exemplo mostrando um planeta rodeado por aviões e outras coisas](/assets/img/svg-animacoes-css/segundo-exemplo.png) No 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. Para 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. ## Conclusão Bom, 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. Na 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. ================================================ FILE: posts/animando-svg-com-smil.md ================================================ --- layout: post date: 2015-07-22T00:55:02.000Z title: "#13 - Animando SVG com SMIL" description: Aprenda a criar animações usando só SVG e nada mais! main-class: svg tags: - svg - smil - tutorial categories: - O mundo mágico do SVG --- ## Introdução Enquanto escrevo esse post vou ouvindo [Deftones](https://open.spotify.com/artist/6Ghvu1VvMGScGpOUJBAHNH), mudar para um som mais pesado para animar um pouco. Já 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. Esse post foi baseado num apanhado de informações de vários cantos: - [Guide SVG Animation Smil](https://css-tricks.com/guide-svg-animations-smil/) - [Three ways animate svg](https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/) - [How SVG Shape Morphing Works](https://css-tricks.com/svg-shape-morphing-works/) ## Animações Nã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. O 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. ## Mas o que é SMIL? É de comer? [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. **Obs.:** funciona em todos os browsers exceto IE [caniuse](http://caniuse.com/#feat=svg-smil) ## Por que usar esse treco aí? A 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. Como o SMIL é mais poderoso, ele permite animar propriedades que o CSS não conseguiria, como, por exemplo, as formas das Paths. Outra coisa bastante bacana é que animações feita em SMIL funcionam até mesmo quando o SVG é inserido na tag `img`! =) E também conseguimos manipular as animações com eventos! Convencido? ## Comandos básicos Assim 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: - ``: permite animar atributos e propriedades num determinado período de tempo. - ``: usado para animar a transformação dos atributos num período de tempo. - ``: 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`. ### Sintaxe ```html ``` Para o `animate` temos os principais atributos: - `attributeName`: o atributo do qual iremos alterar, pode ser um `fill` ou `points` de um `path`. - `from`: de onde se inicia. - `to`: para onde vai a animação. - `dur`: a duração da animação. - `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. - `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`). - `repeatCount`: como o nome já diz a quantidade de vezes que a animação vai repetir, se quiser que seja infinito, basta usar `indefinite`. - `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. ### Modos de uso Existem duas formas de se aplicar animações, que são: #### Especificando um target ```html ``` #### Aninhando dentro do elemento ```html ``` Um 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. ### Exemplo

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

```html ``` No 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. Segue abaixo um exemplo da mudança de posição e de cor, note que utilizamos 2 `animate`:

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

## Controlando animações com keyTimes e values Assim 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. Segue um exemplo utilizando: ```html values="50; 490; 350; 450" keyTimes="0; 0.5; 0.8; 1" ```

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

Como 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. ## Mudando as formas de uma path Como 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. Vamos pensar num primeiro exemplo, onde queremos transformar um quadrado em um círculo.

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

Nó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. Agora 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:

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

Mas 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:

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

## Aplicação prática em UX Pow 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? Podemos, 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:

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

As animações realizadas para o botão acima ficam separadas em: - Transformar no check - Mudar para cor verde - Transformar na estrela - Mudar para cor amarela Para 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. ## Conclusão Bom 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. ================================================ FILE: posts/ano-novo-blog-novo.md ================================================ --- layout: post date: 2016-01-01T16:00:59.000Z title: Ano novo, blog novo description: Nada melhor que começar o ano com novidades né? Para isso, preparei um novo visual para blog, espero que gostem e todo feedback é bem vindo! main-class: misc tags: - frontend - dev - theme - jekyll categories: null --- ## Introdução Faaaaaaaala 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 =) Vou 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 Bom, 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. Eu 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. ## Blog antigo O 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 ![Home do Blog antigo](/assets/img/blog-novo/home-old.png) E os posts também ocupavam uma área relativamente grande, com a data num destaque muito grande. ![Posts do Blog antigo](/assets/img/blog-novo/posts-old.png) ### Características Básicas - Usava fonte [Open Sans](https://www.google.com/fonts/specimen/Open+Sans) bold para títulos e light para os textos - As cores eram azul(`#0562DC`), branco para elementos em contraste com o azul e para os textos um cinza grafite(`#333333`) - Minimalismo acima de tudo, então pouca coisa na tela - Mobile-first - Bastante leve, **menos de 80Kb** no primeiro load! - Site estático escrito em [Jekyll](https://jekyllrb.com/) e hospedado no [Github Pages](https://pages.github.com/) - Css feito usando [Stylus](http://stylus-lang.com/) `<3` - Gulp para fazer processamento dos assets, livereload e build Se 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/) ## Blog Novo Tendo 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: - Continuar sendo leve - Clean e com cores mais flat (o azul era legal, mas muito intenso) - Fácil de achar os artigos - Entregar mais informação já de primeira - Mais organizado ### Desenhos! Tendo 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. **Ps.:** não sou designer, então não espere nada bom ahuahuahua ![Rabiscos do novo blog](/assets/img/blog-novo/rabiscos.jpg) Meu 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. Como 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. ### Criação de Tarefas ![Board de tarefas](/assets/img/blog-novo/board.jpg) Para 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! ### Header Fixo Como 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: ![Header do novo blog](/assets/img/blog-novo/header-new.gif) Para 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. ```stylus &:after transition all .4s content ' WJ' +above(cut) content ' Willian Justen' ``` O 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. ### Cards de Post ![Cards do novo blog](/assets/img/blog-novo/cards-new.png) Como 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!** #### Anotomia do Card ![Cards do novo blog](/assets/img/blog-novo/card.png) Talvez 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. Exato, 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. #### Mobile-first para os cards Desde 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: ![Cards do novo blog](/assets/img/blog-novo/cards-responsive.gif) Para 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: ```stylus .flex-grid display flex flex-flow row wrap .box-item flex 1 0 300px ``` O `.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. Já 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. Se você quiser entender mais de `flexbox`, acesse os seguintes links: - [A guide to Flexbox by Css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [Awesome Flexbox by Afonse Pacifer](https://github.com/afonsopacifer/awesome-flexbox) - [Flexbox Froggy](http://flexboxfroggy.com/) #### Interação no Scroll Para 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. Eu 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 ### Organização Uma 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. Pensando nisso, eu criei algumas categorias como: - `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. - `css`: que blog de frontend seria sem o css? Sua cor é um azul esverdeado. - `svg`: preciso dizer algo sobre? Sua cor é roxo - `js`: outro tópico indispensável para front, sua cor é o amarelo da linguagem. - `html`: para falar sobre coisas mais simples, como estrutura, semântica, a API do html5, entre outros. Sua cor é o laranja. - `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. - `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. Para 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). ### Página de Post Talvez 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. ![Home Post do novo blog](/assets/img/blog-novo/home-post-new.png) Todas 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. ![Post do novo blog](/assets/img/blog-novo/post-new.png) ## Cores (Update) Para 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. Segue um trecho do arquivo de cores: ```stylus /* Aqui eu defino os temas e cores */ themes = { post-jekyll: #B31917, post-css: #2DA0C3, post-js: #D6BA32, post-html: #EB7728, post-svg: #7D669E, post-dev: #637a91, post-misc: #7AAB13 } /* aqui eu faço a iteração, tendo o elemento pai o nome do tema */ for theme, category-color in themes .{theme} .title-category color category-color .post-content h1,h2,h3,h4 color category-color a color category-color border-bottom 2px dashed category-color &:hover background-color category-color color #fff strong color category-color p, li code color category-color blockquote border-left .313rem solid category-color ``` ## Conclusão Bom 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 ================================================ FILE: posts/atomic-design-no-svg.md ================================================ --- layout: post date: 2015-01-22T12:00:00.000Z title: "#5 - Atomic Design no SVG - g, use, defs, symbol" description: Neste artigo iremos saber mais sobre a estruturação de um SVG, seus elementos, suas vantagens e um pouco de Atomic Design. main-class: svg tags: - svg - tutorial categories: - O mundo mágico do SVG --- ## Índice da série * [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) * [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) * [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) * [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) ## Introdução Primeiro 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. Ps.: não é preguiça, é porque acho essa mulher incrível e sou mega fã das grandes contribuições em SVG que ela traz <3 Neste 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. ## Agrupando com o elemento `` O `` 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. O 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. Por exemplo, o seguinte pássaro é feito de algumas formas, como `` e ``. ![Um pássaro em SVG descontruido, mostrando suas formas basicas](/assets/img/atomic-svg/grouping-bird.svg) Se 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. ![Agrupando no illustrator](/assets/img/atomic-svg/grouping-in-illustrator.png) Agrupar 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`. ```html ``` Se 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. Agrupar 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. Se 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. ```css #bird { transform: scale(2); } ``` Agrupar 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. O 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: ```html <g id="bird"> <title>Pássaro A imagem de um pequeno e fofo pássaro verde com o bico laranja. ``` ## Reutilizando Elementos com o `` **Aviso:** preste bastante atenção a esse tópico, pois será um dos mais importantes e utilizados no resto da série. Muitas 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. O 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 ``. O 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. Por exemplo, se nós estivermos criando um outro pássaro no nosso SVG, nós poderemos reutilizar o pássaro existente, da seguinte forma: ```html ``` Perceba 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?** Se o pássaro do nosso exemplo, estivesse em um arquivo separado chamado `animals.svg`, por exemplo, nós poderíamos referenciar da seguinte forma: ```html ``` Poré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. Alguns 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: ```html ``` ![A copia de um pássaro deslocado 100,100](/assets/img/atomic-svg/bird-reuse.jpg) O 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. Isso 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 ``. ## Reutilizando Elementos guardados com o `` O 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**). Entã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. O seguinte exemplo mostra um gradiente SVG sendo definido e então sendo utilizado como preenchimento de um retângulo: ```html ``` Definindo 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. Na seção anterior nós mencionamos 2 problemas do elemento ``: * A posição do novo elemento ser relativa ao elemento original. * Os estilos do elemento original não poderem ser modificados nas cópias individuais. Isso, em adição ao fato que o elemento só pode ser reutilizado se o original já estiver renderizado. Todos 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). No 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"`. ```html ``` E teremos uma árvore igual a desenhada abaixo: ![Desenho de uma árvore simples](/assets/img/atomic-svg/defined-tree.jpg) Se quisermos colocar esse grupo `#tree` em um elemento ``, a árvore não será mais renderizada. ```html ``` Agora 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. Por 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: ```html ``` ![3 árvores identicas deslocadas](/assets/img/atomic-svg/tree.svg) Como 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. Quando 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.** ## Agrupando elementos com o `` O elemento `` é similar ao elemento ``, já que possibilita uma maneira de agrupar elementos. Porém, ele difere do grupo em duas coisas: * O elemento `` não é renderizado. Ele é similar ao `` dessa maneira. E só é renderizado quando utilizado. * 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.) O `` é 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**. Leu 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!! =) ![Cachorrinho filhote abaixado e olhando](/assets/img/atomic-svg/puppy_dog_eyes_cute.jpg) ### Mas como assim Atomic Design? O que é essa bosta? E por que você tanto fala disso? O [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: > "We're not designing pages, we're designing system of components." - Stephen Hay Esse 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: * Átomos * Moléculas * Organismos * Templates * Páginas Para entender ainda melhor sobre todos os conceitos, leia o [post do criador Brad Frost](http://bradfrost.com/blog/post/atomic-web-design/). #### Mas voltando, por que eu estou falando disso no meio de um post sobre SVG? Como 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. #### Átomos > Átomos são as partes básicas. Aplicando em SVG, seriam os elementos básicos como ``, ``, ``. #### Moléculas > 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. #### Organismos > 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. #### Templates > O template seria já a junção de todos os organismos para formar um componente reutilizável e customizável. Seria o nosso `` ou ``, #### Páginas > 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. Bom, 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 =) ================================================ FILE: posts/atualizacoes.md ================================================ --- layout: post date: 2015-01-11T20:34:00.000Z title: Atualizações description: O blog cresceu um pouquinho e algumas modificações foram inevitáveis. Vou mostrar um pouco do que mudou. main-class: misc tags: - jekyll categories: null --- ![Acessos no Brasil](/assets/img/atualizacoes/brasil.png) Bom, 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. Já 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. ### Menu mais completo ![Menu do site](/assets/img/atualizacoes/menu-ativo.png) Agora na parte superior esquerda temos um botão de menu, que abre uma lista de links para facilitar a navegação dentro do blog. ### Sobre mim Como 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). ### Pesquisa através de Tags Tanto 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. ### Busca instantânea ![Menu do site](/assets/img/atualizacoes/busca.png) No 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. ### Séries E 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 =) ================================================ FILE: posts/background-fixo-com-css.md ================================================ --- layout: post date: 2015-07-24T03:50:02.000Z title: Background fixo com CSS description: Como atrair usuários usando seções com backgrounds fixos usando só css. main-class: css tags: - css - tutorial categories: null --- ## Introdução Mais 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. ## O que vamos fazer? Seguindo 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. **Lembrando que são experimentos, verifique a compatibilidade e o suporte que deseja ter.** Para quem gosta de ver o resultado antes mesmo de começar apressadinho =p, segue aqui o link do experimento: - [DEMO](https://labs.willianjusten.com.br/background-fixo-css/) ## Montando o Markup Para 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). ```html

Great Music Quotes

"Without music, life would be a mistake."

Friedrich Nietzsche

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

John Green

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

Victor Hugo

Where words leave off, music begins.

``` ## Brincadeiras no CSS ### Seções com altura total Primeiro, 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`. ```css section { height: 100vh; padding: 2vw; font-size: 4vw; } ``` ### Textos centralizados verticalmente Para 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. ```css section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } ``` Para 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. ```css section:first-of-type { text-transform: uppercase; font-size: 7vw; } ``` ### Background fixo e em toda área Para dar o toque final, primeiro vamos inserir um background que cubra a área toda. ```css section { background-size: cover; background-repeat: no-repeat; } ``` O `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. Como 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). ```css section:nth-of-type(odd) { color: #fff; background-color: #000; text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } section:nth-child(1) { background-image: url(../img/guitar.jpg); } section:nth-child(3) { background-image: url(../img/bass.jpg); } section:nth-child(5) { background-image: url(../img/drums.jpg); } ``` Nesse momento, temos o seguinte: ![background scroll](/assets/img/reveal-bg/bg-scroll.gif) Um 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: ![background fixo](/assets/img/reveal-bg/bg-fixo.gif) E bom, é isso, algo bem simples, mas bonito e apresentável =) ## Polyfill Como 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. - [VUnit](http://joaocunha.github.io/vunit/) Para utilizar é bem simples, basta inserir a chamada do script e seu inicializador: ```html new vUnit({ CSSMap: { '.vh': { property: 'height', reference: 'vh' } } }).init(); ``` Você 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`. No markup ficaria assim: ```html

"Without music, life would be a mistake."

Friedrich Nietzsche

``` Onde o `class="vh100"` indica que eu quero uma área com 100% de altura da viewport. ## Conclusão Enfim, 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. ================================================ FILE: posts/build-incremental-gatsby-netlify.md ================================================ --- layout: post date: 2020-04-24T15:34:33.000Z title: Como habilitar builds incrementais do Gatsby no Netlify description: Tenha builds muito mais rápidos com a nova atualização do Gatsby Incremental Build. main-class: dev tags: - netlify - blog categories: null --- ## Introdução Dando 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. Ontem 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**! Existem 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é? Bom, 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! ### Passo 1 - Atualize o Gatsby para v2.20.4 ou maior Essa nova feature veio somente na versão mais atual, então rode: ```bash # se utilizar npm npm install gatsby@latest # se utilizar yarn yarn upgrade gatsby@latest ``` ### Passo 2 - Habilite o Netlify Build Plugins Para 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). Para saber mais informações do Beta, só [entrar neste link](https://docs.netlify.com/configure-builds/build-plugins/). ### Passo 3 - Adicione o Gatsby Cache Netlify Build Plugin Os 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. No seu arquivo `netlify.toml` na raiz do projeto, adicione o seguinte: ```bash [[plugins]] package = "netlify-plugin-gatsby-cache" ``` E instale o `netlify-plugin-gatsby-cache` no seu projeto com o comando: ```bash npm install netlify-plugin-gatsby-cache // ou se usar yarn yarn add netlify-plugin-gatsby-cache ``` ### Passo 4 - Adicione a flag para habilitar o Gatsby incremental builds Atualize o comando de `build` no seu `package.json` para incluir a seguinte flag: ```json "scripts": { "develop": "gatsby develop", "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages" } ``` A flag `--log-pages` irá mostrar quais páginas o Gatsby fez build em cada deploy, é opcional e se você quiser, basta remover. ### Passo 5: Faça alguma mudança e veja funcionando! Assim 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. Na segunda vez que você rodar, prepare-se para um build bem mais rápido! ## Conclusão É 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! ================================================ FILE: posts/burnout-e-o-tempo.md ================================================ --- layout: post date: 2023-09-08T08:00:40.000Z title: Burnout dura mais que você imagina! description: A gente pensa que aparece do nada e depois vai melhorar rápido e não é bem assim. main-class: misc tags: - vida - reflexão --- ## Introdução Olá 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. Eu 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. Enquanto 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). ## O que é burnout? Antes 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. O 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: > Ter empatia com você mesmo. Eu 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. ## O que aconteceu comigo? Para 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. Em 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. Eu 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. Alé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. Consegue 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. ## O burnout vem antes do "burnout" Eu 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. > 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. ## O momento do burnout Meu 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. Praticamente 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. ## Momento de aceitação e recuperação Logo 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. Quando 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: ![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) Eu 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. ## Entrada na Appcues Como 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). Eu 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. ## Retorno a criação de conteúdo e feedbacks No 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. Foi 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ã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. ## Regravação do React Avançado Recentemente 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. E 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%. ## Conclusão Eu 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 =) ================================================ FILE: posts/chamada-curso-git-e-github-na-vida-real.md ================================================ --- layout: post date: 2018-01-03T20:22:28.000Z title: Chamada Curso Git e Github na Vida Real description: Vamos dominar o Git e não ficar mais desesperado com conflitos e arquivos perdidos! main-class: misc tags: - dev - cursos - git - github categories: null --- ## Chamada Olá 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! Para 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. E 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: ## Perguntas e Respostas > Quando o curso será lançado? Eu 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). > Qual vai ser a duração do curso? Nã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. > O curso vai ter certificado? Sim, o curso terá certificado liberado através da Udemy para todos aqueles que completarem 100% das aulas. > Qual o preço do curso? Para 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á =) > O que preciso saber para fazer o curso? Como 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/). > Em quanto tempo preciso fazer o curso? Você pode fazer no seu tempo, o curso é vitalício! Faça 1x, 2x, infinitas vezes e quando quiser! > Como posso saber quando o curso foi lançado? Todos os meus alunos serão avisados lá no [slack](https://bit.ly/slack-will) e também na plataforma da Udemy. ## Conclusão Espero 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! ================================================ FILE: posts/coisas-que-eu-nao-sei-em-ti.md ================================================ --- layout: post date: 2019-01-02T06:02:08.000Z title: Coisas que eu não sei em TI description: Eu faço bastante coisa, mas existem outras mil coisas que eu não sei e não tem problema nisso. main-class: misc tags: - dev - code - ti --- ## Introdução Faaaaala 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). Para 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! Só 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/). Quando 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: Entã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 =) Enquanto 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! ## Coisas que eu não sei Se 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. ### Gramática em Inglês > Pera aí Willian, mas você trabalha numa empresa americana e fala em inglês todos os dias! Como assim não sabe gramática? Pois é 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 ### Edição de Vídeo Apesar 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. ### Comandos Unix e Bash Assim 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. ### Windows Pode 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. ### Expressões Regulares (Regexp) Eu 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. ### PHP Foi 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... Se 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. ### Linguagens de baixo nível Eu 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. ### Docker Eu 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~~. ### Devops/Deploys, etc. Se 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. ### React Native/Ionic ou qualquer outra coisa mobile A única coisa que fiz foram tutoriais, nunca fui além disso, por mais que sejam coisas interessantes e que pretendo ver mais esse ano. ### Vue.JS e Angular Novo O 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: ## Conclusão Enfim 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ã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ã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. A 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! ================================================ FILE: posts/colorindo-em-svg.md ================================================ --- layout: post date: 2015-04-03T18:59:38.000Z title: "#9 - Colorindo em SVG" description: Vamos voltar a ser crianças e colorir as coisas! Aprenda as técnicas para mudar as cores do SVG. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série 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. ## Introdução Como 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. Esses 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/). Achei tão legal a ideia de colorir, que pensei, porque não fazer um post brincando sobre colorir SVG? =) ## Cores As 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. Eu 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. No 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. ### Mas e como funciona? Toda 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. Segue abaixo uma imagem de como funcionam as imagens em SVG. ![Ícones em SVG coloridos](/assets/img/colorindo-svg/color-icons.jpg) ### Colorindo com Fill Apó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 =)

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

#### Colorindo com Stroke Outra 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:

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

### Logos com cores diferentes Imagina 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? > "Ah, eu peço para o designer um png para logo do topo e um png para a logo do rodapé." - Programador de esquina Dessa 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! Aí 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!! Relaxa, com o SVG seus problemas acabaram! Basta termos uma só imagem em SVG e colorirmos com classes diferentes. Para 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. Se 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/). A ideia é possuirmos um só componente reutilizável e independente, assim podemos brincar como quisermos =) Segue abaixo um exemplo de como funciona essa técnica:

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

## Conclusão Olha 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 ================================================ FILE: posts/comandos-uteis-do-chrome-devtools.md ================================================ --- layout: post date: 2017-01-25T00:30:59.000Z title: Comandos úteis do Chrome DevTools description: Aumente sua produtividade em poucos minutos aprendendo esses comandos. main-class: dev tags: - frontend - tip - devtools categories: null --- ## Introdução Fala 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. Pensando 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). A 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! Bom, chega de papo e vamos lá! ### Notinha importante, leia =) Antes que muita gente fale que não funciona, se você estiver usando bibliotecas como `jQuery` que utilizam o `$`, a funcionalidade do DevTools será sobreescrita. ### $_ > `$_` retorna o valor do último código executado No seguinte exemplo, rodamos a expressão `2 + 2`. E a propriedade `$_` quando chamada retorna o mesmo valor. ![Funcionamento do $_](https://developers.google.com/web/tools/chrome-devtools/console/images/recently-evaluated-expression-1.png) No 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. ![Funcionamento do $_ usando propriedade](https://developers.google.com/web/tools/chrome-devtools/console/images/recently-evaluated-expression-2.png) ### $0 - $4 > 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. Nosso exemplo abaixo, o elemento com a classe `medium` é selecionado no painel. E no console, no momento que executarmos `$0`, iremos mostrar o mesmo elemento: ![Exemplo de $0](https://developers.google.com/web/tools/chrome-devtools/console/images/element-0.png) A 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: ![Exemplo de $0 - $1](https://developers.google.com/web/tools/chrome-devtools/console/images/element-1.png) ### $(seletor) > 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()`. ![Funcionamento do $(seletor)](https://developers.google.com/web/tools/chrome-devtools/console/images/selector-img.png) Lembrando 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. ![Funcionamento do $(seletor) com propriedade](https://developers.google.com/web/tools/chrome-devtools/console/images/selector-img-src.png) ### $$(seletor) > O `$$(seletor)` retorna um array de elementos que batem com o seletor CSS espeficificado. O comando é equivalente ao método `document.querySelectorAll()`. O 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. ![Funcionamento do $$()](https://developers.google.com/web/tools/chrome-devtools/console/images/all-selector.png) ### $x(path) > O `$x(path)` retorna um `array dos elementos do DOM que batem com o `XPath` passado. Por exemplo, o seguinte código retorna todos os elementos `

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

` que possuem `` internamente. ![Funcionamento do $x(path) com elementos internos](https://developers.google.com/web/tools/chrome-devtools/console/images/xpath-p-a-example.png) ### clear() > Limpa o console do DevTools. ### copy(objeto) > Copia a representação em string do objeto selecionado para o clipboard (teu famoso ctrl+V / cmd+V). Por exemplo, `copy($0)`, copia a string que representa o último elemento selecionado no DOM. ### debug(função) > 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. Por exemplo, executando o código `debug(jQuery.Animation)` e ela sendo chamada depois: ![Funcionamento do debug](https://developers.google.com/web/tools/chrome-devtools/console/images/debug.png) Para 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). ### dir(objeto) > O `dir(objeto)` mostra uma lista de todas as propriedades do objeto especificado. Esse método é um alias para o `console.dir()`. O seguinte exemplo mostra o `dir()` em funcionamento: ![Funcionamento do dir()](https://developers.google.com/web/tools/chrome-devtools/console/images/dir.png) ### dirxml(objeto) > O `dirxml(objeto)` mostra uma representação XML do objeto especificado, como vemos na aba Elementos. Esse método é equivalente ao `console.dirxml()`. ### inspect(objeto/função) > 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. O seguinte exemplo abre o `document.body` no Painel de Elementos: ![Funcionamento do inspect()](https://developers.google.com/web/tools/chrome-devtools/console/images/inspect.png) ### getEventListeners(objeto) > 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`. ![Funcionamento do getEventListeners()](https://developers.google.com/web/tools/chrome-devtools/console/images/get-event-listeners.png) Se 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`: ![Funcionamento do getEventListeners com 2 listeners](https://developers.google.com/web/tools/chrome-devtools/console/images/scrolling-list.png) Você pode expandir esses objetos para explorar suas propriedades: ![Funcionamento do getEventListeners com 2 listeners](https://developers.google.com/web/tools/chrome-devtools/console/images/scrolling-list-expanded.png) ### keys(objeto) > 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()`. Por exemplo, supondo uma aplicação definida com o seguinte objeto: ```js var player1 = { "name": "Ted", "level": 42 } ``` Assumindo que o player1 está definido no namespace global (para simplificar), digitando `keys(player1)` e `values(player1)` no console, os resultados seriam: ![Funcionamento de keys() e values()](https://developers.google.com/web/tools/chrome-devtools/console/images/keys-values.png) ### monitor(função) > 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. ![Funcionamento de monitor()](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor.png) ### monitorEvents(objeto[, eventos]) > 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. O seguinte código monitora todos os eventos de `resize` no objeto `window`. ![Funcionamento do monitorEvents()](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor-events.png) Se você desejasse os eventos de `resize` e `scroll`, o código ficaria assim: `monitorEvents(window, ["resize", "scroll"])`. Você 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. ![Funcionamento do monitorEvents com tipo genérico](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor-key.png) ### profile([nome]) and profileEnd([nome]) > 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). Para começar um profiling, `profile("Meu profile")` e para finalizar só usar `profileEnd("Meu profile")`. Lembrando que profiles podem ser executados aninhados. Por exemplo: ```js profile('A'); profile('B'); profileEnd('A'); profileEnd('B'); ``` Resultaria no seguinte painel: ![Resultado do profiling](https://developers.google.com/web/tools/chrome-devtools/console/images/grouped-profiles.png) ### table(data[, colunas]) > Imprime o objeto data no formato de tabela, passando um cabeçalho para as colunas opcional. ![Funcionamento do table()](https://developers.google.com/web/tools/chrome-devtools/console/images/table.png) ## Conclusão Bom 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. E 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 ================================================ FILE: posts/comecando-com-react.md ================================================ --- layout: post date: 2015-07-10T22:04:05.000Z title: "#1 - Começando com ReactJS" description: Tentando entender o que é? Para que serve? Por onde começar? main-class: js tags: - react - js - tutorial categories: - Aprendendo ReactJS --- ## Introdução A 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. Como 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. ## Moda Jovem ![Gráfico indicando que o react é cada vez mais falado.](/assets/img/trends.png) Desde 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. ## O que é o React? O React é uma `biblioteca` para criar interfaces, que foi idealizada pela galera do Facebook e Instagram. Ele 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 `component driven development`. **Mas e esse React? É tipo um Angular né?** Nã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. ## Legal, mas porque usar? Exatamente por ter um objetivo específico, sua implementação é totalmente voltada para isso e consequentemente garante melhor performance e melhores formas de utilização. O 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. Resumindo: * Facilidade de se criar componentes pequenos e reutilizáveis; * Trabalhar com a abordagem do Virtual DOM, que é bem mais rápido que o DOM nativo; * O React pode rodar no lado do servidor, permitindo um melhor SEO; * Unificar markup e a lógica da view, facilitando a extensão e manipulação. Se quiser mais alguns motivos: * [6 Reasons Why We Love React.js](https://www.syncano.io/blog/reactjs-reasons-why-part-1/) ## Como funciona? A principal mágica do React é de fato o uso do `Virtual DOM`, mas como ele funciona? Como 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. **É aí que o React brilha!** Quando 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. Segue um exemplo abaixo: ![Diagrama mostrando o funcionamento do Virtual DOM no ReactJS](/assets/img/react-1/reactjs-virtual-dom.png) Como 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. Se você quiser saber ainda melhor como funciona, tem esse [post explicando o algoritmo](http://calendar.perfplanet.com/2013/diff/). ## Pensando em Componentes Como 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. ### Mas como conseguir separar esses componentes e seus subcomponentes? Da 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. ### Exemplo Vou tomar como exemplo, o slide de destaques da Home do [Globoesporte.com](http://globoesporte.globo.com/) e vou chamá-lo de ``: ![Destaques Home Globoesporte](/assets/img/react-1/slide.jpg) O `` 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 ``. ![SlideItem](/assets/img/react-1/slideItem.jpg) E ainda dentro desses subcomponentes, podemos separar mais 2 elementos, que são o `SlideTitle` e o `SlideSubtitle`. ![SlideItem](/assets/img/react-1/slideElements.jpg) A partir disso, já conseguimos montar uma hierarquia desses componentes e subcomponentes, que seria: * Slide - SlideItem + SlideTitle + SlideSubtitle Tendo a estrutura de componentes e seus subcomponentes, fica mais fácil de trabalhar com a abordagem do React e criar suas interfaces. ## Conclusão Essa 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. ## Veja mais posts [Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs) ================================================ FILE: posts/como-colocar-seu-site-no-ar-de-graca.md ================================================ --- layout: post date: 2018-04-02T01:30:42.000Z title: Como colocar seu site no ar de graca description: Calma, não é click-bait, é hospedagem grátis mesmo! Conheça e domine o Netlify para subir todos os seus projetos e freelas de um jeito fácil, rápido e otimizado. main-class: dev tags: - hosting - performance - netlify categories: - Performance Web --- ## Introdução Fala pessoal, esse vai ser um post levemente diferente e acho que vocês vão curtir assim espero.... Primeiro, eu vou dar uma introdução do porquê desse post e como tudo nasceu xD Para 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. Uma 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:

Logo após esse Tweet várias pessoas curtiram e comentaram e eu então decidi que eu queria fazer mais um teste. ## Canal no YouTube Eu 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! Entã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! ## Curso de Netlify Como 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!** Um 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! Dentro 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! Se 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: 1. [10 razões para usar o Netlify](https://www.youtube.com/watch?v=a1cIjP1bueM) 1. [Fazendo deploy via CLI](https://www.youtube.com/watch?v=fSdSIybdABs) 1. [Fazendo deploy via Drag and Drop](https://www.youtube.com/watch?v=5jl_EKTfK8o) 1. [Fazendo deploy via Git (Github, Bitbucket, Gitlab)](https://www.youtube.com/watch?v=uMBorVg5Oa0) 1. [Mudando o nome do site](https://www.youtube.com/watch?v=zK2cSvINxng) 1. [Criando domínio próprio](https://www.youtube.com/watch?v=2DCIDr6n3WU&) 1. [Habilitando SSL](https://www.youtube.com/watch?v=m4549OevsxI) 1. [Rollbacks](https://www.youtube.com/watch?v=1Kr30tV4SRw) 1. [Deploy Previews](https://www.youtube.com/watch?v=5sFdBIg2cVc) 1. [Integrando notificações com o Slack](https://www.youtube.com/watch?v=sCxmVHtaMV4) 1. [Otimizando assets](https://www.youtube.com/watch?v=W33UdPV5QDk) 1. [Postprocessing](https://www.youtube.com/watch?v=LBgDKzePTtU) 1. [Integrando um formulário](https://www.youtube.com/watch?v=Q62s0loSY9w) 1. [Configurando página de sucesso](https://www.youtube.com/watch?v=EH3-T951V4M) 1. [Redirects](https://www.youtube.com/watch?v=IJH7HZECjNc) 1. [Agradecimentos e Brinde](https://www.youtube.com/watch?v=6qgOrFP18M0) ## Conclusão Bom galera, espero que curtam essa nova parte aí, tendo vídeos também no YouTube. ``
Se você gostou do canal, se inscreve, dá joinha e compartilha, vai me ajudar muito a conseguir alcançar novos alunos e espalhar conhecimento.
`` Por 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... ================================================ FILE: posts/como-configurar-o-google-analytics-no-nextjs-em-2021.md ================================================ --- layout: post date: 2021-09-15T13:40:01.000Z title: Como configurar o Google Analytics no NextJS em 2021 description: Como configurar corretamente o Google Analytics no NextJS com o next/Script main-class: js tags: - nextjs categories: - NextJS --- ## Introdução Fala 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. Enquanto 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) ## Novo componente de Script Uma 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.` Na 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. Com esse novo componente, nós temos 3 formas de carregamento: - `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. - `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. - `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. ## Configurando o Analytics e usando o Script Agora 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: ```jsx import Script from 'next/script' import { GA_TRACKING_ID } from 'lib/gtag' const Analytics = () => ( <> ## Margin-top negativa no footer Essa 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: ```html
content
``` E 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. ```css html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; } ``` O visual ficará o mesmo:

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

## Usando calc() para calcular a altura certa Esse 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. ```html
content
``` E no css teremos: ```css .content { min-height: calc(100vh - 70px); } .footer { height: 50px; } ``` Repare 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.

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

## Utilizando flexbox Um 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? ```html
content
``` E um css tão simples quanto: ```css html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; } ```

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

Você pode até adicionar um header acima ou mais conteúdo abaixo, sem problemas. O truque é o seguinte: - `flex: 1` no elemento filho que você quer que ocupe todo o espaço (o `content` no nosso caso) Tem um guia bastante legal sobre flexbox [aqui](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). ## Utilizando Grid Layout A 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: ```html
content
``` E no CSS: ```css html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; } ``` Essa 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 =)

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

## Conclusão Bom 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. Se você gostou do post, não deixe de comentar, curtir, compartilhar =) També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! ================================================ FILE: posts/como-criar-secoes-fullscreen-com-css.md ================================================ --- layout: post date: 2015-07-19T16:44:01.000Z title: Como criar seções fullscreen com CSS description: Vários sites famosos criam divisões grandes na tela que chamam bastante atenção, vamos aprender a fazer também. main-class: css tags: - css - tutorial categories: null --- ## Introdução O 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 =) O 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. Se você quiser pular já para o resultado está aqui: - [Usando CSS simples](https://labs.willianjusten.com.br/full-screen-sections/height-100.html) - [Usando Viewport Units](https://labs.willianjusten.com.br/full-screen-sections/viewport.html) ## Dúvida > 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! ## Contexto Como 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. Seguem alguns exemplos de sites que utilizam dessa técnica: ![Spotify](/assets/img/header-full/header-4.png) [Spotify](https://www.spotify.com/br/) --- ![Cameo](/assets/img/header-full/header-1.png) [Cameo - Vimeo](https://vimeo.com/cameo) --- ![Pen & Quill](/assets/img/header-full/header-3.png) [Pen & Quill](http://penandquill.net/) ## Problema Nó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? ## Solução 1 A 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: ```html

Header Full Screen com CSS!!

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

``` Os 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: ```css html, body { width: 100%; height: 100%; } ``` Depois disso, basta definirmos a altura em porcentagem que queremos que o `header` tenha, no caso vamos colocar um altura de 100%. ```css header { height: 100%; } ``` Segue 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 =) Se você se perguntar, mas como centralizou o texto, tem um [site irado](http://howtocenterincss.com/) que ajuda como centralizar qualquer coisa só com CSS. ## Solução 2 - Viewport Units Particularmente 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/). Como 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 =) Então, para a nossa situação, vamos imaginar o seguinte markup: ```html

Viewport Units são demais!

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

``` Para 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: ```css .height-80 { height: 80vh; } ``` Basta 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). ## Conclusão Bom, 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 =) Se 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. ================================================ FILE: posts/como-criar-um-curso-online.md ================================================ --- layout: post date: 2018-10-29T05:55:18.000Z title: Como criar um Curso Online description: Algumas dicas de como dividir seu curso, materiais de apoio, softwares que utilizo e outras coisas mais. main-class: misc tags: - courses - udemy - dev --- ## Introdução Fala 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. Há 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 =) O 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! ## Índice - [Razões para criar um curso online](#razões-para-criar-um-curso-online) - [Princípios para um bom curso online](#princípios-para-um-bom-curso-online) - [Planejando o curso](#planejando-o-curso) - [Produzindo o curso](#produzindo-o-curso) - [Detalhes técnicos e qualidade](#detalhes-técnicos-e-qualidade) - [Entrega do Instrutor](#entrega-do-instrutor) - [Dicas de Softwares](#dicas-de-softwares) - [Meu passo-a-passo ao gravar um curso](#meu-passo-a-passo-ao-gravar-um-curso) - [Publicando o seu curso](#publicando-o-seu-curso) - [Self Hostings](#self-hostings) - [Marketplaces](#marketplaces) - [Minha opinião](#minha-opinião) - [Meu histórico](#meu-histórico) - [Sobre feedbacks](#sobre-feedbacks) - [Conclusão](#conclusão) ## Razões para criar um curso online Bom, 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. **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. **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 =) **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! **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. **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. ## Princípios para um bom curso online Entã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? **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. **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. **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. ## Planejando o curso Essa talvez seja a parte mais "complicada" de todo o curso, mas se você conseguir o planinho abaixo, ficará bem mais fácil. 1. Defina o escopo do seu curso - o que você quer ensinar no curso? 2. Com o tema em mão, separe o curso em tópicos grandes, esses irão funcionar como seus módulos. 3. Em cada módulo, separe nas partes pequenas, que vão ser suas aulas. 4. Para cada aula, separe conteúdos extras e/ou exercícios se necessários. Vamos 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: - Introdução - HTML - CSS - JS Dentro de cada tópico, podemos ter aulas direto, por exemplo: - Introdução - História sobre a Web - Funcionamento dos protocolos - ... Mas você também pode granularizar mais os tópicos também. Como, por exemplo: - HTML - Elementos inline - links - imagens - ... - Elementos bloco - div - listas Ou seja, pegamos o tópico principal que é **HTML** e quebramos ele outras pequenas partes e dentro dessas, colocamos as aulas. Repare 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! Minha 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. ## Produzindo o curso Eu vou separar essa parte de produção em alguns pedaços, pois acho que vai facilitar e também fazer muito sentido. ### Detalhes técnicos e qualidade Como 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: **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. **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). **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. **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. ### Entrega do Instrutor Esse é um tópico extremamente importante também e dentro dele, existem alguns pontos necessários para falar: - Pronuncie as palavras de forma limpa e enfatize partes importantes. - Corte "huuumms" e "ããã", os estudantes querem um instrutor que passe confiança nas suas palavras. - 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. ### Dicas de Softwares Existem 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. - `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! - `Camtasia`: um ótimo editor de vídeo e com várias opções para adicionar textos, transições, cortar áudios e muito mais. (Pago) - `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) - `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. - `Windows Movie Maker`: o mesmo que os 2 acima, só que para Windows xD - `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. ### Meu passo-a-passo ao gravar um curso Com base nos programas que uso e na organização do curso, eu sigo os seguintes passos: 1. Escrevo o código que vou ensinar / monto slides 1. Faço um treino sozinho sem gravar (somente para ver pontos de atenção) 1. 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) 1. Recorto as partes dos erros, tempos de download, pausas grandes 1. Separo o audio do vídeo e edito no Audacity (equalizo o som e removo ruídos) 1. Sincronizo o audio com o vídeo 1. Adiciona vinheta inicial, marca d'agua ou qualquer coisa externa 1. Exporte na melhor resolução possível 1. Comprimo o vídeo usando o Handbrake para ter um tamanho menor 1. Faço backup desse vídeo (SEMPRE FAÇA BACKUPS!) 1. Faço o upload para a plataforma 1. Adiciono descrição e links caso necessário É 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. ## Publicando o seu curso Depois de montado e gravado o curso, precisamos de uma outra etapa extremamente importante, que é: "Onde vou publicar meu curso?". Basicamente existem 3 opções: - `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. - `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. - `Marketplaces`: são plataformas prontas e que já vendem cursos e você vai ser mais um de lá. Dentre esses tipos, temos algumas opções: **Self-hostings**: - Teachable - Thinkific - Wordpress (WooComerce + Plugins de vídeo) **Marketplaces**: - Lynda - Skillshare - Udemy E para cada uma dessas opções, nós temos as vantagens e desvantagens. ### Self Hostings **Vantagens:** - A taxa a ser paga é basicamente do sistema de pagamento, todo o resto é seu. - Os valores a serem cobrados ficam de acordo com você, nada é fixo. - Controle total na customização: cores, textos, layouts, player de vídeo. **Desvantagens:** - Todos os custos de manutenção são por sua conta. - O Marketing precisa ser feito por você. - Caso você não seja conhecido, sua marca terá menos credibilidade e pessoas terão medo de comprar e não receber. ### Marketplaces **Vantagens:** - O Marketing é feito para você - Sem custos de manutenção - Uma base gigante de alunos já cadastrados - Marketplaces famosas como a Udemy já são mais confiadas pelos alunos, até mesmo pela política de devolução em 30 dias. **Desvantagens:** - Nenhum ou baixo controle na determinação dos preços - Caso a venda seja orgânica, a taxa que eles pegam pode ser muito alta - Sua marca pode acabar sendo diluída - Sem acesso aos emails dos estudantes ou pouquíssimas informações ### Minha opinião Os 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. O 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. ### Meu histórico Eu 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. É 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: - 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. - 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. ## Sobre feedbacks Depois 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: - `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. - `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. - `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. - `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. ## Conclusão Bom 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. ================================================ FILE: posts/como-criar-um-spinner-loader-com-css-puro-e-uma-div.md ================================================ --- layout: post date: 2018-06-04T13:00:00.000Z title: Como criar um loader com CSS puro e uma div description: Todos nós já tivemos que usar um loader na vida, aprenda a criar o seu do zero com pouquíssimas linhas de código. main-class: css tags: - video - css - frontend categories: - Dicas de CSS --- ## Introdução Fala 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. E 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. Se você quiser ver funcionando, aqui [está o link](https://labs.willianjusten.com.br/spinner-loader/). ## Video ## Código Para 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: ```css .spinner { border: 8px solid rgba(0, 0, 0, 0.1); border-left-color: #22a6b3; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } ``` Como 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: ```css @keyframes spin { to { transform: rotate(360deg); } } ``` Se você quiser, o código também está lá no [Github](https://github.com/willianjusten/labs/blob/gh-pages/spinner-loader/index.html). ## Conclusão Espero 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! =) ================================================ FILE: posts/como-deixar-a-imagem-da-webcam-redonda-no-obs.md ================================================ --- layout: post date: 2021-03-06T14:15:30.000Z title: Como deixar a imagem da webcam redonda no OBS description: Como utilizar filtro e máscara para ter seu vídeo mais legal main-class: misc tags: - dicas categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Máscara! Bom, 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? Bom, 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. Para 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. ## Conclusão E 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. ================================================ FILE: posts/como-fazer-seu-site-funcionar-offline-com-pwa.md ================================================ --- layout: post date: 2018-03-26T06:20:50.000Z title: Como fazer seu site funcionar offline com PWA description: O passo-a-passo de como criar um site PWA que funciona até offline. main-class: dev tags: - performance - pwa - serviceworker categories: - Performance Web --- ## Índice - [Introdução](#intro) - [O que é Progressive Web App](#o-que-e-pwa) - [O checklist para se ter um PWA](#checklist-pwa) - [Use HTTPS e redirecione sempre para HTTPS](#https) - [Tenha um site Responsivo e Rápido](#responsivo) - [Tenha uma cor tema no site](#tema) - [Tenha um Manifesto com informações do seu site](#manifest) - [Registre um Service Worker e responda 200 quando offline](#register) - [O que é um Service Worker?](#o-que-e-service-worker) - [Informações Importantes do Service Worker](#informacoes-importantes) - [Detectando se o Browser suporta](#detectando) - [Registrando](#registrando) - [Ciclo de Vida](#ciclo-de-vida) - [Install](#install) - [Activate](#activate) - [Fetch](#fetch) - [Conclusão](#conclusao)

Introdução

Fala 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. Enquanto 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. A 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

O que é Progressive Web App?

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

O checklist para se ter um PWA

A 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. E 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

1 - Use HTTPS e redirecione sempre para 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. Se 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.

2 - Tenha um site Responsivo e Rápido

Se 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: ```html ``` Sobre 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.

3 - Tenha uma cor tema no site

Eu 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: ```html ```

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

O 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. E como esse `manifest.json` se parece? Segue abaixo o exemplo do meu blog (sem todos os ícones): ```js { "name": "Willian Justen Blog", "short_name": "WJusten", "theme_color": "#005f97", "background_color": "#005f97", "display": "standalone", "scope": "/", "start_url": "/?utm_source=homescreen", "lang": "pt-BR", "orientation": "any", "icons": [ { "src": "/assets/img/icons/favicon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } ``` Esse `manifest.json` possui algumas regras muito importantes que são: * O `short_name` não pode exceder 12 letras, pois é o nome que vai aparecer abaixo do ícone do app. * O `background_color` é obrigatório. * O array de `icons` precisa ter pelo menos um ícone de `512x512`. * O ícone precisa ser em `png`. Existem sites que fazem a criação para você: * [App Manifest](https://app-manifest.firebaseapp.com/) * [PWA Builder](https://preview.pwabuilder.com/generate) Essa 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. Repare 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. Com o `manifest.json` criado corretamente, não esqueça de adicionar no `head` do projeto a seguinte linha: ```html ``` Tudo estando certinho, se você tiver visitantes assíduos, é possível que eles vejam uma telinha como a seguinte: ![Tela do meu blog mostrando para instalar o site como app](/assets/img/manifest.jpg)

5 - Registre um Service Worker e responda 200 quando offline

É 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.

O que é um Service Worker?

Um **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. Eu 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!

Informações Importantes do Service Worker

* O Service Worker funciona numa thread separada no browser, com isso não tem acesso ao DOM. * 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. * 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. * 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. Existe 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.

Detectando se o Browser suporta

O 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. ```js if ('serviceWorker' in navigator) { console.log('ServiceWorker é suportado, vamos usar!'); } else { console.log('ServiceWorker não é suportado.'); } ```

Registrando

Com 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. ```js if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js') .then(reg => console.info('registered sw', reg)) .catch(err => console.error('error registering sw', err)); } ```

Ciclo de Vida

O 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. O Service Worker possui então as seguintes etapas: * install * activate * fetch * message * sync * push Eu 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.

Install

O 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: ```js --- layout: null --- const staticCacheName = 'willian-justen-{{ site.time | date: "%Y-%m-%d-%H-%M" }}'; const filesToCache = [ { % for page in site.pages_to_cache % } '{ { page } }', { % endfor % } { % for post in site.posts limit: 6 % } '{ { post.url } }', { % endfor % } { % for asset in site.files_to_cache % } '{ { asset } }', { % endfor % } ]; // Cache on install this.addEventListener("install", event => { this.skipWaiting(); event.waitUntil( caches.open(staticCacheName) .then(cache => { return cache.addAll(filesToCache); }) ) }); ``` Bom, 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. E 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. Definido 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.

Activate

O 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. ```js // Clear cache on activate this.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames .filter(cacheName => (cacheName.startsWith('willian-justen-'))) .filter(cacheName => (cacheName !== staticCacheName)) .map(cacheName => caches.delete(cacheName)) ); }) ); }); ``` Verifique 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.

Fetch

O evento de `fetch` é ativado toda vez que uma página é requisitada. ```js // Serve from Cache this.addEventListener("fetch", event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) .catch(() => { return caches.match('/offline/index.html'); }) ) }); ``` O `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: ![Página Offline com um jogo e uma lista de posts](/assets/img/offline-page.png) Yeeeey! 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`.

Conclusão

É 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! ================================================ FILE: posts/como-melhorar-meu-seo.md ================================================ --- layout: post date: 2015-01-09T23:21:53.000Z title: Como melhorar meu SEO? description: Algumas dicas para fazer com que seu site ou blog seja melhor indexado pelos buscadores. main-class: dev tags: - seo - tutorial --- ![SEO](/assets/img/seo/seo.jpg) ## O que é SEO? Search 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. ## Qual a importância? Estar [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. >Ahhhh é só para isso? Não preciso disso não, eu quero fazer é um brógui. Quando 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. ## E como faço esse tal de SEO? Bom, 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: ### 1) Faça o uso correto dos Headers Nã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. ### 2) Tenha titles diferenciados A 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. ### 3) O Conteúdo é TUDO Sim, 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. ### 4) Utilize URL's amigáveis A 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`. ### 5) Otimize a página em torno da palavra-chave Nã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. ### 6) Adicione alt na imagem Não é para colocar uma simples palavra como alt, descreva aquela imagem corretamente, isso também irá influenciar no crawler quando estiver lendo ### 7) Se mantenha atualizado Sites 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. ### 8) Preste atenção em links canônicos Defina 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. ### 9) Cuidado com páginas que utilizam Flash, Ajax e Iframes Os 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. ### 10) Faça um site fácil Como 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. ### 11) Use links absolutos Links absolutos permitem que o mecanismo de busca indexe ou links ligados aquela página. ### 12) Utilize um sitemap Sitemaps 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. ### 13) Utilize redes sociais Praticamente 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. ### 14) Crie um site responsivo Com 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. ### 15) Melhore a velocidade do seu site A Google tem trabalhado cada vez mais com a experiência do usuário, um site que carrega rápido é fator importantíssimo. ### 16) Trabalhe com dados estruturados Dados estruturados permitem uma maior organização de seu conteúdo e na minha opinião, ainda tem muito futuro. Segue um link bem legal da google: [Introduction to Data Highlighter](https://www.youtube.com/watch?v=WrEJds3QeTw) ### 17) Crie uma rede É 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ão pare por aqui! Como 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 =) ================================================ FILE: posts/como-mostrar-trechos-de-codigo-num-blog-com-nextjs.md ================================================ --- layout: post date: 2021-09-16T14:16:42.000Z title: Como mostrar trechos de código num blog com NextJS description: Aprenda a usar um syntax highlighter para mostrar trechos de código mais bonitos no seu blog main-class: js tags: - nextjs categories: - NextJS --- ## Introdução Continuando 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! Enquanto 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. ## Instalando e configurando Para 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. Para 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: ```bash yarn add prismjs babel-plugin-prismjs ``` Depois de instalado, podemos configurar o pacote no nosso `.babelrc`, algo como por exemplo: ```json { "plugins": [ ["prismjs", { "languages": ["javascript", "css", "markup"], "plugins": ["line-numbers"], "theme": "twilight", "css": true }] ] } ``` Para mais detalhes e configurações, vale olhar o [repositório oficial](https://github.com/mAAdhaTTah/babel-plugin-prismjs). ## Fazendo funcionar Depois 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. Para configurar, é só importar e mandar carregar: ```jsx import { useEffect } from 'react' import Prism from 'prismjs' useEffect(() => { Prism.highlightAll() }, [post]) // note que eu atualizo sempre que o post muda já que meu layout é fixo ``` E 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: ```markdown ` ` `js ` ` ` ``` ## Conclusão Como 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. ================================================ FILE: posts/como-se-manter-atualizado-no-frontend.md ================================================ --- layout: post date: 2016-09-03T18:06:13.000Z title: Como se manter atualizado no Frontend description: O mundo do Frontend muda muito o tempo todo e fica difícil de acompanhar toda essa mudança, aqui vão umas dicas para ajudar bastante nisso. main-class: dev tags: - frontend - tip - eventos categories: null --- ## Índice - [Introdução](#intro) - [Se atualizando através de blogs](#blogs) - [Feedly](#feedly) - [Panda](#panda) - [Pocket](#pocket) - [Links dos blogs](#links-blogs) - [Reddit](#reddit) - [Weekly](#weekly) - [Youtube](#youtube) - [E eventos?](#eventos) - [Meetup](#meetup) - [Eventos - Front-end Brasil](#eventos-frontendbr) - [Seguindo pessoas boas](#follow) - [Twitter](#twitter) - [Github](#github) - [Conclusão](#conclusao)

Introdução

Faaala 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. **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! Eu 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. A 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.

Se atualizando através de blogs

Existem 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.

Feedly

![Tela de abertura do Feedly](/assets/img/up-to-date/feedly-1.png) Atravé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á. Mas 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! ![Tela do notifieer do Feedly](/assets/img/up-to-date/feedly-5.png) - [Feedly Notifier Chrome](https://chrome.google.com/webstore/detail/feedly-notifier/egikgfbhipinieabdmcpigejkaomgjgb?hl=pt-BR) - [Feedly Notifier Firefox](https://addons.mozilla.org/pt-br/firefox/addon/feedly-notifier/)

Panda

![Tela do Panda](/assets/img/up-to-date/panda-1.png) Outra 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! - [Panda News Chrome](https://chrome.google.com/webstore/detail/panda-hacker-news-dribbbl/jhiocdmmaannaccoofjfmjpbfkogmnap)

Pocket

![Tela de pesquisa do Pocket](/assets/img/up-to-date/pocket-1.png) E 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? Existem 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! #### Em inglês - [Codrops](http://tympanus.net/codrops/) - o melhor blog para buscar boas referências e tutoriais sobre coisas voadoras de front. - [Smashing Magazine](https://www.smashingmagazine.com/) - outro blog referência para front, com artigos sobre diversos assuntos, como performance, UX, novas metodologias. - [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. - [CSS Wizardry](https://csswizardry.com/) - blog do criador do ITCSS, tem bastante coisa sobre boas práticas de CSS. - [David Walsh](https://davidwalsh.name/) - esse cara escreve muito há anos, sempre com novas dicas sobre JS e coisas para desenvolvimento. - [Sara Soueidan Blog](https://sarasoueidan.com/blog/) - sou fã demais dessa mulher, a maior referência de SVG do mundo! - [A List Apart](http://alistapart.com/) - um blog escrito por várias autoridades de desenvolvimento. - [Sitepoint](https://www.sitepoint.com/) - como se entitulam um blog de desenvolvedores para desenvolvedores. - [Mozilla Hacks](https://hacks.mozilla.org/) - novidades da Mozilla para desenvolvedores web. - [Hacker News](https://news.ycombinator.com/) - páginas selecionadas diariamente com novidades sobre front-end e TI em geral. - [Design Modo](http://designmodo.com/) - desde inspiração e novidade sobre UI/UX até programação front-end. - [Developer Drive](http://www.developerdrive.com/) - blog com novidade e tutoriais sobre desenvolvimento web. - [Wes Bos](http://wesbos.com/) - blog do canadaense Wes Bos, criador de alguns cursos de muita qualidade e ta sempre trazendo coisas novas. #### Em português - [Esse blog lindo](https://willianjusten.com.br/) - um blog que de vez em quando escreve algo que presta =) - [Blog do Maujor](http://www.maujor.com/blog/) - como não falar dessa lenda? Muito material bom lá. - [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 - [Da2k](http://blog.da2k.com.br/) - blog de outro amigão o Fernando Daciuk, com posts super completos de JS. - [UX Collective](https://brasil.uxdesign.cc/) - blog bem legal sobre usabilidade, user experience, design, tecnologia e comportamento. - [UI Lab](http://www.uilab.com.br/) - blog com novidades e dicas sobre usabilidade, user experience, design e user interface.

Reddit

O [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: - [/r/programming](https://www.reddit.com/r/programming) - links mais gerais sobre programação - [/r/webdev](https://www.reddit.com/r/webdev/) - links específicos sobre desenvolvimento web - [/r/Frontend](https://www.reddit.com/r/Frontend/) - links específicos sobre front-end - [/r/css](https://www.reddit.com/r/css/) - links específicos sobre CSS - [/r/javascript](https://www.reddit.com/r/javascript/) - links específicos sobre JavaScript É 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.

Weekly

Weekly é 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: - [BrazilJS Weekly](https://braziljs.org/#weekly) - a weekly mais famosa de desenvolvimento no Brasil. - [Web Design Weekly](https://web-design-weekly.com/) - muitos artigos sobre desenvolvimento em geral. - [Frontend Focus](https://frontendfoc.us/) - antiga html5weekly, focando em bastante conteúdo de canvas, webGL, etc. - [Javascript Weekly](http://javascriptweekly.com/) - weekly totalmente focada em JS. - [Web Tools Weekly](http://webtoolsweekly.com/) - já pensou numa newsletter falando sobre ferramentas para te ajudar - [Umaar Hansa Dev Tips](https://umaar.com/dev-tips/) - Uma weekly para acompanhar as novas features e recursos do Devtools do Chrome - [Accessibility Weekly](http://a11yweekly.com/) - Uma weekly focado em recursos de acessibilidade e diversas dicas sobre o assunto. - [Node Weekly](http://nodeweekly.com/) - Weekly com as principais novidades sobre Node.js. - [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. - [Ruby Weekly](http://rubyweekly.com/) - Ruby Weekly com o melhor do ruby.

Youtube

O 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: #### Em inglês - [thenewboston](https://www.youtube.com/user/thenewboston/videos) - [codigofacilito](https://www.youtube.com/user/codigofacilito/videos) - [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/videos) - [LearnCode Academy](https://www.youtube.com/user/learncodeacademy/videos) - [Nic Raboy](https://www.youtube.com/user/nicraboy/videos) - [DevTips](https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ) - [Codecourse](https://www.youtube.com/channel/UCpOIUW62tnJTtpWFABxWZ8g) - [CSS-TRICKS](https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA) - [Funfunfunction](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q) - [Level Up Tuts](https://www.youtube.com/user/LevelUpTuts/) #### Em português - [Rodrigo Branas](https://www.youtube.com/channel/UCkqOofjb7nl6V8vXrIbGtiQ) - [Webschool JavaScript](https://www.youtube.com/channel/UCKdo1RaF8gzfhvkOdZv_ojg) - [Loiane Groner](https://www.youtube.com/channel/UCqQn92noBhY9VKQy4xCHPsg) - [Curso em Vídeo](https://www.youtube.com/channel/UCrWvhVmt0Qac3HgsjQK62FQ) - [BrazilJS](https://www.youtube.com/channel/UCnLdHOuue5i1O7TsH6oh07w) - [CSS Cast Show](https://www.youtube.com/channel/UC9d_htYmYYFUXB2vBKx4NgA) - [Gravento](https://www.youtube.com/channel/UCU_SZQAcN4IDs_RXY7iT4sg) - [Elcio Ferreira](https://www.youtube.com/channel/UCQj6o0dPVJd6yy16-49qIIg) - [Estevan Maito](https://www.youtube.com/channel/UCIUOmAsotrzdK8VsZuHfVHw)

E eventos?

Eu 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

Meetup

![Tela do Meetup](/assets/img/up-to-date/meetup.png) O [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.

Eventos - Front-end Brasil

![Tela do Eventos](/assets/img/up-to-date/eventos.png) E 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 Só 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!

Seguindo pessoas boas

Na 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/).

Twitter

Já 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). - [Eu - @Willian_justen](https://twitter.com/Willian_justen/) - as vezes posto algo legal sério, segue lá T.T - [@addyosmani](https://twitter.com/addyosmani) - engenheiro na Google, trabalhando ativamente no Google Chrome. - [@cowboy](https://twitter.com/cowboy) - desenvolvedor na Bocoup e criador do GruntJS. - [@chriscoyier](https://twitter.com/chriscoyier) - escritor do CSS-Tricks e A List Apart. - [@davidwalshblog](https://twitter.com/davidwalshblog) - desenvolver na Mozilla e escritor no blog de próprio nome. - [@jaffathecake](https://twitter.com/jaffathecake) - engenheiro na Google, vem falando muito sobre Service Workers. - [@jeresig](https://twitter.com/jeresig) - criador do jQuery, fundador da Khan Academy e escritor. - [@leaverou](https://twitter.com/leaveroudev) - criadora de várias ferramentas de desenvolvimento e pesquisadora no MIT. - [@paul_irish](https://twitter.com/paul_irish) - outro engenheiro da Google, que trabalha bastante no Chrome DevTools.

Github

Muita 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. Alé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. - [Euzinho](https://github.com/willianjusten/) - ah vai, segue lá, custa nada ahuahua - [Sinde Sorhus](https://github.com/sindresorhus) - o mito do Github, o cara criou praticamente tudo que você conhece e mais. - [Contra](https://github.com/contra) - criador do Gulp e várias outras coisinhas. - [Jason Miller](https://github.com/developit) - criador do Preact e entusiasta de Performance e JS. - [Matt DesLauriers](https://github.com/mattdesl) - desenvolvedor na Jam3, escritor do Promise Cookbook e outras coisas legais. - [Lea Verou](https://github.com/LeaVerou) - criadora de várias ferramentas de desenvolvimento e pesquisadora no MIT. - [Addy Osmani](https://github.com/addyosmani) - engenheiro na Google, trabalhando ativamente no Google Chrome. - [John Resig](https://github.com/jeresig) - criador do jQuery, Engenheiro de Software na Khan Academy e escritor.

Conclusão

Bom 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 =) Lembre-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). ================================================ FILE: posts/como-se-tornar-um-desenvolvedor-front-end.md ================================================ --- layout: post date: 2015-02-24T18:46:24.000Z title: Como se tornar um desenvolvedor Front End description: Aprenda os caminhos para virar um desenvolvedor Front End de qualidade. main-class: dev tags: - frontend - css - js - tutorial categories: null --- ## Índice - [Introdução](#intro) - [O que faz um desenvolvedor Front End?](#oqfaz) - [Qual a importância do Front End?](#import) - [Mercado de Trabalho](#mercado) - [Níveis de conhecimento](#niveis) - [Eita lascou, como aprendo tudo isso?](#eita) - [Inglês](#ingles) - [Editores de Código](#editores) - [Básico do Terminal](#terminal) - [HTML](#html) - [CSS](#css) - [Javascript](#js) - [Controle de Versão](#git) - [Seo](#seo) - [Performance](#perf) - [Automação de Tarefas](#task) - [Mantenha-se Atualizado](#update) - [Dicas](#dicas)

Introdução

Bom, 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. Algum 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. O 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.

O que faz um desenvolvedor Front End?

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

Qual a importância do Front End?

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

Mercado de trabalho

![Gráfico de Frontend Developer](/assets/img/quero-ser-desenvolvedor-frontend/frontend-mercado.png) Acho 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íveis de conhecimento

Olha, 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. > Lembre-se: essas informações podem variar bastante de lugar para lugar. ### Iniciante Básico - HTML (estrutura e tags) - CSS (propriedades básicas) - JS (pequenas noções, chamadas de scripts prontos) - Básico de Photoshop (recortes, cores, fontes) ### Intermediário - HTML (Semântica e Acessibilidade) - CSS (propriedades avançadas do CSS3, Design Responsivo, funcionamento de grids e noção de frameworks) - JS (Entendimento da linguagem, noções de orientação a objeto) - Ferramenta de Versionamento (Git) - Noções de performance - SEO (**Extra**) ### Avançado - CSS (Entender pre-processadores e suas funcões) - JS (Conhecimento forte na linguagem, entender algumas arquiteturas e Testes) - NodeJS (Saber como funciona e alguns conhecimentos basicos para automatização e afins) - Grunt/Gulp (saber como automatizar processos) - Bons conhecimentos de performance - Noções de UX/UI (**Extra**) ### Master - CSS (conceitos avançados de arquitetura - BEM, Organic, Atomic) - JS (Total domínio na linguagem, design patterns na palma da mão) - NodeJS (saber como criar módulos, chamá-los tanto no front quanto no back) - Ter sólida experiência em sistemas front como o MEAN Stack ![Gato surpreso](https://i.imgflip.com/1ih4qs.jpg)

Eita lascou, como aprendo tudo isso?

Estava achando que ser desenvolvedor front end é moleza? Como disse o [Nicholas C. Zakas](https://twitter.com/slicknet) ![Um tweet falando sobre como a profissão de frontender é difícil](/assets/img/quero-ser-desenvolvedor-frontend/twitter.png) Cada 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. Vou separar aqui as principais áreas que precisamos estudar, o porquê delas e alguns links para auxiliá-los no estudo. ---

Inglês

Sim, 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: - [Como aprender inglês](https://carlosschults.net/pt/como-aprender-ingles-parte-1/) - [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/) ---

Editores de código

Eles 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. - [Sublime Text](http://www.sublimetext.com/) - [Brackets](http://brackets.io/) - [Atom](https://atom.io/) - [Vim](http://www.vim.org/) - Procure que tem muitos! #### Sublime Text - [12 Most-Wanted Sublime Text Tips And Tricks](http://www.hongkiat.com/blog/sublime-text-tips/) - [7 Plugins do sublime que você deveria conhecer](https://tableless.com.br/7-plugins-sublime-text-que-voce-deveria-conhecer/) #### Brackets - [Brackets Course](http://css-snippets.com/brackets-course/) #### Vim - [12 Vim Tips](http://dalibornasevic.com/posts/43-12-vim-tips) - [Powe Vim Usage](http://www.ukuug.org/events/linux2004/programme/paper-SMyers/Linux_2004_slides/vim_tips/) - [Vim Adventures](http://vim-adventures.com/) - aprenda Vim jogando!!! Demais! <3 - [Vim Tutorials Screencasts and Resources](http://code.tutsplus.com/articles/25-vim-tutorials-screencasts-and-resources--net-14631) ---

Básico do Terminal

Se 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. - [Unix: Conceitos e Comandos Básicos](http://www.ime.usp.br/~ueda/ldoc/rb.html) - [Unix Course](http://www.tutorialspoint.com/unix/) - [Learn Shell](http://learnshell.org/) - [Learning the Shell](http://linuxcommand.org/lc3_learning_the_shell.php) - [Blog do Vitor Britto](http://vitorbritto.com.br/blog/) - Esse cara vira e mexe solta alguma dica muito legal sobre. ---

HTML

A 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. #### Básico - [Codecademy HTML](https://www.codecademy.com/catalog/language/html-css) - [Dash](https://dash.generalassemb.ly/) - [Teamtreehouse](http://teamtreehouse.com/library/topic:learn-html/type:course) - [CodeSchool](https://www.codeschool.com/paths/html-css) - [30 Days to Learn Html and CSS](https://www.youtube.com/watch?v=yTHTo28hwTQ&list=PLgGbWId6zgaWZkPFI4Sc9QXDmmOWa1v5F) - [Learn to code Html & CSS](https://learn.shayhowe.com/) - [Apostila Web da Caelum](http://www.caelum.com.br/apostila-html-css-javascript/) - [Dive into Html5 em Português](https://diveintohtml5.com.br/) #### Semântica - [Use Html5 sectioning elements](http://blog.teamtreehouse.com/use-html5-sectioning-elements) - [SEO, Semântica e Html5](http://www.slideshare.net/fabioflat/seo-semantica-e-html5-12901651) - [A semântica do HTML](https://speakerdeck.com/diegoeis/a-semantica-do-html) ### Acessibilidade - [Slides de Acessibilidade na web](https://tableless.com.br/slides-para-devs-9-acessibilidade-na-web/) - [WebAIM](http://webaim.org/intro/) ---

CSS

No 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. **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. #### Básico - [Site do Maujor](http://www.maujor.com/) - [Aprenda Layout com CSS](http://pt-br.learnlayout.com/) - [CSS Cross-country - Code Scholl](https://www.codeschool.com/courses/css-cross-country) #### CSS3 - [Css3 for web Designers - Book](http://www.abookapart.com/products/css3-for-web-designers) - [The Guide to CSS Animation](http://www.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/) - [Transition e Animation](https://tableless.com.br/transition-e-animation/) - [MDN: CSS Animations](https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_animations) #### Frameworks / Grids / Responsive - [Utilizando o bootstrap de forma consistente](https://www.felipefialho.com/blog/2014/utilizando-o-bootstrap-de-forma-consistente) - [Desenvolvendo com Bootstrap 3](http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena) - [Snippets para Bootstrap](http://bootsnipp.com/) - [Foundation 5 para iniciantes - video](http://dev.rbtech.info/zurb-foundation-5-iniciantes-aula-1/) - [Jeet](http://jeet.gs/) - aconselho fortemente - [Skeleton](http://getskeleton.com/) - [Responsive Design Workflow - Video](https://vimeo.com/45915667) - [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html) #### Pré-processadores - [Less](http://lesscss.org/) - [Sass](http://sass-lang.com/) - [Stylus](http://learnboost.github.io/stylus/) - [Por que usar pré-processadores?](https://speakerdeck.com/romulomachado/por-que-usar-pre-processadores-css) - [Slide comparando os 3 pré-processadores](https://speakerdeck.com/willianjusten/pre-processadores-css) #### Metodologias / Boas Práticas - [How to structure a Sass project](http://thesassway.com/beginner/how-to-structure-a-sass-project) - [Css Performance Organization](https://learn.shayhowe.com/advanced-html-css/performance-organization/) - [OOCSS, SMACSS](http://www.slideshare.net/maxdesign/css-oocss-and-smacss) - [Understanding BEM syntax](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) - [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) #### Inpirações / Tutoriais - [Codrops](http://tympanus.net/codrops/) - só ame <3 - [CSS-Tricks](http://css-tricks.com/) - [Codepen](http://codepen.io/) - [24 ways](http://24ways.org/topics/code/) ---

Javascript

Basicamente 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: > Desenvolvedor Front End que não sabe javascript é recortador de layout. - Suissa Tome bastante cuidado ao querer tomar atalhos, como utilizar JQuery para tudo ou já tentar ir direto para Angular, que é modinha. No 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. O 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. - [Codecademy - JS](https://www.codecademy.com/catalog/language/javascript) - [MDN - JS](https://developer.mozilla.org/en-US/Learn/JavaScript) - [How to Learn JS Properly](http://javascriptissexy.com/how-to-learn-javascript-properly/) ---

Controle de Versão

Quantas 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. A 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. #### Básico - [Meu curso de Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/) - [Try Git - Code School](https://try.github.io/levels/1/challenges/1) - [Guia prático](http://rogerdudler.github.io/git-guide/index.pt_BR.html) - [Introdução ao git e github - Vídeo](https://www.youtube.com/watch?v=yNwh0S0S0bU) #### Intermediário/Avançado - [A web-focused git workflow](http://joemaller.com/990/a-web-focused-git-workflow/) - [Deploy web applications easily with svn](http://taylorjasko.com/deploy-web-applications-easily-with-svn/) ---

SEO

Search 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. E 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. Nem 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. - [Agência Mestre - MestreSEO](https://www.agenciamestre.com/) - [Como melhorar meu SEO?](https://willianjusten.com.br/como-melhorar-meu-seo/) - [Dicas de SEO para Front-end](https://tableless.com.br/dicas-de-seo-para-front-end/) ---

Performance

Como 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. O [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). ---

Automação de Tarefas

Durante 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/). - [State of Grunt](https://cowboy.github.io/state-of-grunt-fe-summit-2014-talk) - [Gulp - The vision, history and future of the project](https://medium.com/@contrahacks/gulp-3828e8126466) - [Grunt vs Gulp - Beyond Numbers](https://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/) - [Building with Gulp](https://www.smashingmagazine.com/2014/06/11/building-with-gulp/) - [Slides of Gulp](https://slides.com/contra/gulp) - [Gulp, Grunt, Whatever](https://ponyfoo.com/articles/gulp-grunt-whatever) - [Gulp: O novo automatizador](https://tableless.com.br/gulp-o-novo-automatizador/) - [Bye bye Grunt.js, hello Gulp.js!](https://blog.caelum.com.br/bye-bye-grunt-js-hello-gulp-js/) ---

Mantenha-se Atualizado

Como 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! #### Pessoas para seguir - [Addy Osmani](https://twitter.com/addyosmani) - [Ben Alman](https://twitter.com/cowboy) - [Brad Frost](https://twitter.com/brad_frost) - [Chris Coyer](https://twitter.com/chriscoyier) - [John Resig](https://twitter.com/jeresig) - [Sara Soueidan](https://twitter.com/SaraSoueidan) #### Weeklys - [Web Design Weekly](http://web-design-weekly.com/) - [Frontend Focus](https://frontendfoc.us/) - [Css Weekly](http://css-weekly.com/) - [Javascript Weekly](http://javascriptweekly.com/) #### Blogs - [Codrops](http://tympanus.net/codrops/) - [EchoJS](http://www.echojs.com/) - [Google’s Web Fundamentals Program](https://developers.google.com/web) - [Css-tricks](http://css-tricks.com/) - [Smashing Magazine](http://www.smashingmagazine.com/) - [Da2k Blog](http://blog.da2k.com.br/) - PtBr - [Leandro Oriente Blog](http://leandrooriente.com/) - PtBr - [Felipe Fialho Blog](https://www.felipefialho.com/blog/) - PtBr #### Eventos Nada 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. Falando 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) ---

Dicas

Para 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ã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. - 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. - 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. - 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. -Na programação: a leitura vale prata e a prática vale ouro. --- ## Conclusão É 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. Para 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. --- ## Fontes - [O Papel do Desenvolvedor Front End](http://pt.slideshare.net/raelmax/o-papel-do-desenvolvedor-front-end) - [Guia Front-end das Galáxias](http://pt.slideshare.net/davidsonfellipe/guia-do-front-end-das-galaxias) - [Como me tornar um desenvolvedor front end](http://leandrooriente.com/como-me-tornar-um-desenvolvedor-front-end/) - [Como se tornar um dev front-end](https://tableless.com.br/tornar-dev-front-end/) ================================================ FILE: posts/como-ter-um-blog-ajuda-a-conseguir-oportunidades.md ================================================ --- layout: post date: 2021-06-30T04:02:12.000Z title: Como ter um Blog ajuda a conseguir melhores oportunidades description: Se você está procurando um emprego ou melhores oportunidades, ter um blog pode ajudar muito! main-class: dev tags: - blog - code - dev --- ## Introdução Fala 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. Seguindo 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! E 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á? ## Então você quer arrumar um emprego? Se 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: * Entrevista com RH * Projeto de código para fazer no seu tempo * Conversa com Devs da empresa * Live coding * e mais... Ufa, parece muita coisa e é mesmo! Mas e se eu te falar que algumas dessas etapas você pode acelerar e as vezes até mesmo cortar? > Fala sério Willian, como é que vou pular etapas? Isso é maior mentira sua. — Você Eu 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. Inclusive, 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. ## Ganhando visibilidade Quando 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**. Quanto 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. ## Aprendendo em público Pode 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. Eu 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: * [Post Learn In Public - Swyx](https://www.swyx.io/learn-in-public/) * [Talk Learn In Public - Swyx](https://www.youtube.com/watch?v=znNxtSbuBjI) * [Learn in Public, It’s Great - Ali Abdal](https://aliabdaal.com/friendzone/learn-in-public-it-s-great-268305/) ## Seu portfólio vivo Unindo 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. Dependendo 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. ## Importância do conteúdo ser seu! Espero 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: ![Imagem do Paywall do Medium dizendo que parar ler, precisa criar conta](/assets/img/medium.jpeg) Essa é 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. ## Começando hoje mesmo com Hashnode [![Hashnode - Everything you need to start blogging as a developer](/assets/img/hashnode.jpg)](https://hashnode.com/?source=willian) Nem 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). Eles 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!** Agora algumas outras vantagens que eu não conhecia da Hashnode e fui descobrindo e que nossa, achei ótimas! #### Você pode usar seu próprio domínio Quando 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. #### Sem Paywall, sem propaganda, nada Tudo 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! #### Customização Uma 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. #### Importar / Replicar Se 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á! Inclusive, eu vou começar a [migrar meus posts](https://willianjusten.hashnode.dev/), se quiser assinar a newsletter por lá, também vai poder! #### Newsletter integrada Dentro 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. #### Muito mais e comparativos Eles tem muitas outras coisas, então fica até mais fácil você ver esses excelentes comparativos que eles mesmos dão: - [Hashnode vs Medium](https://hashnode.com/vs/medium) - [Hashnode vs Dev.to](https://hashnode.com/vs/devto) - [Hashnode vs Wordpress](https://hashnode.com/vs/wordpress) ## Conclusão Espero 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. E 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! ================================================ FILE: posts/como-um-patinho-me-ajudou-a-ser-um-programador-melhor.md ================================================ --- layout: post date: 2019-09-06T13:06:02.000Z title: Como um patinho me ajudou a ser um programador melhor description: Sim, é isso mesmo, um patinho de borracha pode ajudar demais a você encontrar seus bugs. main-class: dev tags: - debug - code --- ## Introdução Olá pessoal, eu sei que esse título parece estranho demais e pode não fazer sentido mas prometo que será efetivo. Hoje 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: ![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) O 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. Bom, já falei demais, vamos ao que importa! ## Qual é desse pato afinal? A 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. Esse 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). ## Como funciona? Os 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. O 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: > Mas o que há de errado? Estava funcionando ainda pouquinho! Nesse 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! ![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) ## Que bruxaria é essa?! Existe [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. É aqui que você se pergunta: > Tá, mas por que de um pato? Nã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. ## Conclusão Esse 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. Muitos 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? Eu 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. Entã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! ================================================ FILE: posts/como-usar-e-se-comportar-melhor-em-chats.md ================================================ --- layout: post date: 2021-04-13T13:50:09.000Z title: Como usar e se comportar melhor em chats description: 10 dicas para você tirar o melhor do Slack, Discord, etc. main-class: misc tags: - chat - dicas --- ## Introdução Fala 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. Como é 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á! ## Dica 1: Utilize threads Se o chat disponibilizar `threads`, utilize a mesma, crie uma mensagem e coloque o resto das mensagens dentro dela para evitar poluir. Para 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ó. ## Dica 2: Use a busca Antes 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. ## Dica 3: Evite postar blocos grandes de código Evite 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. ## Dica 4: Evite mandar mensagens separadas Evite 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. Uma coisa muito chata em chats é quando você recebe 99 notificações que na realidade poderia ser 1 mensagem só. ## Dica 5: Ao enviar DM, seja educado mas seja direto Ao 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. ## Dica 6: Dê o máximo de contexto Sempre 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. ## Dica 7: Não só diga resolvido, mas diga como Se alguém resolveu seu problema, agradeça e `avise`, é importante saber que foi resolvido e ainda mais importante, `como` foi resolvido. ## Dica 8: Evite repetir a mesma mensagem A 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. ## Dica 9: São pessoas do outro lado Essa é 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. # Conclusão Espero 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. E 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. ================================================ FILE: posts/como-usar-o-google-analytics-events-tracker.md ================================================ --- layout: post date: 2019-07-23T09:50:10.000Z title: Como usar o Google Analytics Events Tracker? description: Qual a importância de rastrear eventos no seu site e como fazer isso de forma simples. main-class: dev tags: - google analytics - javascript - react --- ## Introdução Fala 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. Na 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 =) Enquanto 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). ## O que são esses eventos? Antes de falar como usar, é melhor explicar o que são né? A explicação mais simples é: > 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. Alguns exemplos de interação seriam: * View de uma página * Clique num link de menu * Uma busca no site * Play num vídeo * Download de um pdf * Play de um podcast * Scroll da página Enfim, você pode mensurar qualquer tipo de interação que o usuário tenha no seu site! ## Qual a importância disso? Se até agora você não viu a importância disso, vou dar alguns exemplos para ajudar. ### Situação 1: > 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. ### Situação 2: > 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. ### Situação 3: > 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. Enfim, são **infinitas** as possibilidades de métricas que você pode criar e analisar e os ganhos são imensos! ## A estrutura dos eventos O 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**: ### Event Category Esse é 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. ### Event Action Como 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. ### Event Label Aqui é 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. ### Event Value Esse é 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. ### Non Interaction Esse é 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. ## Implementando o Google Analytics A 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: ![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) Esse código de acompanhamento é bem famoso, e fica parecido com o abaixo: ```html ``` O mais importante desse script é o seu **tracking code**, que ali está representado por `XX-XXXXXXXX-X`. No 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: ```js // gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-plugin-google-analytics`, options: { // replace "XX-XXXXXXXX-X" with your own Tracking ID trackingId: "XX-XXXXXXXX-X", }, }, ], } ``` ## Implementando os eventos Como eu já disse tudo sobre a estrutura ali acima, então fica muito fácil de implementar! A sintaxe é a seguinte: ```js ga('send', { hitType: 'event', eventCategory: [Category], eventAction: [Action], eventLabel: [Label], eventValue: [Value], nonInteractive: [True | False] }); ``` Como a ordem dos parâmetros é sempre a mesma, você pode simplificar mais e colocar só: ```js ga('send', 'event', 'Category', 'Action', 'Label', 'Value'); ``` Okay, o código é esse, mas como e onde você coloca? Vamos a alguns exemplos: Em eventos de `click`, onde são geralmente botões, você pode fazer até inline como: ```html Ir para Foo ``` Se for algum evento de view, você pode colocar também diretamente na página, com um script inline: ```html ``` E 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: ```js document.addEventListener('scroll', () => { if typeof window.ga !== undefined { // sua implementação aqui e mais o evento ga('send', 'event', 'Category', 'Scroll', 'Label', 'Value'); } }) ``` ## Como eu faço no Gatsby/React? Existe 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: ```jsx const courseClickTrack = title => { ReactGA.event({ category: 'cursos', action: 'click', label: `Link Curso - ${title}` }) } const Course = ({ title, description, link, image }) => { return ( courseClickTrack(title)}> {title} {title} {description} ) } ``` Repare que no `onClick` do React eu ainda passo o `title` para que assim a minha `label` tenha diferentes valores para cada curso. E 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/). ## Conclusão, Agradecimento e chamada para Open Source É 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. E 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. Outras pessoas avisaram coisas via Twitter também e até fizeram sugestões, fica aqui meu obrigado a todos vocês! <3 E 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). ================================================ FILE: posts/como-usar-o-reactjs.md ================================================ --- layout: post date: 2015-07-14T15:16:16.000Z title: "#2 - Como usar o ReactJS" description: As diferentes formas de se usar e se iniciar um projeto com ReactJS. main-class: js tags: - react - js - tutorial categories: - Aprendendo ReactJS --- ## Introdução A 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 =) Como 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/). ## Iniciando No [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? Nesse 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ã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. Se 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. ### Arquivos Para 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. Você também pode utilizar a CDN deles, [aqui tem os links](https://reactjs.org/docs/cdn-links.html) ```html ``` ### Básico sem JSX Essa 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: ```html ``` E logo após a chamada da biblioteca, coloque o seu script, seja ele inline ou chamando de um outro arquivo. ```js var ExampleApplication = createReactClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'O React está rodando com sucesso há ' + seconds + ' seconds.'; return ReactDOMFactories.p(null, message); } }); var ExampleApplicationFactory = React.createFactory(ExampleApplication); var start = new Date().getTime(); setInterval(function() { ReactDOM.render( ExampleApplicationFactory({elapsed: new Date().getTime() - start}), document.getElementById('container') ); }, 50); ``` **update: (02/06/2016)** - na linha `16` atualizamos para utilizar o `ReactDOM.render()`, pois ele agora é separado do React original. **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 ```html ``` Utilizando 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á. Como 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. Na 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. Essa 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. ### Utilizando JSX O 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). Para usar essa sintaxe diretamente no Browser, precisamos do Babel e do React chamados no nosso html: ```html ``` Podemos ter o JSX de duas formas: inline, utilizando a tag ` Para adicionar um SVG como imagem, basta colocá-lo dentro da `src` da tag `img`. ```html Logo ``` A utilização desta forma impede o acesso dos elementos separados do SVG, porém a imagem não irá perder qualidade caso seja redimensionada. ### 2 - Como Background-image

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

Para 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. ```css .element { background-image: url(/image/image.svg); } ``` Quando 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. ### 3 - Inline SVG

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

O 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. ### 4 - Via Iframe/Object/embed Sã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: ```html ``` ### 5 - Via Data URIs Uma 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`. ```html .base64 { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i etc); } ``` A 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/). ## Conclusão Bom 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. ================================================ FILE: posts/configurando-2-contas-de-git-no-mesmo-computador.md ================================================ --- layout: post date: 2021-09-14T13:31:30.000Z title: Configurando 2 contas de Git no mesmo computador description: Aprenda como configurar uma conta pessoal e uma conta da empresa no Git, incluindo chaves SSH e emails. main-class: dev tags: - git - dev --- ## Introdução Fala 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. É 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. Enquanto 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 ## Por que configurar o Git e como fazer? Antes 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: ```bash commit 82a24142b6df8049787760c82d29728f8fb0eee5 (HEAD -> master, origin/master, origin/HEAD) Author: Willian Justen de Vasconcellos Date: Sun Sep 5 23:31:04 2021 -0300 Remove dangerously to use Script ``` Se 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. Para configurar uma conta única e global é super simples, basta digitar: ```bash git config user.name --global "Willian Justen de Vasconcellos" git config user.email --global "willianjustenqui@gmail.com" ``` Mas e se precisar mudar para o email da empresa no projeto X? A forma não automatizada é **dentro do projeto** definir manualmente: ```bash git config user.name "Willian Justen de Vasconcellos" git config user.email "will.justen@zapt.com.br" ``` E aí talvez você pergunte: > Mas e se tiverem vários projetos da empresa, preciso fazer isso em cada projeto? A 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 ## Configurando diferentes emails Quando 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. E é 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: ```bash ~/Development /github # meus projetos pessoais /zapt # projetos da zapt ``` Como é um padrão bem simples, fica fácil de falar para o Git o seguinte: - Se estiver na pasta `github` use meu email pessoal - Se estiver na pasta `zapt` use o email da empresa E aí para definir isso, eu crio 2 arquivos: - `.gitconfig-github` - `.gitconfig-zapt` E os conteúdos ficam: ```yaml # .gitconfig-github [user] email = willianjustenqui@gmail.com ``` E no outro: ```yaml # .gitconfig-zapt [user] email = will.justen@zapt.com.br ``` Lembrando 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. Mas 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: ```yaml [user] name = Willian Justen de Vasconcellos [init] defaultBranch = main [includeIf "gitdir:~/Development/github/"] path = .gitconfig-github [includeIf "gitdir:~/Development/zapt/"] path = .gitconfig-zapt ``` Note 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: ```bash commit e07164f972a15bbf7c681970a5cf547db966867d (origin/fix/update-map-use-lat-long, fix/update-map-use-lat-long) Author: Willian Justen de Vasconcellos Date: Thu Aug 26 12:16:44 2021 -0300 Fix Map position to use flat lat and long ``` Como podem ver, o email já fica certinho o da empresa e não o meu pessoal. ## Configurando duas chaves SSH Agora 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. Primeiro de tudo, você precisa criar chaves SSH separadas, até para facilitar nessa separação, para isso, é só rodar: ```bash ssh-keygen -t rsa -C "email@pessoal.com" -f "id_rsa_pessoal" ssh-keygen -t rsa -C "email@trabalho.com" -f "id_rsa_trabalho" ``` Ao fazer isso, ele vai criar duas chaves separadas na pasta `~/.ssh`, depois basta adicionar na sua máquina usando: ```bash ssh-add ~/.ssh/id_rsa_pessoal ssh-add ~/.ssh/id_rsa_trabalho ``` Depois 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`: ```bash cd ~/.ssh touch config code config # você pode usar vi, vim, nano, enfim, editor favorito ``` Lá dentro do arquivo é só editar: ```yaml # Conta pessoal como default Host github.com HostName github.com User git IdentityFile ~/.ssh/id_rsa_pessoal # Conta do trabalho Host github.com-trabalho HostName github.com User git IdentityFile ~/.ssh/id_rsa_trabalho ``` Ali 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. E 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: ```bash git clone git@github.com-trabalho:seu_user/repo_name.git ``` Prontinho, 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! ## Conclusão Espero 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). ================================================ FILE: posts/configurando-o-macbook-m1-para-desenvolvimento-web.md ================================================ --- layout: post date: 2021-09-13T12:46:46.000Z title: Configurando o Macbook M1 para Desenvolvimento Web description: Alguns passos dicas de como configurar o seu Macbook M1 para desenvolver na web. main-class: dev tags: - macbook - m1 --- ## Introdução Fala 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. Enquanto 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. ### O que roda no M1? Como 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. ### Xcode - command line tools Por 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: ```bash xcode-select --install ``` ### Rosetta 2 Com 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: ```bash /usr/sbin/softwareupdate --install-rosetta --agree-to-license ``` ### Homebrew Outra 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. Para instalar, só rodar no terminal: ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` ### iTerm2 Depois 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. A 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. Como já temos o brew instalado, basta rodar: ```bash brew install --cask iterm2 ``` #### Configurando o iTerm2 com Rosetta 2 Apó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`. ![Imagem do finder do Mac com varias aplicacoes, incluindo o iTerm](/assets/img/iterm-finder.png) Ao duplicar, mude o nome da aplicação para algo como `iTerm-Rosetta` ou qualquer outra coisa que te facilite a identificar qual é qual. Depois disso, clique com o botão direito no app novo e escolha a opção `get info` para abrir a seguinte tela: ![Tela com informacoes do iTerm e uma opcao de abrir usando o Rosetta marcado](/assets/img/iterm-rosetta.png) Note 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. E 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. ### Zsh / Oh my Zsh Continuando 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. Para instalar, é só rodar: ```bash sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ``` Depois disso, eu costumo configurar alguns plugins, novamente, isso não é obrigatório, mas se quiser usar minhas indicações =) #### Syntax highlighting Esse plugin serve para o terminal identificar os comandos e colorir facilitando a leitura de tudo. Para isso, rode primeiro: ```bash # Aqui é a pasta onde devem estar seus plugins cd $HOME/.oh-my-zsh/plugins # clone o repositório git clone https://github.com/zsh-users/zsh-syntax-highlighting.git # adicione o plugin no seu arquivo de configuração echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc ``` Para 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: ```bash plugins=( zsh-syntax-highlighting ) ``` #### Autosuggestions Esse 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: ```bash git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions ``` E depois, assim como no plugin acima, precisa editar o arquivo `.zshrc`: ```bash plugins=( zsh-autosuggestions ) ``` ### NVM Para 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: ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash ``` Depois de instalado, vamos adicionar as seguintes linhas ao **final** do `.zshrc`: ```bash export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm ``` ### VsCode Com tudo instalado, falta só nosso querido editor né? Eu utilizo o VsCode, para instalar via Homebrew é só rodar: ```bash brew install --cask visual-studio-code ``` E 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/). ### Conclusão Bom, 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). ================================================ FILE: posts/configurando-o-webpack-para-rodar-react-e-es6.md ================================================ --- layout: post date: 2016-06-19T06:00:46.000Z title: Configurando o Webpack para rodar React e ES6 description: Aprenda como utilizar esse module bundler para facilitar sua vida nos projetos com ES6 e React. main-class: js tags: - react - es6 - tutorial categories: - Aprendendo ReactJS --- ## Introdução O 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. Enquanto 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! Se você quiser pular tudo e ver o código final, só [abrir aqui](https://github.com/willianjusten/webpack-example). ## O que é webpack? Bom, 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. Existem outros do gênero como o [Browserify](http://browserify.org/), que trabalha com a estrutura de CommonJS para requerer novos módulos, por exemplo. Os 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á. ## Instalando o webpack Sua máquina obviamente precisa ter o [Node.js](https://nodejs.org/en/) instalado e funcionando. Quanto mais atualizado, melhor também hein =) ### Instalando o webpack globalmente Para instalar globalmente, basta ir no terminal e digitar: ```bash sudo npm install webpack -g ``` Lembrando que a necessidade do sudo pode variar de sistema para sistema. ### Iniciando o webpack em um projeto É 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: ```bash npm init ``` E então instale o webpack salvando o mesmo no `package.json` criado. ```bash npm install webpack --save-dev ``` ### Dev Tools Se você quiser usar coisas como `hot reload`, levantar um servidor automaticamente, mapsource e outras coisinhas, você precisa instalar esse também. ```bash npm install webpack-dev-server --save-dev ``` ## Começando a trabalhar Você 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: ```js module.exports = { entry: './app/App.js', output: { path: __dirname + '/public', filename: 'bundle.js' } } ``` Encapsulamos 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. Agora crie seu arquivo `App.js` na pasta `app` e escreva dentro dele: ```js console.log('webpack está funcionando'); ``` Crie seu `index.html` na pasta `public` e coloque a seguinte linha: ```html ``` Agora 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 =) ## Criando um servidor com Hot Reload Como 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: ```js devServer: { inline: true, contentBase: './public', port: 3333 } ``` Utilizamos 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ê. ## Brincando com ES6 O 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. Precisamos primeiro instalar todas as coisinhas necessárias: ```bash npm install --save-dev babel-core babel-loader babel-preset-es2015 ``` O `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). Com tudo instalado, precisamos colocar mais algumas linhas no nosso `webpack.config.js`, para avisar dessa compilação. ```js module: { rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }] } ``` Na 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. Feito isso, para testar, vamos lá no nosso arquivo `App.js` e escrever: ```js const hey = 'Heyyy'; console.log(`${hey} webpack funcionando!`); ``` Se 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. ## Colocando o React Como 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 =) Para isso é bem fácil, primeiro vamos instalar as coisinhas do nosso React queridão: ```bash npm install react react-dom --save ``` Depois precisamos também instalar o preset do react, para o nosso Babel conseguir compilar o JSX. ```bash npm install babel-preset-react --save-dev ``` Feito isso, é só adicionar esse novo preset na configuração do `webpack.config.js`. ```js query: { presets: ['es2015', 'react'] } ``` ## Vendo o React em ação Agora 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`. ```html
``` Depois, dentro da pasta `app`, vamos criar uma nova pasta chamada `components` e nela criar um arquivo `Home.js`, com o seguinte conteúdo: ```js import React from 'react'; const Home = () =>

Hello World!

export default Home; ``` Só estou importando o React e criando uma stateless function de um componente chamado Home e exportando ele. Depois disso, vamos ao nosso arquivo `App.js`, apagar o que tinha lá e escrever: ```js import React from 'react'; import ReactDOM from 'react-dom'; import Home from './components/Home'; ReactDOM.render(, document.getElementById('app')); ``` Importo 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 Se quiser dar uma olhada no código final do que fizemos, só [abrir aqui](https://github.com/willianjusten/webpack-example). ## Conclusão Bom 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 ================================================ FILE: posts/convertendo-um-class-based-component-para-react-hooks.md ================================================ --- layout: post date: 2019-03-10T10:29:00.000Z title: Convertendo um Class Based Component para React Hooks description: Como converter um class based component para o novo React Hooks. main-class: js tags: - react - hooks - youtube - testes --- ## Introdução Fala 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. O componente escolhido para converter foi o [React-Snakke](https://github.com/diogomoretti/react-snakke/) feito pelo [Diogo Moretti](https://twitter.com/diogomoretti_). Você pode ver o código todo nesse link do [CodeSandbox](https://codesandbox.io/s/jjyyn9n1vv) e abaixo deixarei o vídeo também. ## Vídeo ## Sobre o código e o refactor Bom, 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). ### Transformar de Classe para Função Bom, a primeira etapa, é transformar o componente que usava classe, para função. Já que os hooks **não funcionam** dentro de classes. ```js // antes export default class Snakke extends Component { ... } // depois export default function Snakke(props) { ... } ``` ### Remover o this e usar as variáveis diretamente Feito 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`. ```js // antes styles = { ... height: this.props.height, opacity: this.props.opacity, zIndex: this.props.zIndex, ... } // depois const styles = { ... height: props.height, opacity: props.opacity, zIndex: props.zIndex, ... } ``` ### Substituir state pelo useState Depois dessas duas mudanças, nós começamos a procurar locais onde tenham definições e mudanças de `state`. E 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` ```js state = { progress: 0 } this.setState({ progress: total }) ``` Dentro 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: ```js import React, { useState } from 'react' const [progress, setProgress] = useState(0) ``` Nó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`. O último detalhe sobre o `useState` é que ele recebe um parâmetro, que é o estado inicial da variável, no nosso caso, é o valor `0`. ### Substituir métodos lifecycle por useEffect Dentro 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. Nos hooks, nós podemos substituir essa parte pelo `useEffect`, ficando dessa forma: ```js // antes componentDidMount() { window.addEventListener('scroll', this.setProgress) } componentWillUnmount() { window.removeEventListener('scroll', this.setProgress) } // depois useEffect(() => { window.addEventListener('scroll', handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } }, []) ``` Como 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. Um ú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. ### Substituir setState para o método criado no useState Vimos 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. ```js // antes ... this.setState({ progress: total, }) // depois ... setProgress((window.scrollY / bodyHeight) * 100) ``` Apó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. Viu só? Não é tão difícil fazer essa conversão não é mesmo? =D ### Antes/depois Vamos fazer uma comparação (antes e depois) dos componentes. Abaixo segue o componente utilizando classe (antes das nossas alterações): ```jsx import React, { Component } from 'react' export default class Snakke extends Component { constructor(props) { super(props) this.setProgress = this.setProgress.bind(this) this.getPercentageScroll = this.getPercentageScroll.bind(this) } state = { progress: 0 } styles = { position: 'fixed', top: '0', left: '0', width: '100%', height: this.props.height, opacity: this.props.opacity, zIndex: this.props.zIndex, filter: this.props.shadow ? `drop-shadow(0 0 .1em ${this.props.color})` : 'none', background: `linear-gradient(to right, ${this.props.color} var(--scroll), transparent 0)` } getPercentageScroll (scrollPos) { const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight return (scrollPos / bodyHeight) * 100 } setProgress () { let total = this.getPercentageScroll(window.scrollY) this.setState({ progress: total }) } componentDidMount () { window.addEventListener('scroll', this.setProgress) } componentWillUnmount () { window.removeEventListener('scroll', this.setProgress) } render () { return (
) } } Snakke.defaultProps = { color: '#000', height: '5px', opacity: '1', zIndex: '9999', shadow: false } ``` Veja abaixo o componente, já com as nossas alterações, utilizando hooks: ```jsx import React, { useState, useEffect } from 'react' export default function Snakke(props) { const styles = { position: 'fixed', top: '0', left: '0', width: '100%', height: props.height, opacity: props.opacity, zIndex: props.zIndex, filter: props.shadow ? `drop-shadow(0 0 .1em ${props.color})` : 'none', background: `linear-gradient(to right, ${props.color} var(--scroll), transparent 0)`, } const [progress, setProgress] = useState(0) function handleScroll() { const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight setProgress((window.scrollY / bodyHeight) * 100) } useEffect(() => { window.addEventListener('scroll', handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } }, []) return
} Snakke.defaultProps = { color: '#000', height: '5px', opacity: '1', zIndex: '9999', shadow: false, } ``` ## Conclusão A 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. Lembrando 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. Se você ficou com alguma dúvida, só falar nos comentários ou me mandar mensagem, que eu ajudo =) ================================================ FILE: posts/criando-animacao-ondas-css-svg.md ================================================ --- layout: post date: 2020-04-30T21:38:15.000Z title: Criando uma animação de ondas com CSS e SVG description: Aprenda a animar ondas feitas em SVG somente com CSS puro e cria um hero muito mais criativo e bonito. main-class: css tags: - css - videos - dicas categories: - Dicas de CSS --- ## Introdução Fala 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. Para 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). ## Vídeo ## Conclusão Novamente 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! ================================================ FILE: posts/criando-apresentacoes-e-hospedando-no-github.md ================================================ --- layout: post date: 2015-10-04T21:36:35.000Z title: Criando apresentações e hospedando no github description: Aprenda a criar slides para suas apresentações e hospedá-las online no github pages. main-class: dev tags: - js - github categories: null --- ## Introdução Caramba, 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é? =/ Bom, 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. O post de hoje será bem simples, mas que me salvou bastante nesse mês, que como eu disse, precisei fazer várias apresentações. ### Por que não usar o Keynote, PowerPoint ou outro similar? Bom, 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... Sempre 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. Eu 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!) ## Coisas legais que o RevealJS tem! Muitos 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: - Slides agrupados, tendo uma navegação vertical no mesmo assunto - Suporte a Markdown (quem me conhece sabe que amo escrever assim) - Permissão de exportar em PDF - Notas do Editor em tela separada + countdown para saber o tempo que já passou - Sintaxe colorida para código <3 - Vários e vários plugins! ## Sobre o RevealJS A 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. ### Markup O Markup inicial precisa seguir um padrão, que é: ```html
Slide Horizontal Simples
Slide Veritical 1
Slide Veritical 2
``` Para 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. ### Slide backgrounds O 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: ```html
``` ### Slide transitions Podemos fazer diferentes transições entre os slides e para isso, usamos a propriedade `data-transition` dentro da nossa `section`, que é o nosso slide. ```html
``` Podemos usar também as transições de entrada e saída de cada slide: ```html
``` ### Transições dentro do slide Digamos 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. ```html

grow

shrink

fade-out

visible only once

blue only once

highlight-red

highlight-green

highlight-blue

``` ### Configurações O 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. ## Passos para criar uma apresentação do zero! #### 1 - Baixe os arquivos no github Só 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. #### 2 - Monte um html básico ```html !doctype html> ``` #### 3 - Adicione o css e o tema no head ```html Reveal.js Slide Demo ``` Existem diferentes temas, basta escolher dentro da pasta de "themes". #### 4 - Crie o Markup básico Como dito um pouco mais acima, precisamos ter um markup com as classes `reveal` e `slides` para tudo passar a funcionar direitinho. ```html
Slide Horizontal Simples
Slide Veritical 1
Slide Veritical 2
``` #### 5 - Carregue o Javascript no fim do html ```html ``` #### 6 - Inicialize o RevealJS e configure Não adianta só colocar o `js` no final do arquivo, precisamos inicializar para que a mágica aconteça! ```js // Veja todas as configurações em: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, // mostra as setinhas na parte inferior progress: true, // mostra uma barra de progresso center: true, // centraliza os slides transition: 'slide' // none/fade/slide/convex/concave/zoom }); ``` #### 8 - Hospedando no Github Como 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/). --- ### Pow, legal, mas não tem nada mais prático não? ![Qualy Presenter](https://raw.githubusercontent.com/Qualy-org/qualy-presenter/master/src/img/qualy-presenter.png) Eu 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. Eu 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/). ### Como funciona o Boilerplate? #### 1 - Estrutura Todos 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. A 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. E 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. Cada 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 =) Os 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: ```pug doctype html html include inc/head body .reveal .slides include ../slides/slide-1.html include ../slides/slide-2.html include inc/scripts ``` Quando o arquivo for compilado, ele irá ler normalmente e juntar tudo para você em um só arquivo. #### 2 - Baixando o Boilerplate e instalando Basta ir em [Qualy Presenter](https://github.com/Qualy-org/qualy-presenter/), clonar ou baixar os arquivos na sua máquina. Depois basta criar um repositório no seu github com os arquivos iniciais. Segue os passos básicos: Vá em `Create new repository` na parte superior do github e preencha os dados corretamente: ![Imagem de criação de um novo repositório no Github](/assets/img/reveal/github-repo.png) ```bash // inicializando um repositório git no seu local git init // adicionando todos os arquivos git add . // commitando tudo git commit -m "initial commit" // adicionando o repositório remoto do github git remote add origin git@github.com:seu-usuario/seus-slides-lindos.git // fazendo o primeiro deploy na mão para ligar os repositórios git push -u origin master ``` #### 3 - Rodando, compilando e fazendo deploy Como 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: ```bash npm install ``` Depois 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`. Depois de tudo feito e compilado, só precisamos fazer o deploy para o github, para isso temos o seguinte comando: - `npm run deploy`: faz deploy dos arquivos de `build` para o branch `gh-pages`. ## Conclusão Bom, é 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 ================================================ FILE: posts/criando-botao-animado-com-css-e-svg.md ================================================ --- layout: post date: 2017-08-14T21:14:48.000Z title: Criando botao animado com CSS e SVG description: Aprenda a criar uma interação mais bonita para os botões de sua aplicação. main-class: css tags: - css - svg - frontend categories: null --- ## Introdução Faaala 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. Neste 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`. Enquanto 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 =) ## Criando o botão Para quem gosta de ver o exemplo já funcionando antes, já vou deixando aqui embaixo a demo do Codepen.

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

A 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. Vamos as etapas: ### Antes do Envio O primeiro de tudo é criar nosso botão limpo, ou seja, o estado `antes do envio`. Que vai ter o seguinte html e css: ```html ``` Já estou adicionando o `id` pois ele será utilizado futuramente em nosso Javascript. E a classe será para adicionarmos os estilos, que serão: ```css .send { background: none; color: white; border: 1px solid #45981b; border-radius: 70px; cursor: pointer; font-size: 20px; outline: none; padding: 15px 70px; } ``` Com 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: ```css * { margin: 0; padding: 0; } body { align-items: center; background: #333; display: flex; height: 100vh; justify-content: center; } ``` ### Estado de Loading Para 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. ```html ``` Acima é o nosso html e assim vai ficar o nosso css, utilizando uma classe `.is-loading` para indicar que está carregando/enviando o dado. ```css .send { // outras propriedades transition: padding 500ms ease-in-out; } .send.is-loading { padding: 15px 17px; } .is-loading span { display: none; } ``` ### Adicionando a trigger Como 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. Para 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: ```js const btn = document.getElementById('send') btn.addEventListener('click', () => { btn.classList.add('is-loading') }) ``` Feito isso, já podemos clicar no botão e veremos a animação simples de diminuir. Agora vamos fazer o pulse! ### Criando o efeito de Pulse Para 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á: ```css .send { // outras propriedades box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5); } .send.is-loading { // outras propriedades animation: pulse 1.5s infinite; } // nossa animacao @keyframes pulse { 0% { transform: scale(0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 50px rgba(69, 152, 27, 0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(69, 152, 27, 0); } } ``` Eu 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. ### Criando trigger para o Success Como 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: ```js const btn = document.getElementById('send') btn.addEventListener('click', () => { btn.classList.add('is-loading') // fake API call setTimeout(() => { btn.classList.add('is-success') btn.classList.remove('is-loading') }, 4000) }) ``` Reparem 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. ### Criando o estado de Success Para 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: ```css .send { // outras propriedades transition: background, padding 500ms ease-in-out; } .send.is-success { background: #45981b; padding: 15px 17px; } .is-success span { display: none; } ``` Depois 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. ```html ``` E vamos fazer também uma edição no CSS para ele sumir/aparecer com o `is-sucess`. ```css svg { width: 0; height: 0; } .is-success svg { height: 30px; width: 30px; } ``` Agora 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á: ```css .check { stroke-dasharray: 130px 130px; stroke-dashoffset: 130px; transition: stroke-dashoffset 500ms ease-in-out; } .is-success .check { stroke-dashoffset: 0px; } ``` Reparem 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:

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

## Conclusão Bom 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 =) ================================================ FILE: posts/criando-componente-de-tipografia-com-styled-components.md ================================================ --- layout: post date: 2021-03-06T13:50:06.000Z title: Criando componente de Tipografia com styled-components description: Utilizando o poder do polymorphic no styled-components main-class: js tags: - dicas categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando o poder do `as` polymorphic Dentro 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. Isso é 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. No 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. ## Exemplo de código Ao trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria: ```javascript const theme = { colors: { white: '#eee', black: '#111', gray: '#333', lightGray: 'CCC' }, sizes: { xsmall: '1rem', small: '1.2rem', medium: '1.6rem', large: '2.4rem', xlarge: '3.2rem', xxlarge: '4.0rem' } } ``` Se você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo: ```typescript export type HeadingProps = { color?: keyof typeof theme.colors size?: keyof typeof theme.sizes fontWeight?: 100 | 400 | 700 level?: 1 | 2 | 3 | 4 | 5 | 6 } ``` E aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados: ```typescript export const Heading = styled('h1').attrs(({ level }) => ({ as: `h${level}` }))` ${({ color = 'white', size: 'medium', fontWeight: 700 }) => css` font-size: ${theme.sizes[size]}; color: ${theme.colors[color]}; font-weight: ${fontWeight}; `} ` ``` Note 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. Com o componente pronto, você pode usar da seguinte maneira: ```javascript Esse é o h1 padrão branco, size medium e negrito Esse é um h2 bem grande e cinza ``` Como 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. ## Conclusão E 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. ================================================ FILE: posts/criando-componentes-react-com-testes-lyef-flag.md ================================================ --- layout: post date: 2017-08-22T20:36:07.000Z title: Criando Componentes React com Testes - Lyef-flag description: Como escrever um componente React com Mocha, Chai, Enzyme e Storybook. main-class: js tags: - react - js categories: - Aprendendo ReactJS --- ## Introdução Faaaala 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. Enquanto 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. Bom, 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. ## Sobre o Componente que iremos criar Como 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. ![Exemplo das bandeirinhas](/assets/img/lyef-flags/flags.png) ### Sobre o flow de desenvolvimento com a Lyef Para 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. Primeiro 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). Depois de clonado/gerado, lembre-se de instalar as dependências todas rodando o comando `npm i`. Feito isso, já podemos prosseguir então. Todo 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. Depois 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/). E 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 **Um aviso importante:** o desenvolvimento assim pode parecer lento de início, mas não é e traz uma segurança muito maior no desenvolvimento. ## Escrevendo as Stories Como dito acima, as `stories` são pequenos textos que definem o funcionamento da aplicação. Escrevendo só um rascunho do nosso componente seria: - Renderizar bandeira passado a sigla mesmo sem passar `size` - Renderizar com tamanho `small` - Renderizar com tamanho `normal` - Renderizar com tamanho `big` - Renderizar com tamanho `ultra` - Renderizar mais de uma bandeira ao mesmo tempo - Renderizar a mesma bandeira em tamanhos diferentes ao mesmo tempo Nosso componente poderia ser escrito da seguinte forma então: ```html ``` Ele 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: ```js import React from 'react'; import Flag from '../src/Main'; // Nosso Componente import { storiesOf } from '@storybook/react'; storiesOf('Flag', module) .add('small brazil flag without size defined', () => ( )) .add('small canada flag', () => ( )) .add('normal brazil flag', () => ( )) .add('big brazil flag', () => ( )) .add('ultra brazil flag', () => ( )) .add('more than one small flag', () => (
)) .add('more than one sized flag', () => (
)); ``` Como 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. Tendo isso pronto, podemos rodar o Storybook com o comando `npm start` e você irá receber a seguinte tela: ![Tela com as Stories](/assets/img/lyef-flags/stories.png) Como 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. ## Escrevendo Testes ### Primeira Etapa Como 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. Entã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: ```js // tests/specs/Main.spec.js import React from 'react'; import { expect } from 'chai'; import { shallow } from 'enzyme'; import Flag from '../../src/Main'; describe('', () => { it('should have props for country and size', () => { const wrapper = shallow(); expect(wrapper.props().name).to.be.defined; expect(wrapper.props().small).to.be.defined; }); }); ``` Precisamos 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: ```js // src/Main.js import React from 'react'; import PropTypes from 'prop-types'; const Flag = ({ country, size }) => (

); Flag.propTypes = { country: PropTypes.string.isRequired, size: PropTypes.string, }; export default Flag; ``` Reparem 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. ### Segunda Etapa Beleza, 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: ```js // tests/specs/Main.spec.js ... it('should render an image element', () => { const wrapper = shallow(); expect(wrapper.find('img')).to.have.length(1); }); ... ``` Ao 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: ```js // src/Main.js const Flag = ({ country, size }) => ( ); ``` E prontinho, mais um teste passando! Só que ainda longe do que queremos. ### Terceira Etapa Agora já renderiza uma `img`, mas cadê a bandeirinha? A `src` sequer tá preenchida! Vamos mudar isso né, então vamos a mais um teste: ```js // tests/specs/Main.spec.js it('should get have br on img src when country br is passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('br')).to.equal(true); }); ``` Nesse 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: > Os testes precisam ser resolvidos do jeito mais fácil e "burro" possível, depois existem etapas de refatoração. Nós podemos alterar o nosso componente para o seguinte código: ```js // src/Main.js const Flag = ({ country, size }) => ( br ); ``` E prontinho! Nosso teste está passando! ### Quarta Etapa Já 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: ```js // tests/specs/Main.spec.js it('should get have ca on img src when country ca is passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('ca')).to.equal(true); }); ``` Claro 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: ```js // src/Main.js const Flag = ({ country, size }) => ( {country} ); ``` Agora falta só fazer a parte do tamanho, lembrando que se eu não passar nenhum valor, eu preciso que o tamanho seja `small`. ### Quinta Etapa Agora 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: ```js // tests/specs/Main.spec.js it('should get have normal on img src when size normal is passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('normal')).to.equal(true); }); ``` Aqui 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: ```js // src/Main.js const Flag = ({ country, size }) => ( {country} ); ``` E com isso, o teste passou normalmente. ### Sexta Etapa Mas 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: ```js // tests/specs/Main.spec.js it('should get have small on img src even when size is not passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('small')).to.equal(true); }); ``` Com 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. ```js // src/Main.js const Flag = ({ country, size = 'small' }) => ( {country} ); ``` E prontinho, nosso teste passou! ### Sétima Etapa Agora só precisamos garantir que nosso código vai funcionar com os tamanhos `big` e `ultra` também. E para isso vamos adicionar os testes: ```js // tests/specs/Main.spec.js it('should get have big on img src when size big is passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('big')).to.equal(true); }); it('should get have ultra on img src when size ultra is passed', () => { const wrapper = shallow(); expect(wrapper.find('img').props().src.includes('ultra')).to.equal(true); }); ``` E 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 ![Storybook Rodando](/assets/img/lyef-flags/storybook.gif) ## Conclusão Bom 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. Lembrando 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 =) ================================================ FILE: posts/criando-componentes-usando-so-es6.md ================================================ --- layout: post date: 2017-07-07T13:09:11.000Z title: Criando componentes usando só ES6 description: Muita gente usa React, outros usam Vue e outros Angular. Por que não só ES6? main-class: js tags: - js - es6 --- ## Introdução Faaaaala 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? Nesse 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). E 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! ## Trabalhando com Strings no passado As `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: ```js const text = 'Minha primeira linha\n' + 'Minha segunda linha\n' + 'Minha terceira linha.'; console.log(text); // > Minha primeira linha // Minha segunda linha // Minha terceira linha ``` Repare 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. Outro 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: ```js const name = 'Willian'; console.log('Hello ' + name + '!'); // > Hello Willian! ``` Precisá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. ## Trabalhando com Strings no ES6 Com 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. Para trabalhar com múltiplas linhas ficaria assim: ```js const text = `Minha primeira linha Minha segunda linha Minha terceira linha.`; console.log(text); // > Minha primeira linha // Minha segunda linha // Minha terceira linha ``` E para trabalhar com interpolação, podemos utilizar a sintaxe `${variavel}` dentro da string, desse forma: ```js const name = 'Willian'; console.log(`Hello ${name}!`); // > Hello Willian! ``` Outra coisa legal é que podemos adicionar funções dentro dessas strings para rodar, um exemplo: ```js function sum(a, b) { return a + b; } console.log(`2 + 2 = ${sum(2, 2)}`); // > 2 + 2 = 4 ``` Isso abre diversas possibilidades e facilita demais na escrita e leitura do nosso código. ## Criando templates Aí 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 Se você quiser já ver o que vamos criar direto, só acessar esse [link do codepen](https://codepen.io/willianjusten/pen/ZyMMbd). ### Criando método para montar o markup O primeiro componente que iremos criar será o componente onde mostra as informações do album, conforme a imagem abaixo: ![Imagem mostrando capa do album, o nome do mesmo e a quantidade de músicas](/assets/img/componentes-es6/album-info.png) Para isso teríamos um Markup da seguinte forma: ```html Ten

Ten

Pearl Jam

11 Músicas

``` E transformando isso para o nosso lindo ES6, ficaria assim então: ```js function createMarkupAlbum(data) { return (` ${data.name}

${data.name}

${data.artists}

${data.tracks.length} Músicas

`); } ``` Onde o `data` é a informação que pode vir de uma `API`, `json` ou até mesmo uma `variável`, como utilizada no exemplo. ### Criando método para renderizar o markup Depois 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 ```js function renderAlbumInfo(data, element) { const markup = createMarkupAlbum(data); element.innerHTML = markup; }; ``` Repare 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. ### Chamando o método e pintando na tela Com 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. ```js const album = document.getElementById('album'); renderAlbumInfo(data, album); ``` ### Criando markups mais complexos e utilizando funções Com o código feito acima, já temos as informações do album, mas ainda faltam as músicas ao lado. Conforme a imagem abaixo: ![Lista de músicas do album](/assets/img/componentes-es6/album-list.png) Se 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. Nosso conjunto de dados para as `tracks` é um array da seguinte forma: ```js "tracks" : [ { "duration_ms" : 231367, "spotify" : "https://open.spotify.com/track/4nRyBgsqXEP2oPfzaMeZr7", "name" : "Once", "track_number" : 1 }, { "duration_ms" : 292580, "spotify" : "https://open.spotify.com/track/6QewNVIDKdSl8Y3ycuHIei", "name" : "Even Flow", "track_number" : 2 }... ] ``` Para 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: ```js function createMarkupTracks(tracks) { return tracks.map(track => `

${track.track_number}

${track.name}

${convertToHumanTime(track.duration_ms)}

`).join(''); } ``` Repare 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: ```js function convertToHumanTime(duration) { let s = parseInt((duration / 1000) % 60, 10); const m = parseInt((duration / (1000 * 60)) % 60, 10); s = (s < 10) ? `0${s}` : s; return `${m}:${s}`; } ``` Depois disso é só criar a função para apendar esse markup igual feito anteriormente: ```js function renderAlbumTracks(data, element) { const markup = createMarkupTracks(data); element.innerHTML = markup; } const list = document.getElementById('list'); renderAlbumTracks(data.tracks, list); ``` E é isso gente! Nosso componente está prontinho e renderizado na tela! =D Para ver o código completo, só ir lá no [link do codepen](https://codepen.io/willianjusten/pen/ZyMMbd). ### Separando em diferentes arquivos e usando import/export Só 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: ```js function createMarkup(data) { return (` ${data.name}

${data.name}

${data.artists[0].name}

${data.tracks.total} Músicas

`); } export default function renderAlbumInfo(data, element) { const markup = createMarkup(data); element.innerHTML = markup; return data; }; ``` Repare 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. E aí no meu arquivo `main` eu teria algo como: ```js import renderAlbumInfo from './AlbumInfo'; const albumInfo = document.getElementById('album-info'); spotify.album.getAlbum(albumId) .then(data => renderAlbumInfo(data, albumInfo)) ``` Onde o meu `data` está sendo extraído da própria API do Spotify e alimentando o meu método `renderAlbumInfo`. ## Conclusão É 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 ================================================ FILE: posts/criando-e-exportando-svg-para-web.md ================================================ --- layout: post date: 2016-02-06T15:29:04.000Z title: "#16 - Criando e Exportando SVG para Web" description: Aprenda como otimizar seu SVG para ter a melhor entrega para web. Se você é designer ajude seu amigo dev. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Introdução Fala 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 Eu 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. ## Importância da otimização Assim 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. As 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. Bom, vamos parar de blabla e partir direto para o que realmente importa. ## 1 - Crie formas simples usando os elementos de forma Simples, não `` É 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ós temos: ``, ``, ``, ``, `` e ``. Esses elementos são mais fáceis de ler e dar manutenção, visto que suas propriedades são bem descritivas. As 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. Segue um exemplo da diferença entre a criação de um círculo via forma básica e via path: ```html ``` Um 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. A logo inicial, possuía vários pontos e detalhes: ![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) Para melhor performance, a Google resolveu trabalhar com formas básicas, diminuindo e muito o uso de pontos e paths. ![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) ## 2 - Converta textos para Outlines... Ou não... Para converter textos para outlines: - Selecione o texto que você quer converter - Escolha **Type > Create Outlines** ![Exemplo convertendo texto para outlines](https://sarasoueidan.com/images/convert-to-outlines.png) ### Prós: * 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. * Outlines são boas para casos de logos em que a forma e fonte precisam ser preservadas. ### Contras: - 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. A Sara recomenda e eu também, a leitura sobre como fazer o SVG mais acessível, nesses dois artigos: * [Tips for creating Acessible SVG](http://www.sitepoint.com/tips-accessible-svg/) * [Using Aria to Enhance SVG Acessibility](https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/) Outro 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: ![Exemplo de texto convertido e não convertido](https://sarasoueidan.com/images/text-output.jpg) ## 3 - Simplifique seus Paths Um 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. Para simplificar um path: - Selecione o path - Vá em **Object > Path > Simplify** - Modifique as precisões, ângulos e etc. **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. ![Paths sendo simplificados](https://sarasoueidan.com/images/simplify-paths.png) ![Opções para simplificar os Paths](https://sarasoueidan.com/images/path-points.png) Tem 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/). Você 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. ## 4 - Evite juntar Paths a menos que você não precise controlá-los individualmente Muitos 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. Portanto, 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. Para juntar paths: - Selecione os paths que deseja juntar - Vá até **Window > Pathfinder** - Clique na opção de **merge**, terceira opção de baixo para cima da esquerda para direita. Assim como mostrada no screenshot abaixo: ![Merge Paths](https://sarasoueidan.com/images/merge-paths.png) ## 5 - Crie filtros usando SVG filters, não filtros de Photoshop Se 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. Para gerar efeitos via SVG: - Vá em **Efects > SVG Filters** - Escolha e use um dos filtros disponíveis no painel. ![Usando filtros SVG](https://sarasoueidan.com/images/svg-filters-in-ai.png) ## 6 - Encaixe a artboard ao desenho **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). Para 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. Para encaixar a artboard ao desenho: - Selecione toda a arte - Vá em **Object > Artboards** e escolha a opção **Fit to Artwork Bounds** ## 7 - Use bons nomes, grupos e convencões nas camadas Sabemos que isso é uma coisa idiota, mas é importante de se falar, por algumas razões: - **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. - **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. ## 8 - Escolhas as melhores opções de exportar para web Em 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). Se você não tem essa versão, não tem problema, segue como pode ser feito com versões mais antigas: - Escolha **File > Save As** ![Save as](https://sarasoueidan.com/images/file-save.png) - Na parte inferior, onde ficam os formatos, escolha **SVG** ![Save as SVG](https://sarasoueidan.com/images/save-as.png) - Clique em Salvar Quando você clicar em salvar, uma outra janela irá abrir contendo um conjunto de opções: ![Opções para salvar SVG](https://sarasoueidan.com/images/export-options.png) As opções mostrada acima são as mais recomendadas para se salvar um SVG para web. A 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. A 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. Quanto 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. Uma 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. ![Use artboards](https://sarasoueidan.com/images/use-artboards.png) Por 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. Você pode ler mais sobre essas técnicas: - [An Overview of SVG Sprite Creation Techniques](https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/) - [Usando SVG Sprites](https://willianjusten.com.br/usando-svg-sprites/) - [Sistema de ícones em SVG](https://willianjusten.com.br/sistemas-de-icones-em-svg/) ## Otimizar ou não otimizar... É 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. Enquanto 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: - [SVG Gulp Optimizer](https://github.com/willianjusten/svg-gulp-optimizer) - [SVG Grunt Optimizer](https://github.com/willianjusten/svg-grunt-optimizer) Sã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. ## 9 - Se comunique, se comunique cedo. Possivelmente a dica mais importante é que você se comunique, e faça isso cedo, durante o processo de design ainda. Quase 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. Designers 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. ## Conclusão Bom 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. ================================================ FILE: posts/criando-efeito-parallax-no-header.md ================================================ --- layout: post date: 2016-04-16T13:39:03.000Z title: Criando efeito parallax no header description: Aprenda a fazer esse efeito simples que pode deixar seu site ainda mais bonito. main-class: css tags: - css - frontend - parallax categories: null --- ## Introdução E 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 =/ Vou 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. ## Motivação Eu 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. Quando 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. Foi 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... Se você quiser ver a demo feita para esse post, [clique aqui](https://labs.willianjusten.com.br/header-parallax/). ## Parte do CSS O 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. Nosso header então vai ter as seguintes propriedades: ```css .header-paralax { background-image: url('img/header.jpg'); background-size: cover; width: 100%; position: fixed; height: 600px; } ``` Depois 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`. O 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. As propriedades do nosso exemplo vão ficar assim: ```css main { background: #e7e3da; position: relative; top: 600px; font-family: 'Raleway', sans-serif; } ``` Pronto! O efeito de sobrepôr já está feito! Se você quiser, já pode parar por aí =) ## Parte do JS Se 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. O 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. Vou 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 =) ```js function scrollBanner() { var scrollPos var headerText = document.querySelector('.header-paralax h1') scrollPos = window.scrollY if (scrollPos <= 600) { headerText.style.transform = 'translateY(' + -scrollPos / 3 + 'px' + ')' headerText.style.opacity = 1 - scrollPos / 600 } } window.addEventListener('scroll', scrollBanner) ``` Criamos 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. Depois disso, precisamos pegar o valor da posição do scroll, que pode ser capturado pelo `window.scrollY`, pois é no eixo vertical que estamos preocupados. Para 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. Se você não clicou ainda, o [demo está aqui](https://labs.willianjusten.com.br/header-parallax/). ## Conclusão Pronto 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. Queria 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 =) ================================================ FILE: posts/criando-icone-menu-hamburguer-animado-com-css-puro.md ================================================ --- layout: post date: 2018-05-31T04:18:14.000Z title: Criando ícone menu hamburguer animado com CSS puro description: Nesse post/vídeo eu ensino como criar esse ícone animado para na segunda parte integrar a um menu real e bem legal. main-class: css tags: - video - css - animacao categories: - Dicas de CSS --- ## Introdução Fala 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. Eu 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. A 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. ## Demo live Você 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: - Como criar o ícone hamburguer animado - Como criar o menu fullscreen animado Assim 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 ## Vídeo <iframe width="560" height="420" src="https://www.youtube.com/embed/IGz4BI-aO_8" frameborder="0" allowfullscreen></iframe> ## Código e detalhes O 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: - [Seletores CSS importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) - [Como usar o input:checked num exemplo de switch button](https://willianjusten.com.br/criando-um-switch-button-com-css/) E o código que temos na aula por enquanto é, primeiro o markup html: ```html <body> <input id="menu-hamburguer" type="checkbox" /> <label for="menu-hamburguer"> <div class="menu"> <span class="hamburguer"></span> </div> </label> </body> ``` Onde 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`. O nosso CSS dessa primeira parte ficou assim: ```css *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } body { background: #81ecec; } .menu { background: #fff; border-radius: 50%; width: 60px; height: 60px; position: fixed; bottom: 25px; right: 25px; } .hamburguer { position: relative; display: block; background: #000; width: 30px; height: 2px; top: 29px; left: 15px; transition: 0.5s ease-in-out; } .hamburguer:before, .hamburguer:after { background: #000; content: ''; display: block; width: 100%; height: 100%; position: absolute; transition: 0.5s ease-in-out; } .hamburguer:before { top: -10px; } .hamburguer:after { bottom: -10px; } input { display: none; } input:checked ~ label .hamburguer { transform: rotate(45deg); } input:checked ~ label .hamburguer:before { transform: rotate(90deg); top: 0; } input:checked ~ label .hamburguer:after { transform: rotate(90deg); bottom: 0; } ``` Tem 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. ## Conclusão Bom 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. Lembrando 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. ================================================ FILE: posts/criando-imagens-bonitas-de-codigo.md ================================================ --- layout: post date: 2021-02-18T15:20:55.000Z title: Criando imagens bonitas de código description: Já viu blocos de código bonitos no Twitter e sempre quis fazer? Chegou sua vez! main-class: misc tags: - dica categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo <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> ## Blocos bonitos ![Trecho de código numa interface atraente](/assets/img/raycast-untitled-2-.png) É 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: - [Ray.so](https://ray.so/) - [Carbon.sh](https://carbon.now.sh/) ## Conclusão E 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. ================================================ FILE: posts/criando-menu-fullscreen-animado-com-css-puro.md ================================================ --- layout: post date: 2018-06-01T04:09:38.000Z title: Criando Menu Fullscreen animado com CSS puro description: Nesse post/video eu vou ensinar a segunda do nosso experimento, onde vamos criar um menu fullscreen animado e aprender um pouco de cubic bezier. main-class: css tags: - video - css - frontend categories: - Dicas de CSS --- ## Introdução Fala 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. Como 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. Então, sem mais delongas, vamos ao vídeo e logo abaixo, o código como sempre. ## Vídeo <iframe width="560" height="420" src="https://www.youtube.com/embed/i5Fps4GBBns" frameborder="0" allowfullscreen></iframe> ## Código Primeiro segue o nosso html, que dessa vez não mudou muita coisa, só mesmo tendo a adição do nosso menu: ```html <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> </ul> ``` E 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. Eu 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. O CSS feito nesse vídeo então, fica assim : ```css .menu { cursor: pointer; box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff; transition: box-shadow 1.1s cubic-bezier(0.19, 1, 0.22, 1); } .menu:hover { box-shadow: 0 0 0 8px #fff, 0 0 0 8px #fff; } // animação do menu input:checked ~ label .menu { box-shadow: 0 0 0 130vw #fff, 0 0 0 130vh #fff; } // só aparecer o menu ao clicar input:checked ~ ul { opacity: 1; } // animação e estilo do menu ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; font-size: 45px; opacity: 0; transition: 0.25s 0.1s cubic-bezier(0, 1.07, 0, 1.02); z-index: 2; } a { color: #00cec9; display: block; margin-bottom: 1em; text-decoration: none; } ``` Se 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). ## Conclusão Bom 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). E 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! ================================================ FILE: posts/criando-o-efeito-da-chuva-do-matrix-com-javascript-puro.md ================================================ --- layout: post date: 2021-12-20T14:16:50.000Z title: Criando o efeito da chuva do Matrix com JavaScript puro description: Aprenda como criar esse efeito em poucas linhas manipulando o Canvas main-class: js tags: - js - canvas --- ## Introdução Fala 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/). Esse 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. Nesse 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. E 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. ## Como é a chuva do Matrix e Demo Antes 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". Se você nunca viu esse efeito, [segue a demo do projeto](https://labs.willianjusten.com.br/matrix-rain). ## Inicializando o projeto Nesse 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: ```html <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matrix Rain ``` ### Entendendo o Canvas API O [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: ```html ``` Tendo 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). Nosso código inicial ficará da seguinte forma então: ```html ``` ### Pintando algo na tela Como 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. O 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: ```js // fillRect(eixoX, eixoY, largura, altura) ctx.fillRect(0, 0, 100, 100) ``` Nós teremos um quadrado de 100x100 no canto superior da tela! ![Pequeno quadrado preto na tela](/assets/img/small-square.png) E se quisermos pintar o canvas inteirinho? Podemos fazer o seguinte código: ```js ctx.fillRect(0, 0, c.width, c.height); ``` Note 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! ![Um retangulo preto na tela](/assets/img/all-canvas-without-size.png) ### Definindo o canvas para o tamanho todo da tela No 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: ```js // definindo o canvas com tamanho máximo da tela c.height = window.innerHeight; c.width = window.innerWidth; ``` Agora 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! ![Tela quase toda preta mas com bordas brancas](/assets/img/fullscreen-canvas.png) ### Resetando margins e paddings Essas 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: ```html ``` E agora, pode reparar que a tela ficou completamente ocupada pelo canvas. ![Tela completamente preta](/assets/img/with-reset.png) ### Escrevendo no Canvas Beleza, 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: ```js // definindo o tamanho e tipo de fonte ctx.font = `60px arial`; // definindo o texto a ser escrito e posição x, y ctx.fillText("Matrix Rain", 0, 60); ``` Com 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. ![Matrix rain escrito em preto na tela](/assets/img/matrix-rain-black-text.png) Mas 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. ### Colorindo as formas e textos Como 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). Se colocarmos o seguinte trecho: ```js ctx.fillStyle = "#0F0"; ctx.font = `60px arial`; ctx.fillText("Matrix Rain", 0, 60); ``` Nós iremos ver nosso texto finalmente em verde na tela! ![Matrix rain texto escrito em verde](/assets/img/matrix-rain-green-text.png) Agora você já sabe o suficiente para poder criar o nosso projetinho! **Fim da introdução**, vamos para diversão! ### Pegando os símbolos do Matrix Para 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: ```js const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"]; ``` ### Definindo as colunas para imprimir as letras Para posicionarmos corretamente as letras, nós precisamos dividir o espaço total da tela pelo tamanho das letras. Alé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: ```js const fontSize = 18 // definindo quantas colunas serão necessárias pelo tamanho da tela e fonte const columns = c.width / fontSize; // criando um array para cada gota, sempre iniciando na posição do y=1 const drops = new Array(Math.floor(columns)).fill(1); ``` ### Escrevendo toda a primeira linha Juntando os pedacinhos que já fizemos e removendo as coisas que estávamos só aprendendo, teremos o código assim: ```js // Pegando o elemento do Canvas const c = document.getElementById("matrix"); // Definindo o seu contexto const ctx = c.getContext("2d"); // definindo o canvas com tamanho máximo da tela c.height = window.innerHeight; c.width = window.innerWidth; // letras do Matrix Rain // ver mais em: https://bit.ly/3yFJoU3 const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"]; const fontSize = 18; // definindo quantas colunas serão necessárias pelo tamanho da tela e fonte const columns = c.width / fontSize; // criando um array para cada gota, sempre iniciando na posição do y=1 const drops = new Array(Math.floor(columns)).fill(1); ``` Só 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. ```js function draw() { // preenchendo a tela toda de preto com opacidade // esse truque da opacidade será útil para o efeito // das letras sumindo aos poucos // como teremos muitos quadros sobre quadros // o preto que no início é quase transparente ficará bem opaco ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); // definindo a cor e estilo da fonte ctx.fillStyle = "#0F0"; ctx.font = `${fontSize}px arial`; for (let i = 0; i < drops.length; i++) { // pegando uma letra randomicamente no nosso array const text = letters[Math.floor(Math.random() * letters.length)]; // escrevendo na tela ctx.fillText(text, i * fontSize, drops[i] * fontSize); } } // chamando a função criada draw() ``` Repare 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`. Se 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. ![Tela com primeira linha impressa](/assets/img/first-line-matrix.png) ### Animando quadro a quadro Até 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. A 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. ```js function draw() { // preenchendo a tela toda de preto com opacidade // esse truque da opacidade será útil para o efeito // das letras sumindo aos poucos ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); // definindo a cor e estilo da fonte ctx.fillStyle = "#0F0"; ctx.font = `${fontSize}px arial`; for (let i = 0; i < drops.length; i++) { // pegando uma letra randomicamente no nosso array const text = letters[Math.floor(Math.random() * letters.length)]; // escrevendo na tela ctx.fillText(text, i * fontSize, drops[i] * fontSize); } // chamada recursiva para animar quadro a quadro window.requestAnimationFrame(draw); } // chamando a função criada draw() ``` Ao fazer isso, você vai ver que a primeira linha vai ficar se redesenhando, com as letras umas em cima das outras. ![Letras se sobrepondo](/assets/img/overlap-letters.gif) Isso 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. ```js function draw() { // preenchendo a tela toda de preto com opacidade // esse truque da opacidade será útil para o efeito // das letras sumindo aos poucos ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); // definindo a cor e estilo da fonte ctx.fillStyle = "#0F0"; ctx.font = `${fontSize}px arial`; for (let i = 0; i < drops.length; i++) { // pegando uma letra randomicamente no nosso array const text = letters[Math.floor(Math.random() * letters.length)]; // escrevendo na tela ctx.fillText(text, i * fontSize, drops[i] * fontSize); // movendo as gotas no eixo y drops[i]++; } // chamada recursiva para animar quadro a quadro window.requestAnimationFrame(draw); } // chamando a função criada draw() ``` Com 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". ![Chuva uma unica vez](/assets/img/rain-without-loop.gif) Para 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: ```js if (drops[i] * fontSize > c.height) { drops[i] = 0; } ``` Ao 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. ![](/assets/img/rain-uniform-loop.gif) Para 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: ```js if (drops[i] * fontSize > c.height && Math.random() > 0.95) { drops[i] = 0; } ``` Eu 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. ![Chuva da Matrix](/assets/img/final-rain.gif) E pronto! Sua chuva da Matrix está feitinha! Segue o código inteiro: ```js // Pegando o elemento do Canvas const c = document.getElementById("matrix"); // Definindo o seu contexto const ctx = c.getContext("2d"); // definindo o canvas com tamanho máximo da tela c.height = window.innerHeight; c.width = window.innerWidth; // letras do Matrix Rain // ver mais em: https://bit.ly/3yFJoU3 const letters = ["日","ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ",":","・",".","=","*","+","-","<",">","¦","｜","ﾘ"]; const fontSize = 18; // definindo quantas colunas serão necessárias pelo tamanho da tela e fonte const columns = c.width / fontSize; // criando um array para cada gota, sempre iniciando na posição do y=1 const drops = new Array(Math.floor(columns)).fill(1); function draw() { // preenchendo a tela toda de preto com opacidade // esse truque da opacidade será útil para o efeito // das letras sumindo aos poucos ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); // definindo a cor e estilo da fonte ctx.fillStyle = "#0F0"; ctx.font = `${fontSize}px arial`; for (let i = 0; i < drops.length; i++) { // pegando uma letra randomicamente no nosso array const text = letters[Math.floor(Math.random() * letters.length)]; // escrevendo na tela ctx.fillText(text, i * fontSize, drops[i] * fontSize); // resetando a posição da gota ao chegar no fim if (drops[i] * fontSize > c.height && Math.random() > 0.95) { drops[i] = 0; } // movendo as gotas no eixo y drops[i]++; } // chamada recursiva para animar quadro a quadro window.requestAnimationFrame(draw); } // chamando a função criada draw() ``` Se quiser ver o codigo pelo [meu GitHub](https://github.com/willianjusten/labs/blob/main/matrix-rain/index.html). ## Conclusão Espero 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! ================================================ FILE: posts/criando-reading-progress-com-css-variables.md ================================================ --- layout: post date: 2017-08-05T16:02:18.000Z title: Criando Reading Progress com CSS Variables description: Uma forma fácil de implementar uma barra de reading progress em poucas linhas. main-class: css tags: - css - frontend categories: null --- ## Introdução Faaala 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? ## CSS Variables O 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 E 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 A 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. ### Básico do CSS Variables Bom, 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: ```html
...
... ``` Tendo em vista o seguinte markup, podemos criar um css assim: ```css :root { --header-home-bg-color: blue; --header-pages-bg-color: white; } .home .header { background-color: var(--header-home-bg-color); } .page .header { background-color: var(--header-pages-bg-color); } ``` Bastante 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: ```css :root { --font-stack: 'Open Sans'; } body { font-family: var(--font-stack, 'Arial'); } ``` Caso o valor de `--font-stack` não fosse achado ou válido, ele iria utilizar o valor `Arial`. ### Integrando com Javascript e criando nosso Reading Claro 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. Primeiro 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. ```html
``` Depois vamos criar nosso CSS para o `progress`. ```css .progress { background: linear-gradient(to right, #3863a0 var(--scroll), transparent 0); background-repeat: no-repeat; position: fixed; width: 100%; height: 8px; z-index: 2; } ``` Reparem 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. Para fazer o cálculo do scroll e identificar o progresso, vamos utilizar algums métodos do JS, que são: - [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. - [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. - [scrollHeight](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollHeight) - verifica a altura do elemento, considerando suas partes não visíveis. Tendo esses métodos em mente, fica fácil criar a seguinte função: ```js const progress = document.querySelector('.progress') const body = document.body const page = document.documentElement let scroll document.addEventListener('scroll', function () { scroll = (body.scrollTop / (body.scrollHeight - page.clientHeight)) * 100 progress.style.setProperty('--scroll', scroll + '%') }) ``` Primeiro 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. Tendo 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. Abaixo você pode ver esse exemplo rodando:

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

## Conclusão Bom 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 =) ================================================ FILE: posts/criando-svg-responsivo.md ================================================ --- layout: post date: 2015-04-04T18:18:49.000Z title: "#10 - Criando um SVG responsivo e adaptativo" description: Hoje em dia com a variedade de telas que temos, o desafio é dar o melhor conteúdo para cada tipo de tela. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série 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. ## Introdução Enquanto 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! Hoje será outro post rapidinho, mas bastante importante, visto que falaremos sobre uma coisa que está muito em alta, responsividade! ## Tamanhos e tamanhos Hoje 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. Telas 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. Mas 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. ## Tornando o SVG fluido Antes de sair adicionando o SVG a torto e a direito, precisamos nos atentar para alguns detalhes. ### 1 - Retire o width e height do elemento SVG Se você determinar um tamanho dentro do elemento `svg`, que é o nosso "container", você estará bloqueando o tamanho e com isso perdendo a fluidez. ```html ``` ### 2 - Determine uma viewBox A 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. Os valores min representam em qual ponto dentro da imagem a viewBox deve iniciar, enquanto o width e height estabelecem o tamanho do box. Se nós optarmos por não definir a viewBox a imagem não será redimensionada e irá corresponder a configuração feita na viewport. ```html ``` ### 3 - Coloque o preserveAspectratio para xMidYMidmeet Se 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. ```html ``` ## Adicionando o SVG Tendo 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! ### Como imagem, object e embed Basta 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. ```html Minha linda imagem em SVG ```

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

Experimente mudar o tamanho do container para ver que a imagem continuará a mesma. ### Como background e inline Nesses 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. ```html .element { background-image: url("imagem.svg"); }
``` ## Logos Adaptativas Uma 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: ![Logos em diferentes tamanhos](/assets/img/responsivo-svg/logos-sizes.jpg) Para 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`. ![Logo descontruída](/assets/img/responsivo-svg/logo-ungroup.png) Segue uma base de código de como fica: ```html ``` De posse das classes dos elementos, basta pensarmos nos Steps que queremos e nos cortes da tela. ### Corte 1 Para 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. ```css @media (min-width: 480px) and (max-width: 640px) { .shards { display: none; } } ``` ### Corte 2 Para 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/). ```css @media (max-width: 480px) { .shards { display: none; } .text path { fill: #ba27e4; } .crystal { display: none; } } ``` Feito isso, seu componente já está responsivo e adaptativo!! Veja o experimento pronto abaixo:

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

Para 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. ## Conclusão Depois 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. ================================================ FILE: posts/criando-textos-responsivos-com-css.md ================================================ --- layout: post date: 2020-04-28T05:38:15.000Z title: Criando Textos Responsivos com CSS description: Aprenda a deixar seus textos responsivos e fluidos em qualquer tela com viewport units e funções min-max do CSS. main-class: css tags: - css - videos - dicas categories: - Dicas de CSS --- ## Introdução Fala 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**! É 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. A 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. Esse post foi inspirado [nesse tweet da Una Kravets](https://twitter.com/Una/status/1254906546179526657) e espero que gostem! Você 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). ## Vídeo ## Conclusão Novamente 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! ================================================ FILE: posts/criando-toda-a-estrutura-de-um-site-usando-o-strapi-cms.md ================================================ --- layout: post date: 2021-03-06T14:57:17.000Z title: Criando toda a estrutura de um site usando o Strapi CMS description: Nessa aula eu mostro como penso e monto o backend de um site institucional simples. main-class: dev tags: - dicas - strapi categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando tudo que o Strapi tem a oferecer Quando 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`. Exemplo, 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. Agora 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. E 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. No vídeo acima você consegue ver mais desses pensamentos em prática. ## Conclusão E 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. ================================================ FILE: posts/criando-um-background-com-gradient-animado.md ================================================ --- layout: post date: 2020-04-23T15:04:15.000Z title: Criando um background com gradiente animado com CSS Puro description: Aprenda a criar um background animado para os seus sites e acaba com a monotonia dos fundos estáticos. main-class: css tags: - css - videos categories: - Dicas de CSS --- ## Introdução Fala 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. Você 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) ## Video ## Conclusão Novamente 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! ================================================ FILE: posts/criando-um-codepen-simples-em-poucas-linhas.md ================================================ --- layout: post date: 2018-05-28T06:20:42.000Z title: Criando um Codepen simples em poucas linhas description: Aprenda a criar um live editor na web com poucas linhas de código. main-class: js tags: - editor - js --- ## Introdução Fala 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/). Eu 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 Como 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). ## Sobre o Editor ![Screenshot do editor](/assets/img/cover.png) Assim como o codepen, ele basicamente tem 3 `textareas`, para html, css e js. E, claro, um live preview do que está acontecendo. Se quiser ver funcionando, só [acessar aqui!](https://willianjusten.com.br/dumb-codepen/) **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.** ## Criando a estrutura A primeira coisa que precisamos fazer é um `index.html` que vai ter os componentes necessários para funcionar: ```html
``` É 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: ```css * { margin: 0; padding: 0; box-sizing: border-box; } iframe { width: 100%; height: 50vh; border: none; } .editor { display: flex; } .editor textarea { background: #1E1F20; border: 1px solid #d3d3d3; color: #d3d3d3; flex: 1; font-size: 16px; height: 50vh; } ``` ## Fazendo funcionar Agora 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. ```js const htmlField = document.getElementById("html"); const cssField = document.getElementById("css"); const jsField = document.getElementById("js"); const preview = document.getElementById("preview"); function render() { let iframeComponent = preview.contentWindow.document; iframeComponent.open(); iframeComponent.writeln(` ${htmlField.value} `); iframeComponent.close(); } function compile() { document.addEventListener('keyup', function() { render(); }); }; compile(); render(); ``` Sim, todo o código necessário para criar esse editor está aí. Então vamos por partes. Primeiro é necessário criar os seletores para todos os nossos campos, que são criados nas linhas `1-4`. Depois temos a função que faz a mágica acontecer, que é a `render()`, ela eu vou separar um pouquinho para explicar. A 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. Apó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 ` `); ``` Com essas mudanças, nosso editor já tem um syntax highlight lindão e o resto todo funcionando! =) Como 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: ```css .editor pre { background: #1E1F20; border: 1px solid rgb(211, 211, 211); color: rgb(211, 211, 211); flex: 1; font-size: 16px; height: 50vh; padding: 30px 10px; margin: 0; position: relative; } .editor pre:before { display: block; font-size: 12px; position: absolute; top: 10px; left: 10px; } #html:before { content: 'HTML'; } #css:before { content: 'CSS'; } #js:before { content: 'JS'; } ``` Se 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 ## Conclusão Bom 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. ================================================ FILE: posts/criando-um-loader-animado-em-svg.md ================================================ --- layout: post date: 2017-06-15T22:59:34.000Z title: Criando um loader animado em SVG description: Aprenda a criar um loader com uma animação única em SVG com apenas poucas linhas. main-class: svg tags: - svg - animacao - tutorial categories: - O mundo mágico do SVG --- ## Introdução Faaaaaala 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. ## Vídeo
## Detalhes Se 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). Como 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: ```html ``` Depois 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. ```css .triangle { stroke-dasharray: 17; animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite; } @keyframes dash { to { stroke-dashoffset: 136; } } ``` Por fim, basta adicionar o texto de loading e posicioná-lo em nosso SVG. ```html Loading... ``` E fazer a animação dele utilizando a opacidade para que ele fique piscando. ```css .loading { font-family: 'Orbitron', sans-serif; font-size: 7px; animation: blink 0.9s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0; } } ``` ## Conclusão Bom 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) ================================================ FILE: posts/criando-um-menu-off-canvas-com-css3.md ================================================ --- layout: post date: 2015-11-01T15:01:02.000Z title: Criando um menu Off Canvas com CSS3 description: Aprenda a criar um menu off canvas usando CSS3 Transitions e Transforms. main-class: css tags: - css - frontend - tutorial categories: null --- ## Introdução Como 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). ## Off Canvas Esse 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é? Se você é daqueles que gosta de ver funcionando primeiro, segue a [DEMO](https://labs.willianjusten.com.br/menu-off-canvas/#). **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 =)** ## Funcionamento O funcionamento é bem básico e consiste de trabalhar com camadas deslocadas. Vamos imaginar os seguintes elementos: - `Wrapper`: elemento do tamanho da viewport da tela. - `Canvas`: área onde teremos nosso conteúdo de fato. - `Menu`: nosso menu. Em seu primeiro momento, teremos o menu totalmente fora do `wrapper` e o canvas ocupando toda a tela, conforme imagem abaixo: ![Menu Off Canvas do lado de fora](/assets/img/off-canvas/layer-1.png) Para 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: ![Menu Off Canvas do lado de dentro](/assets/img/off-canvas/layer-2.png) ## HTML Bom, 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. ```html
``` Dentro dessas camadas, vamos colocar algum conteúdo, só para não ficar muito vazio. ```html
Fechar o menu
Abrir o menu

Menu Off Canvas!!

Uma simples demo mostrando como funciona o menu off canvas.

Tutorial em willianjusten.com.br

``` Note 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. ## CSS ### Wrapper Depois 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. ```css .wrapper { position: relative; overflow: hidden; width: 100%; height: 3000px; /* só para deixar a página grande*/ } ``` ### Canvas O 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 ```css .canvas { width: 100%; height: 100%; position: relative; transform: translateX(0); transition: 0.3s ease all; } ``` ### Menu Nosso 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. ```css .menu { height: 100%; position: absolute; transform: translateX(-300px); width: 300px; background: #bf0000; padding: 5rem; } ``` ### Animação Depois 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`. ```css .wrapper.show-menu .canvas { transform: translateX(300px); } ``` ## Javascript Para 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. ```js // elementos auxiliares var toogleMenu = document.querySelectorAll('.toggle-menu'), wrapper = document.querySelector('.wrapper') // criando evento de click para abrir o menu for (var i = 0; i < toogleMenu.length; i++) { toogleMenu[i].addEventListener('click', menuAction) } // função auxiliar que abre e fecha o menu function menuAction() { if (wrapper.classList.contains('show-menu')) { wrapper.classList.remove('show-menu') } else { wrapper.classList.add('show-menu') } } ``` O 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. E o resultado fica assim:

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

## Melhorias ### Performance com uso da GPU Um 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()`. ```css /* Antes */ .canvas { transform: translateX(0); } .show-menu .canvas { transform: translateX(300px); } /* Novo */ .canvas { transform: translate3d(0); } .show-menu .canvas { transform: translate3d(300px, 0, 0); } ``` ### Fechar o menu com a tecla ESC Uma 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 ```js // Adicionando evento para fechar o menu ao pressionar a tecla ESC document.addEventListener('keyup', function (e) { if (e.keyCode == 27) { if (wrapper.classList.contains('show-menu')) { menuAction() } } }) ``` ## Conclusão É 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... Quem fizer uma brincadeira nova, posta aí nos comentários. ================================================ FILE: posts/criando-um-react-custom-hook-com-testes.md ================================================ --- layout: post date: 2020-04-09T12:08:32.000Z title: Criando um React Custom Hook com Testes description: Aprenda como criar um react hook de Konami Code a partir do zero com TDD. main-class: js tags: - react - js - tdd --- ## Introdução Fala 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. O 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 =) ~~Como eu falo devagar, bota em 2x que melhora~~ ## Video ### Alguns links e informações Todo o código do projeto que fizemos, você encontrará no [repositório do Github](https://github.com/willianjusten/use-konami-code). O [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/). A 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. Você 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. ## Conclusão Espero 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! ================================================ FILE: posts/criando-um-switch-button-com-css.md ================================================ --- layout: post date: 2015-12-06T22:42:25.000Z title: Criando um switch button com CSS description: Aprenda a criar os famosos botões deslizantes de on/off usados no iOS, Android e WebApps. main-class: css tags: - css - tutorial categories: null --- ## Introdução Fala 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 O 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. ## Botão de On/Off ![Vários botões de on/off do iphone](/assets/img/on-off/on-off-ios.jpg) Muitas 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? ## Organizando o Markup Primeiro de tudo, como vamos trabalhar com um `checkbox`, nada mais justo que criar um né? ```html
``` A 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. ## Criando a base do CSS Depois 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". **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 =)** ```css .switch { position: absolute; margin-left: -9999px; visibility: hidden; } .switch + label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; } ``` Usamos 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/). As 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. ## Definindo o estilo iOS ![botão estilo iOS](/assets/img/on-off/switch-button.gif) Aqui, 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. ```css .switch--shadow + label { padding: 2px; width: 120px; height: 60px; background-color: #dddddd; border-radius: 60px; } ``` Com esse primeiro passo, teremos nada mais que um retângulo com as bordas completamente arredondadas, num fundo cinza. Depois, 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. ```css .switch--shadow + label:before, .switch--shadow + label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ''; } .switch--shadow + label:before { right: 1px; background-color: #f1f1f1; border-radius: 60px; transition: all 0.4s; } .switch--shadow + label:after { width: 62px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: all 0.4s; } ``` As 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. Preste 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. Com esses estilos, nós já temos o nosso botão prontinho, só falta criar a interação. ## Criando interação com clique no CSS Esse é 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: ```css .switch--shadow:checked + label:before { background-color: #8ce196; } .switch--shadow:checked + label:after { transform: translateX(60px); } ``` Verificando 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:

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

## Atualização Meu amigo [Davidson](https://twitter.com/davidsonFellipe) lá de NY resolveu dar uma de flanelinha de layout =p Brincadeiras 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. ## Conclusão Bom, 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/ ================================================ FILE: posts/criando-um-tooltip-animado-com-css-clip-path.md ================================================ --- layout: post date: 2020-05-07T13:19:46.000Z title: "Criando um tooltip animado com CSS clip-path " description: Aprenda a fazer uma micro interação bem sútil, mas que vai fazer toda a diferença no seu layout. main-class: css tags: - css - video categories: - Dicas de CSS --- ## Introdução Fala 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. E 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. Você 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/). ## Vídeo ## Conclusão Novamente 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! ================================================ FILE: posts/criando-uma-animacao-de-card-com-hover.md ================================================ --- layout: post date: 2020-05-14T06:44:15.000Z title: Criando uma animacao de Card com Hover description: Aprenda a fazer uma animação bem legal utilizar os pseudo-seletores :after e :before main-class: css tags: - css - videos categories: - Dicas de CSS --- ## Introdução Fala 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. Para essa animação nós usaremos os pseudo-seletores `:after` e `:before` e um pouquinho da mágica do `scale`. Você 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/). ## Vídeo ## Conclusão Novamente 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! ================================================ FILE: posts/criando-uma-animacao-de-digitacao-com-css.md ================================================ --- layout: post date: 2020-04-21T09:04:15.000Z title: Criando uma animação de digitação com CSS description: Como fazer um efeito parecido com uma máquina de escrever digitando na tela somente só CSS. main-class: css tags: - css - videos categories: - Dicas de CSS --- ## Introdução Fala 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. Já tenho alguns outros vídeos que o pessoal gostou bastante como: - [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/) - [Criando um ícone menu hamburguer com CSS puro](https://willianjusten.com.br/criando-icone-menu-hamburguer-animado-com-css-puro/) - [Criando um menu fullscreen animado com CSS puro](https://willianjusten.com.br/criando-menu-fullscreen-animado-com-css-puro/) E 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 Você 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) ## Video ## Conclusão Espero 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. ================================================ FILE: posts/criando-uma-animacao-de-reveal-block-com-css.md ================================================ --- layout: post date: 2020-04-22T09:04:15.000Z title: Criando uma animação de Reveal Block com CSS description: Como fazer um efeito de mostrar um bloco e então revelar o conteúdo por trás com CSS. main-class: css tags: - css - videos categories: - Dicas de CSS --- ## Introdução Fala 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. Você 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) ## Video ## Conclusão Novamente 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! ================================================ FILE: posts/criando-uma-lib-js-com-testes-do-zero.md ================================================ --- layout: post date: 2019-03-06T07:23:39.000Z title: Criando uma lib JS com testes do Zero description: Uma mini-série de vídeos no Youtube onde eu ensino a criar uma lib JS simples usando testes do zero. main-class: js tags: - youtube - testes - js - tdd --- ## Introdução Fala 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. Tive 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. ## Videos Você pode também assistir a playlist inteira, diretamente no [Youtube](https://www.youtube.com/watch?v=nrNvUDPKcBk&list=PLlAbYrWSYTiPR9DhcL9-22W-E-p8LmDOJ). Abaixo vou colocar os links e comandos utilizados no curso. ## Estrutura utilizada Para a formatação do código e regras, eu utilizei: - [Eslint](https://eslint.org/) - [StandardJS](https://standardjs.com/) - [Prettier](https://prettier.io/) Para os testes, utilizei o [Jest](https://jestjs.io/) e na compilação/server exemplo, utilizei o [Webpack](https://webpack.js.org/) Sei 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. ### Instalação do Babel e suas dependências Para 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: ```bash yarn 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 ``` Depois disso, é só criar um arquivo `.babelrc` na raiz do projeto com o seguinte: ```json { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-proposal-class-properties"] } ``` Lembrando que você pode utilizar o `npm install` se desejar. ### Eslint + StandardJS + Prettier O 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: ```bash yarn 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 ``` Depois de instalado é só criar um arquivo `.eslintrc.json` na raiz do sistema com o seguinte conteúdo: ```json { "parser": "babel-eslint", "env": { "jest": true, "browser": true }, "extends": ["standard"], "rules": { "space-before-function-paren": "off", "comma-dangle": "off" } } ``` Repare 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. Depois do eslint+standardjs instalados, foi a vez do prettier: ```bash yarn add --dev prettier@1.16.4 ``` Se 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). ### Jest e Babel-Jest Para 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`. ```bash yarn add --dev jest@24.1.0 babel-jest@24.1.0 ``` ### Webpack Para 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: ```bash yarn add --dev webpack@4.29.6 webpack-cli@3.2.3 webpack-dev-server@3.2.1 ``` A configuração ficou assim: ```js const path = require('path') module.exports = { mode: 'production', entry: './index.js', output: { path: path.join(__dirname, 'lib'), filename: 'on-leave-intent.min.js', libraryTarget: 'umd', library: 'OnLeaveIntent' }, module: { rules: [ { loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ } ] }, devServer: { contentBase: [path.join(__dirname, 'example'), path.join(__dirname, 'lib')] } } ``` ### Código / Pacote Bom, 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). Se você quiser utilizar em algum projeto, o [pacote está no npm](https://www.npmjs.com/package/on-leave-intent). E você pode instalar com: ```bash yarn add on-leave-intent ``` ================================================ FILE: posts/customizando-o-disqus.md ================================================ --- layout: post date: 2018-03-28T07:49:06.000Z title: Customizando o Disqus description: Como adaptar esse sistema de comentários para funcionar melhor no seu site. main-class: jekyll tags: - disqus - jekyll categories: null --- ## Introdução Fala 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! Mas 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é? =) Vou 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. ## Como o Disqus define os estilos? Quando você vai na [administração do Disqus](https://willianjusten.disqus.com/admin/settings/general/), lá no final, você vai encontrar a seguinte opção: ![Select box mostrando 3 opções (Auto, Light Backgrounds e Dark Backgrounds)](/assets/img/disqus-appearance.png) E essas opções são bem simples de entender: - `Auto`: o próprio Disqus verifica se seu site é claro ou escuro e determina então o estilo que vai aplicar. - `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). - `For dark backgrounds`: vai endender que o site é escuro e vai usar branco e cinza claro para contrastar melhor no fundo claro. Ok, sabendo disso, agora que tem o `Night Mode` no blog bastava eu escolher o `auto` certo? Sim e não... ## Como o Disqus escolhe as cores? Nó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? Tem [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. O Disqus herda a cor do link diretamente colocado no seu site, então se você tiver um css como: ```css a { color: red; } ``` O 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. ## E quando o site muda de claro para escuro? O Disqus tem o seguinte script para iniciar nas páginas: ```js var disqus_config = function () { this.page.url = '{{ site.url }}{{page.url}}'; this.page.identifier = '{{page.url}}'; }; var d = document, s = d.createElement('script'); s.src = '//willianjusten.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); ``` Ele cria o script, apenda na página e é isso. O disqus vai carregar a partir dali e não vai fazer mais nada. Só 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: ```js const pageUrl = document.location.href; DISQUS.reset({ reload: true, config: function () { this.page.identifier = pageUrl; this.page.url = pageUrl; } }); ``` Ou 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 ## Conclusão Bom, é 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! ================================================ FILE: posts/debugando-e-agilizando-testes-na-react-testing-library.md ================================================ --- layout: post date: 2021-02-18T15:09:30.000Z title: Debugando e agilizando testes na React Testing Library description: Como um método tão simples pode te ajudar a acelerar os seus testes e também descobrir erros escondidos. main-class: js tags: - js - react - test categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Método mágico Dentro 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é? ## Conclusão E 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. ================================================ FILE: posts/devo-fazer-faculdade.md ================================================ --- layout: post date: 2015-02-07T12:47:02.000Z title: Devo fazer faculdade? description: Essa dúvida sempre acontece, principalmente para quem trabalha com programação. Vamos conversar mais sobre o assunto. main-class: dev tags: - faculdade - programação categories: null --- ## Introdução Ontem 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. ## Histórico Como 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. Sempre 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. Durante 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. Lá 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. Durante 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. Para 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. ## Faculdades e "faculdades" O 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. > Quem faz a faculdade são os alunos! - Autor desconhecido Essa 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. Faculdade não é pra te dar conhecimento técnico. Pra isso vc tem cursos, livros, tutoriais na internet e afins. Faculdade não acompanha mercado. Se for assim, faculdade vai mudar de 2 em 2 semanas. A faculdade foi feita pra te mostrar a base daquilo que vc estuda, te fazer evoluir como pessoa e profissional. Além disso, faculdade está longe de se resumir a ir a aula. É todo o ambiente ao seu redor. A 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. ## Já sei programar, para que vou fazer isso? Essa é 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. Na 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. ## Famosos nem fizeram faculdade... > Você não é todo mundo. - Sua mãe Assim 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. Existe 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. ## Já sou velho e trabalho com isso tem 20 anos Nunca se é velho para qualquer coisa =) Realmente 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. ## Ok, me convenceu, mas qual eu faço? O 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. Tendo um pouco disso em mente, leia as ementas dos cursos, existem milhares de cursos e cada um tem suas peculiaridades. ## Mas não se esqueça... Por mais que você esteja na faculdade, todo o seu sucesso irá depender de você, então siga algumas dicas importantes: * **Leia bastante**: não se prenda ao dado nas aulas, busque conhecer mais sobre aquele assunto. * **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. * **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. * **Tenha bons grupos**: escolha pessoas que compartilhem do seu pensamento e não carregue ninguém, divida as tarefas e aprenda bastante com todos. * **Viva o ambiente**: não entre já querendo sair, conviva lá, retire o máximo que puder do lugar. ## Busquem conhecimento Durante a criação do post, acabei achando alguns vídeos legais e excelentes posts sobre mil vezes melhores que o meu. * [O que aprendi em Harvard - Jorge Paulo Lemann](https://www.youtube.com/watch?v=rhaeYj7cln0) - **ASSISTA** * [Faculdade de informática. fazer ou não fazer? - Leandro Oriente](http://leandrooriente.com/faculdade-de-informatica-fazer-ou-nao-fazer/) * [Devo fazer faculdade? - Fabio Akita](http://www.akitaonrails.com/2009/04/17/off-topic-devo-fazer-faculdade#.VNYHTFPF88Y) ================================================ FILE: posts/devs-brasileiros-gringos-trabalhar-exterior.md ================================================ --- layout: post date: 2017-12-01T17:34:06.000Z title: Devs Brasileiros, Gringos e trabalhar no exterior description: Será que a diferença é tão grande assim? Vamos conversar um pouco sobre isso. main-class: dev tags: - experiencia - dicas - lifestyle categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Faaaala 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). Tiveram 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: > Como é trabalhar com pessoal de fora? O que preciso aprender para ficar no nível deles? Como 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. 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. ## Resumo para os preguiçosos Trabalhar 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ível dos Devs Gringos Bom, 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... També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! > É 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ê. ## Estilo de Vida e como trabalham É 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. É 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. E 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. Outra 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. ## Situação Financeira, estudos e pressão Isso é 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. Os 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. Por 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? > 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. Tenta 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 ## Eventos e Meetups Uma 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. No 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... Eu 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. ## Estrutura, empresas, transporte... Muito 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. Outra 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. Pensa 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. Esse 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. ## Como o Br é visto no exterior? Isso é 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. ## Conclusão Como 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. ================================================ FILE: posts/dez-anos-de-blog.md ================================================ --- layout: post date: 2024-12-26T08:00:40.000Z title: Dez anos de blog e mais alguns de carreira description: Alguns aprendizados e reflexões ao longo desse tempo main-class: misc --- ## Introdução Fala pessoal, até que num demorei muito a escrever, depois que fiz minha [retrospectiva de 2024](https://willianjusten.com.br/meu-ano-de-2024). > Achou que ia ficar sem post no blog? Achou errado otário! - Choque de cultura Já 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. Mas 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. Se faça um favor e vá ao cinema assistir, é bom demais! Esse 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 começar (pois é, quanto mais tempo de área, mais reuniões também...). ## Dez anos de blog É 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 mesmo 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ão tenha medo de [aprender em público](https://www.swyx.io/learn-in-public) - Crie projetos pessoais para testar novas tecnologias e praticar - 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 Esse meu blog sobreviveu exatamente por causa dessas três coisas, mesmo eu sendo uma pessoa extremamente perfeccionista, teve um dia que eu simplesmente liguei o "foda-se", escrevi, publiquei e bom, aí foi. Muito 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 ajudava exatamente nisso. ## A dificuldade de se manter criando conteúdo A 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 se você não tem um público no início, isso pode ser um pouco frustrante. Vem então mais umas dicas: - Todo assunto é assunto, não deixe de escrever/gravar algo por achar que é "simples" e ou "bobo" - Faça listinhas de assuntos para escrever/gravar, isso vai te ajudar a manter a consistência - 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 Você pode falar: > Ah Will, mas você não posta praticamente nada há anos e agora vai vir nesses papos de coach? Sim, 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". E coach de c\* é rola! ## Será que sou bom o suficiente? Eu 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 me 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. E 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 seu 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. Faça você o mesmo, tenho certeza que vai notar o quão melhor você está. ## Dicas de carreira e código Lá 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: - Ajudar outros é a melhor forma de se aprender. - Ainda sobre ajudar, comece ajudando e pessoas irão te ajudar de volta, nem sempre da mesma maneira, mas sempre de alguma forma. - Faça redes, é muito mais fácil entrar num emprego por uma pessoa que você conhece do que por uma vaga publicada. - Ser uma voz ativa no seu trabalho/time pode te trazer mais oportunidades que imagina. - Antes de sair falando sua opinião, tente entender o contexto que X ou Y foi feito, você pode aprender muito com isso. - Leia códigos de outros, mesmo que não seja do seu time/contexto, você vai aprender e ainda abrir seu leque de conhecimento - 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. - 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. - Outras áreas importam tão ou mais que programação, então se envolva com elas, seja marketing, design, vendas, produto, etc. - 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. - 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. - 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. - Outras pessoas tem medo de fazer as mesmas "perguntas idiotas" que você, então as pergunte, vão até te agradecer. - Não existem "perguntas idiotas". - Aprenda a usar um debugger, um `console.log` ajuda, mas um debugger vai te permitir muito mais. - Ir "tomar um banho ou dormir" já resolveu mais bugs que ficar horas olhando para a tela. ## Conclusão É 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. Espero que tenha sido útil de qualquer forma. Se você tiver outras dicas legais, compartilha aí nos comentários. ================================================ FILE: posts/dica-de-css-scroll-snap.md ================================================ --- layout: post date: 2019-07-17T10:39:23.000Z title: "Dica de CSS: Scroll Snap" description: Criando fullpage scroll com simples linhas de CSS. main-class: css tags: - CSS - Dicas categories: - Dicas de CSS --- ## Introdução Fala 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). A 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ó". Bom, 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. ## Demo Se você quiser ver logo o negócio funcionando, seguem aqui as 3 diferentes demos: - [Vertical](https://labs.willianjusten.com.br/scroll-snap/vertical) - [Horizontal](https://labs.willianjusten.com.br/scroll-snap/horizontal) - [Proximity](https://labs.willianjusten.com.br/scroll-snap/proximity) Abaixo segue um gif do exemplo vertical, para você já entender o que faremos. ![Fotos de paisagens na Austria sendo scrolladas verticalmente](/assets/scroll-snap.gif) ## Plugins famosos e sites que usam Como disse, vários sites usam essa técnica, mas eles acabam caindo em plugins JS. Que são os casos do: - [FullPage](https://alvarotrigo.com/fullPage/) - [One Page Scroll](http://www.thepetedesign.com/demos/onepage_scroll_demo.html) - [RevealJS](https://revealjs.com/#/) E aí, eu separei alguns sites bem legais que usam: - [BBC - Partition of India Article](https://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02) - [One Month Off - Indonesia](https://readymag.com/repponen/20907/10/) - [Coca Cola Annual Review](https://www.coca-colacompany.com/annual-review/2017/index.html) E 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 ## Mas e como fazer isso só com CSS? Existe 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. A sintaxe mudou um pouco e agora está ainda mais simples de usar, então vamos ver como que faz. ### Criando o Markup Basicamente 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: ```html

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

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

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

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

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

``` Cada `section` tem uma classe específica, assim conseguimos adicionar diferentes backgrounds para cada um. ### Criando o CSS base para as sections Antes 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: ```css section { background-size: cover; background-position: center center; height: 100vh; width: 100vh; } .description { background: rgba(0, 0, 0, 0.3); bottom: 1rem; color: white; font-size: 1rem; line-height: 1.5; max-width: 250px; padding: 2rem; position: absolute; right: 1rem; } .one { background-image: url('./img/one.jpg'); } .two { background-image: url('./img/two.jpg'); } .three { background-image: url('./img/three.jpg'); } .four { background-image: url('./img/four.jpg'); } .five { background-image: url('./img/five.jpg'); } ``` ### Agora a mágica do CSS Basicamente 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`. O 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. O `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. Então para fazer os slides mudarem de forma horizontal, usaremos da seguinte forma: ```css .container { scroll-snap-type: x mandatory; display: flex; } section { scroll-snap-align: start; } ``` Passando 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`. E 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). Para 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). ## Conclusão A 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. ================================================ FILE: posts/dica-rapida-1.md ================================================ --- layout: post date: 2015-01-07T23:31:05.000Z title: "Dica rápida #1" description: Detalhes fazem a diferença, vamos falar sobre Favicons, Touch Icons e Tile Icons e como eles fazem a diferença. main-class: dev tags: - dicarapida --- Já 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". A minha ideia também será postar coisas em um nível também iniciante, assim ajuda uma galera nova, que está começando agora. ## Favicons ![Favicons](/assets/img/dica-rapida-1/favicons.png) Pequenos 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 =) Antigamente 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: - `16x16`: tamanho na barra de endereço - `32x32`: ícone na barra de tarefas ou atalhos - `24x24`: favorito no browser Mas 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/). ### E como faço isso funcionar? Basta adicionar a seguinte `meta tag` no `head`: ```html ``` Algumas pessoas apoiam utilizar um formato mais adaptável que é o `png` usando as novas meta tags com size, como mostrado no código abaixo: ```html ``` ### Mas se pode usar png, por que você vem me falar para usar o formato .ico que é velho?? Simples! 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. ## Touch Icons Com 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. De acordo com as versões do iOS e o aparelho, temos os seguintes tamanhos: ![Tabela de tamanhos dos ícones da Apple](/assets/img/dica-rapida-1/favicons-table.png) ####JESUS, MARIA, JOSÉ, É IMAGEM PARA CARAMBA! NÃO VOU FAZER ISSO! Relaxa amigo, existem geradores na net, esses dois abaixo são muito bons: - [Real Favicon Generator](http://realfavicongenerator.net/) - [Iconogen](http://iconogen.com/) E como faço para os apps lerem isso aí? ```html ``` E prontinho, olha que legal, já funciona!! ![Imagem em um ipad](/assets/img/dica-rapida-1/icon-apple-circle.png) ## Tile Icons Com 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`. Para fazer funcionar, basta adicionar as seguintes linhas no head: ```html ``` ## Conclusão Pequenos 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. Fica 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. ================================================ FILE: posts/diga-nao-ao-medium-tenha-sua-propria-plataforma.md ================================================ --- layout: post date: 2019-07-30T14:11:25.000Z title: "Diga não ao Medium: tenha sua própria plataforma" description: Algumas razões para você ter sua própria plataforma ao invés de soluções como o Medium. main-class: misc tags: - blog - medium --- ## Introdução Fala 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. Enquanto 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. ## O que a web é hoje e como deveria ser? Existe 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. A 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! E 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ê? E o que dizer do **paywall**? Se você usa o Medium, provavelmente já deve ter visto a imagem abaixo: ![Texto cortado dizendo que para continuar lendo a história, você precisa se logar no Medium.](/assets/img/medium.jpeg) E quais seriam as outras razões para se ter a própria plataforma ao invés de um Medium da vida? ## Razões para ter sua própria plataforma Eu 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 ### 1. Ownership do Projeto Já 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. Ter 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. ### 2. Medium é uma empresa! Lembra 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... O que te garante que o Medium não vai quebrar e com isso, você vai perder tudo que tinha lá? ### 3. Personalização Pode 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. ### 4. Aprendizado Quando 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. ### 5. UI/UX confusa Existe 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. ### 6. Aberto a colaboração Isso 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. Inclusive, 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. Ao [Ademílson Tonato](https://github.com/ftonato), que está sempre revisando meus posts, sem ele, meus posts estariam cheios de erros xD ## Conclusão Enfim, 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ã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! ```bash (•_•) <)    )╯Always /    \ \(•_•) (    (> Own /    \ (•_•) <)    )> Your Platform /    \ ``` ================================================ FILE: posts/dominio-proprio-no-github-pages.md ================================================ --- layout: post date: 2015-01-29T06:16:36.000Z title: Como ter Domínio Proprio no Github Pages description: O passo a passo para deixar seu blog com seu domínio. main-class: dev tags: - github pages - jekyll - tutorial categories: null --- Como 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. **Ou seja, esse processo é para qualquer tipo de site feito no github pages, através de qualquer ferramenta!!** O processo engloba 3 etapas muito fáceis e rápidas: ## 1 - Subindo para o Github Pages Para 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 =) Outra dependência é que você cadastre uma conta no [Github](https://github.com/). Tendo isso pronto, é só seguir os seguintes passos: #### Passo 1: Crie um repositório ![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/criar-repo.png) Para que funcione no branch `master`, você precisa criar utilizando o `seunomedeusuario.github.io`, no meu caso ficou `willianjusten.github.io`. ![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/nome-repo.png) #### Passo Final: ```bash # Iniciar um repositório git na pasta do projeto git init # Adicionar todos os arquivos git add -A # Commitar os arquivos git commit -m "Commit Inicial" # Adicionar o repositório remoto git remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git # Subir seu lindo blog git push -u origin master ``` Com 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`. ## 2 - Comprando um domínio e direcionando o DNS Existem 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`. Para 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. ![Imagem mostrando a Home Page com a ferramenta de analise de domínios](/assets/img/dominio/dominio-livre.png) Tendo 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. ![Imagem indicando a opção de DNS](/assets/img/dominio/dns.png) Clicando 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. ![Zona de DNS](/assets/img/dominio/zona.png) **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.** Feito isso fica faltando somente mais uma etapa. ## 3 - Criação do arquivo CNAME Esse é 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.** Feito tudo isso, basta esperar um tempinho até o DNS propagar e tudo show de bola =) ================================================ FILE: posts/efeito-de-desenhar-com-svg.md ================================================ --- layout: post date: 2015-10-05T21:41:21.000Z title: "#15 - Criando o efeito de desenhar com SVG" description: Um tutorial de como fazer aquele efeito legal de desenhar elementos na tela com SVG. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Introdução Estou 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. Nesse 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. Se você não sabe que efeito é esse, dá uma olhadinha nessa [coleção do codepen](http://codepen.io/collection/cEust/10/). ## Contornos Se 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`. ## Stroke-dasharray e Stroke-dashoffset A 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: ```css path { stroke-dasharray: 10; } ``` Isso significa que cada traço no desenho terá um tamanho de 10 e um espaço de 10 para o próximo traço. Já a propriedade `stroke-dashoffset` permite mudar onde o `stroke-dasharray` vai começar e terminar. Entã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: #### Passo 1 ```css inicio { stroke-dasharray: 'tamanho do desenho'; stroke-dashoffset: 'tamanho do desenho'; } ``` Aqui, como determinamos que o `stroke-dashoffset` é o tamanho do desenho, ele empurra todo o traço e não enxergamos nada na tela. #### Passo 2 ```css final { stroke-dashoffset: 0; } ``` Nesse 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. Mas vamos parar de falar teoria e vamos para a prática: ## Criando o Efeito de Desenhar ### 1 - Baixando um SVG ou criando um. Para 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 =) Eu fiz o desenho no Illustrator, mas ele também pode ser feito no Inkscape, Sketch e outros editores de SVG. ![Imagem mostrando um Hello escrito no Illustrator](/assets/img/draw-svg/hello.png) ### 2 - Otimizando o SVG Sempre 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/). ### 3 - Inserindo o SVG na página Basta 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"`. ```html ``` ### 4 - Descobrindo o tamanho total do path Para 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: ```js var draw = document.querySelector('.hello path') console.log(draw.getTotalLength()) ``` No meu caso, o resultado foi de `1044.4212646484375`. ### 5 - Criando a animação Depois 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. ```css .hello { stroke-width: 3px; stroke-dasharray: 1045; // numero arrendoda do tamanho } ``` Depois 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`. ```css // write é o nome da nossa animação @keyframes write { 0% { stroke-dashoffset: 1045; // tamanho inicial } 100% { stroke-dashoffset: 0; // tamanho final } } ``` Feito isso, basta definirmos essa animação lá na nossa classe `hello`: ```css .hello { stroke-width: 3px; stroke-dasharray: 1045; // numero arrendoda do tamanho animation: 6s write; // quanto menor, mais rápido } ``` Prontinho, temos nossa animação feita!! Segue abaixo o exemplo criado, para ver a animação é só clicar em "Rerun" ali no canto inferior direito:

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

## Desenhando e preenchendo Junto 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:

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

Para 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. ## Desenhando com Scroll Outro 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. Segue um exemplo:

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

Vamos 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. ```js // Seleciona o path do nosso desenho var path = document.querySelector('path') // Pega o tamanho total dele var pathLength = path.getTotalLength() // Faz com que o stroke-dasharray fique com o tamanho total path.style.strokeDasharray = pathLength + ' ' + pathLength // Faz com que o stroke-offset fique com o tamanho total // Escondendo assim o desenho path.style.strokeDashoffset = pathLength ``` Depois nós precisamos criar um evento de `scroll` e de acordo com ele, ir diminuindo o valor do `stroke-dashoffset` até 0. ```js // Adiciona o evento de Scroll window.addEventListener('scroll', function (e) { // determina a porcentagem do quanto o usuário já scrollou na tela var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) // Determinando o tamanho do desenho pela porcentagem var drawLength = pathLength * scrollPercentage // Diminuindo o valor do offset para criar o desenho path.style.strokeDashoffset = pathLength - drawLength }) ``` ## Conclusão Bom, 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. E 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. - [Garden](http://gardenestudio.com.br/) - [Panizzon](http://panizzon.ind.br/) ================================================ FILE: posts/entendendo-especificidade-em-css.md ================================================ --- layout: post date: 2020-04-06T05:43:00.000Z title: Entendendo especificidade em CSS description: O CSS não é difícil, mas é fundamental entender suas regras para não ficar tentando as coisas na sorte. main-class: css tags: - css - "" --- ## Introdução Fala 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! Irei 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. A 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. Enquanto 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! ### Antes de tudo, um resumo de seletores CSS Eu 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: * **Seletores de Tipo**: onde marcamos diretamente as tags que queremos selecionar, exemplo `p` para selecionar todo `

`. * **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`. * **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`. * **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. * **Pseudo-classes**: selecionamos elementos baseados em seus estados CSS. Por exemplo `:hover`, `:active`, `:checked` e outros. * **Seletores de Id**: selecionamos um elemento pela sua Id única. Só pode existir um único elemento para cada id. Exemplo: `

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

` ### Os pesos de cada seletor * **Peso mais baixo**: seletores de tipo e pseudo-elementos * **Peso baixo**: classe, atributo e pseudo-classes * **Peso médio**: seletores de id * **Peso alto**: estilos inline ### Regras de estilo aplicados **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). ```scss //

.foo { color: green; } .bar { color: red; // essa será a cor aplicada } ``` **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. ```scss .foo.bar { color: blue; // essa será a cor aplicada } .bar { color: red; } ``` **3.** Estilos de peso maior **sempre** irão prevalecer, não importa quantos elementos você colocar. Exemplo com id: ```scss #footer { background: red; // essa será a cor aplicada } div.class1.class2.class3.class4 { background: blue; } ``` Exemplo com inline: ```html #title { color: blue; }

Eu terei a cor Vermelha

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

Eu terei a cor Azul =)

``` Por 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. Caso 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. **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: ```html

Foo

Bar

``` E tivéssemos a seguinte regra css: ```scss #block > .text { color: red; } #block .text { color: green; // essa será a cor aplicada } ``` As duas regras possuem exatamente a mesma especificidade (id + classe), portanto, a regra mais embaixo será aplicada. ### Momento do teste Como 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 =) **Pergunta 1** ![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) **Pergunta 2** ![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) Se 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. ### Conclusão Espero 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. ================================================ FILE: posts/entendendo-testes-de-software.md ================================================ --- layout: post date: 2015-12-12T13:49:42.000Z title: Entendendo Testes de Software description: Para que servem os testes? O que eu ganho com eles? Que tipos de testes existem? O que fazer e o que não fazer. main-class: dev tags: - tdd - dev --- ## Índice * [Introdução](#intro) * [Qualidade de Software](#qualidade) * [Qualidade para o Cliente](#qualidade-cliente) * [Qualidade para o Chefe](#qualidade-chefe) * [Qualidade para o Desenvolvedor](#qualidade-dev) * [Test Driven Development (TDD)](#tdd) * [Ciclo de desenvolvimento com TDD](#ciclo) * [Por que poucos fazem TDD?](#poucos) * [O que ganho com TDD?](#ganho) * [Tipos de testes](#tipos) * [Teste Unitário (Unit Test)](#unit) * [Teste de Sanidade (Smoke Test)](#smoke) * [Teste de Integração (Integration Test)](#integracao) * [Teste de Aceitação (Acceptance Test)](#aceitacao) * [Mocks](#mocks) * [Dicas para se fazer melhores testes](#dicas) * [Ferramentas para testar](#ferramentas) * [JS](#tool-js) * [Python](#tool-python) * [Ruby](#tool-ruby) * [Conclusão](#conclusao)

Introdução

Fala 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. Enquanto eu vou escrevendo, vou ouvindo [Ghost B.C.](https://open.spotify.com/artist/1Qp56T7n950O3EGMsSl81D), uma banda bastante controversa, mas que passei a curtir bastante. Pega lá um cafézinho e vem comigo, sei que você não gosta de teoria, mas é importante saber umas coisinhas.

Qualidade de Software

Antes 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 Esse 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.

Qualidade para o cliente

Para 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: ![Foto de um cara sorrindo](https://willianjusten.github.io/imasters-2015/img/visao-cliente.gif)

Qualidade para o chefe

Já 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 é: ![Um homem deitado no dinheiro](https://willianjusten.github.io/imasters-2015/img/visao-chefe.gif)

Qualidade para o desenvolvedor

Nó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: ![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) Pensando 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.

Test Driven Development (TDD)

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. De 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. Neste 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.

Ciclo de desenvolvimento com TDD

![Flow de Desenvolvimento com TDD](https://willianjusten.github.io/imasters-2015/img/tdd_flow.gif) Todos 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: * `Red`: etapa inicial do TDD, onde você escreve um teste que falha, para alguma funcionalidade que você ainda vai escrever. * `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. * `Refactor`: etapa para eliminar códigos redundantes, remover acoplamentos e deixar o design de código mais legível.

Por que poucos fazem TDD?

Existem alguns pontos principais que os desenvolvedores falam, quando tentam justificar porque não fazem TDD: * `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? * `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.

O que ganho com TDD?

Bom, 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: ### Reduz o tempo gasto em depuração e correção de bugs Quando 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ão é desenvolvido código desnecessário Essa 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. ### Auxilia testes de regressão É 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. ### Melhora a qualidade do código O 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 é: > "Se são necessárias muitas linhas de código criando objetos para uma simples > asserção, então há algo de errado." Isso 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. ### Documentação pelos testes Os 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. ### Refatoração constante Como 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.

Tipos de testes

O 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: ![Pirâmide de testes](/assets/img/pyramid.png) Nessa 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. E 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. Existem outros vários tipos de testes, mas irei abordar os principais, que serão os utilizados no nosso dia-a-dia.

Teste Unitário (Unit Test)

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

Teste de Sanidade (Smoke Test)

Esse é 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.

Teste de Integração (Integration Test)

Teste 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. O 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.

Teste de Aceitação (Acceptance Test)

O 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.

Mocks

Os 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: Temos 2 métodos: * `buscaInfoProduto`: método que vai ao banco de dados e retorna um objeto contendo o nome e preço do produto. * `blackFriday`: método que pega o valor do produto, multiplica ele por 2 e retorna o objeto desse produto. Concorda 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? Sendo 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`.

Dicas para se fazer melhores testes

Já 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ão coloque a carroça na frente dos bois Sim, é 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. ### Trate código de teste como código de produção O 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. ### Evite acoplamento Quanto 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. ### Um teste de cada vez Esse é 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ão teste o desnecessário Por 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. ### Responsabilidade Única Isso 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.

Ferramentas para testar

Claro 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.

Javascript

* [Mocha](https://mochajs.org/) - bastante conhecido, altamente plugável e com várias features excelentes. * [Jasmine](http://jasmine.github.io/edge/introduction.html) - trabalha com BDD (behavior-driven development), ou seja, teste orientado a comportamento, bastante utilizado também. * [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. * [Tape](https://github.com/substack/tape) - criado pelo Substack, outro com proposta de ser bem pequenino, mas com bastante plugins. * [Jest](https://facebook.github.io/jest/) - criado pelo Facebook para realizar testes no React, trabalha em cima de Mocks por default. * [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. * [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. * [CasperJS](http://casperjs.org/) - permite rodar testes de aceitação usando headless browser (PhantomJS e SlimerJS), numa sintaxe bastante simples. * [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. * [Protractor](http://www.protractortest.org/#/) - outro para testes E2E, mais focado para o AngularJS.

Python

* [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. * [Pytest](http://pytest.org/latest/) - outra bastante utilizada no universo python, possui várias integrações e ótima sintaxe. * [Splinter](https://splinter.readthedocs.io/en/latest/) - criada por uma galera da Globo para realizar testes E2E, vale uma olhada. * [Locust](https://locust.io/) - ferramenta para teste de carga.

Ruby

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

Conclusão

Bom 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. ================================================ FILE: posts/erros-comuns-com-o-react-testing-library.md ================================================ --- layout: post date: 2020-05-11 10:44:51 image: /assets/img/testing-library-mistakes.jpg title: Erros comuns com o React Testing Library description: Aprenda com os erros dos outros e melhore seu código também. introduction: Aprenda com os erros dos outros e melhore seu código também. twitter_text: Aprenda com os erros dos outros e melhore seu código também. main-class: js color: "#D6BA32" tags: - react - testes - tdd --- ## Introdução Fala 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/). Há 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. Bom, 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. ## Notas Cada erro foi organizado pelo seguinte nível de importância: - `baixa`: é mais da opinião do Kent e você pode ignorar se quiser e não vai ter nenhum problema. - `média`: você pode começar a ver bugs, perder confiança nos testes ou fazendo trabalho que nem precisa. - `alta`: definitivamente veja isso. Muito provavelmente você está perdendo confiança dos testes e provavelmente terá testes problemáticos. ### Usar `wrapper` como nome da variável no retorno da função `render` > Importância: baixa ```javascript // ❌ const wrapper = render() wrapper.rerender() // ✅ const {rerender} = render() rerender() ``` O 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. **Dica: use destructure do que você precisa do `render` ou então chame de `view`** ### Usar `cleanup` > Importância: média ```javascript // ❌ import {render, screen, fireEvent, cleanup} from '@testing-library/react' afterEach(cleanup) // ✅ import {render, screen, fireEvent} from '@testing-library/react' ``` Já 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). **Dica: não use `cleanup`** ### Não estar usando `screen` > Importância: média ```javascript // ❌ const {getByRole} = render() const errorMessageNode = getByRole('alert') // ✅ render() const errorMessageNode = screen.getByRole('alert') ``` O `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`: ```javascript import {render, screen} from '@testing-library/react' ``` O 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ê. A única exceção para isso é se você estiver definindo um `container` ou `baseElement`, o que muito provavelmente você nem deveria estar fazendo. Você também pode usar `screen.debug` ao invés de `debug`. **Dica: use `screen` para queries e debug** ### Usar a asserção errada > Importância: alta ```javascript const button = screen.getByRole('button', {name: /disabled button/i}) // ❌ expect(button.disabled).toBe(true) // error message: // expect(received).toBe(expected) // Object.is equality // // Expected: true // Received: false // ✅ expect(button).toBeDisabled() // error message: // Received element is not disabled: // screen.getByText(/hello world/i) // ❌ falha com o seguinte erro: // Unable to find an element with the text: /hello world/i. This could be // because the text is broken up by multiple elements. In this case, you can // provide a function for your text matcher to make your matcher more flexible. screen.getByRole('button', {name: /hello world/i}) // ✅ funciona! ``` Uma 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! ```javascript // assumindo que temos essa estrutura de DOM para trabalhar // screen.getByRole('blah') ``` Isso irá falhar com a seguinte mensagem de erro: ```javascript TestingLibraryElementError: Unable to find an accessible element with the role "blah" Here are the accessible roles: document: Name "": -------------------------------------------------- button: Name "Hello World":
``` Repare 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... ### Adicionar `aria-`, `role` e outros atributos incorretamente > Importância: alta ```javascript // ❌ render() // ✅ render() ``` Tacando 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)). Se é 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). **Dica: evite adicionar atributos desnecessários ou incorretos** ### Não usar o `@testing-library/user-event` > Importância: média ```javascript // ❌ fireEvent.change(input, {target: {value: 'hello world'}}) // ✅ await userEvent.type(input, 'hello world') ``` O [@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`. Ainda 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`. **Dica: use o @testing-library/user-event no lugar do fireEvent sempre que possível.** ### Usar `query*` variantes para tudo exceto checar a não-existência > Importância: alta ```javascript // ❌ expect(screen.queryByRole('alert')).toBeInTheDocument() // ✅ expect(screen.getByRole('alert')).toBeInTheDocument() expect(screen.queryByRole('alert')).not.toBeInTheDocument() ``` A ú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. **Dica: só use `query*` variantes para fazer asserções de quando um elemento não deve ser encontrado.** ### Usar o `waitFor` para buscar elementos que podem ser buscados com `find*` > Importância: alta ```javascript // ❌ const submitButton = await waitFor(() => screen.getByRole('button', {name: /submit/i}), ) // ✅ const submitButton = await screen.findByRole('button', {name: /submit/i}) ``` Essas 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. **Dica: use `find*` sempre que você quiser buscar por algo que talvez não esteja disponível logo de início.** ### Passar uma callback vazia para o `waitFor` > Importância: alta ```javascript // ❌ await waitFor(() => {}) expect(window.fetch).toHaveBeenCalledWith('foo') expect(window.fetch).toHaveBeenCalledTimes(1) // ✅ await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo')) expect(window.fetch).toHaveBeenCalledTimes(1) ``` O 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. **Dica: espere pela específica asserção dentro do `waitFor`** ### Ter múltiplas asserções para uma mesma `waitFor` callback > Importância: baixa ```javascript // ❌ await waitFor(() => { expect(window.fetch).toHaveBeenCalledWith('foo') expect(window.fetch).toHaveBeenCalledTimes(1) }) // ✅ await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo')) expect(window.fetch).toHaveBeenCalledTimes(1) ``` Digamos 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. **Dica: use uma asserção por callback** ### Gerando efeitos colaterais com `waitFor` ```javascript // ❌ await waitFor(() => { fireEvent.keyDown(input, {key: 'ArrowDown'}) expect(screen.getAllByRole('listitem')).toHaveLength(3) }) // ✅ fireEvent.keyDown(input, {key: 'ArrowDown'}) await waitFor(() => { expect(screen.getAllByRole('listitem')).toHaveLength(3) }) ``` O `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! Isso 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`. **Dica: coloque os efeitos colaterais fora da callback do `waitFor` e reserve a callback somente para asserções.** ### Não usar os plugins do ESlint para a Testing Library > Importância: média Se você quiser evitar todos esses erros comuns, então esse plugins oficiais irão ajudar muito: - [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) - [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom) ## Conclusão A 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! ================================================ FILE: posts/esta-tudo-bem-nao-fazer-nada.md ================================================ --- layout: post date: 2023-08-07T08:00:40.000Z title: Está tudo bem não fazer nada description: Vivemos numa corrida sem fim e isso é cansativo! Dê seu tempo! main-class: misc tags: - vida - reflexão --- ## Introdução Quase 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. Esse 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? Bom, 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. ## A cobrança da produtividade Você já se pegou igual minha mãe falando? > Nossa, num fiz nada hoje. Bom, 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). Durante 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". Com 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. ## Dolce far niente Tem um filme bacaninha chamado "Comer, rezar e amar" que tem um trecho que acho super legal: Ele 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". Acho 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: > Está tudo bem não fazer nada ## Conclusão Confesso 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! E 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! ================================================ FILE: posts/estilizando-svg-com-css-parte-1.md ================================================ --- layout: post date: 2015-03-07T17:58:45.000Z title: "#7 - Estilizando SVG com CSS - Parte 1" description: Aprenda as diferentes formas de mudar o estilo de um SVG somente com CSS. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série Uffa, 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. Espero voltar a escrever com mais frequência, até porque tem muita coisa legal para aprendermos em SVG ainda! També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. ## Introdução Como 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/). No [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. ## Propriedades de Estilo Para 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. ![Propriedades em SVG e CSS](/assets/img/estilizando-svg/svg-properties.png) Se 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). ## Métodos para estilizar ### Estilo inline ```html ``` Note 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. ### Estilo dentro do SVG ```html ``` Bastante útil quando se deseja componentizar um elemento SVG, visto que sua estrutura e todo o seu estilo pode ser facilmente movimentado entre sistemas diferentes. ### Estilo fora do SVG ```html ... ``` Nã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. ### Estilos externos ```html ``` Quando 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 `` ## Peso das propriedades ![Peso das propriedades](/assets/img/estilizando-svg/css-specificity.jpg) Na 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:

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

Como 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 =) Entendendo 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á. ================================================ FILE: posts/estilizando-svg-com-css-parte-2.md ================================================ --- layout: post date: 2015-03-08T15:58:00.000Z title: "#8 - Estilizando SVG com CSS - Parte 2" description: Aprenda quais as propriedades que o SVG possui e como trabalhar com elas. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série 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. ## Introdução Hoje 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 =) No [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. **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/) ## Propriedade Fill Como 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.

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

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

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

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

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

## Propriedade Stroke-dasharray O atributo `stroke-dasharray` transforma os caminhos em traços ao invés de linhas sólidas. Com o atributo você pode especificar o tamanho do traço, assim como a distância entre eles, separados por vírgulas ou espaços. No 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`. Para 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.

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

## Propriedade Stroke-linecap O `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`. De acordo com o exemplo abaixo, podemos observar o seguinte: - `butt`: irá cortar a ponta exatamente na sua espessura, deixando a ponta quadrada. - `round`: irá deixar as pontas arredondas, acrescentando um "padding" nas pontas. - `square`: irá deixar a ponta quadrada, acrescentando um "padding" nas pontas.

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

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

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

## Conclusão Essas 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? No 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/)? ================================================ FILE: posts/exemplos-de-sites-com-parallax.md ================================================ --- layout: post date: 2016-05-08T13:16:24.000Z title: Exemplos de sites com Parallax description: Se inspire com alguns sites feitos usando a técnica do parallax. main-class: css tags: - css - frontend - parallax categories: null --- ## Introdução Fala 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. Enquanto vou escrevendo, vou ouvindo um bom som na playlist [Volume Máximo](https://open.spotify.com/playlist/37i9dQZF1DX4908CEYEdlz?si=GvxYazSLTA6iHzAv0oi77w) do Spotify. ## O efeito parallax O 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". Hoje 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. Segue aqui um vídeo do próprio Walt Disney explicando como funciona esse efeito tão interessante: ## Exemplos ### Alquimia WRG ![Alquimia WRG](/assets/img/parallax-sites/alquimia.png) Animação de background baseada no movimento do mouse. [Vá para o site](http://www.alquimiawrg.com/#/home) ### Scroll for your Health ![Scroll for your Health](/assets/img/parallax-sites/health.png) Scrolls que desenham ilustrações de cores sólidas pela tela. [Vá para o site](http://tomerlerner.com/web/scroll/index.html) ### Mélanie F - Slippers for children ![Mélanie F - Slippers for children](/assets/img/parallax-sites/melanie.png) Objetos com movimentações em tempos/velocidades diferentes ao decorrer da tela. [Vá para o site](http://melanie-f.com/en/) ### Giampiero Bodino - Italian High Jewellery ![Giampiero Bodino - Italian High Jewellery](/assets/img/parallax-sites/giam.png) Várias ilustrações em camadas diferentes que são movimentadas baseadas no drag. [Vá para o site](http://www.giampierobodino.com/) ### Anton & Irene ![Anton & Irene](/assets/img/parallax-sites/anton.png) Site simples, com animações de hide/show/movimentação de acordo com o scroll. [Vá para o site](http://antonandirene.com/) ### Werkstatt - l'atelier interactif ![Werkstatt - l'atelier interactif](/assets/img/parallax-sites/latellier.png) Interaçã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) ### Giacomorelli ![Giacomorelli](/assets/img/parallax-sites/giaco.png) Mais um site com parallax utilizando a ideia de movimentação via mouse. [Vá para o site](http://www.giacomorelli.com/) ### Social King. Social Media Studio ![Social King. Social Media Studio](/assets/img/parallax-sites/king.png) Site carregado de objetos em diferentes profundidades e movimentações. [Vá para o site](http://socialking.ru/eng) ### You waste a lot of time at work ![You waste a lot of time at work](/assets/img/parallax-sites/work.png) Esse 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) ### Make your money matter ![Make your money matter](/assets/img/parallax-sites/money.png) Site em ilustração contando uma história a partir do scroll. [Vá para o site](http://makeyourmoneymatter.org/) ### Every last drop ![Every last drop](/assets/img/parallax-sites/drop.png) Site em ilustração contando uma história a partir do scroll. [Vá para o site](http://everylastdrop.co.uk/) ### The Arnold Clark Savings Challenge ![The Arnold Clark Savings Challenge](/assets/img/parallax-sites/arnold.png) Site utilizando scroll para animar e montar um infográfico. [Vá para o site](http://www.arnoldclark.com/challenge/) ### Rumchata.com ![Rumchata.com](/assets/img/parallax-sites/rum.png) Animações sutis nos elementos enquanto é feito o scroll. [Vá para o site](http://www.rumchata.com/) ## Conclusão Bom 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 Então espero que tenha bastante gente que goste desse tipo de coisa também. ================================================ FILE: posts/falando-sobre-rscss.md ================================================ --- layout: post date: 2016-02-07T20:48:16.000Z title: Falando sobre RSCSS description: Escrevendo CSS sem perder a sanidade. Aprenda uma metodologia que pode salvar muitas dores de cabeça. main-class: css tags: - css - metodologia - frontend categories: null --- ## Índice - [Introdução](#intro) - [O que vem a ser o RSCSS?](#oq-vem) - [Por que usar metodologias?](#por-que) - [Escrevendo CSS](#escrevendo) - [Tentando melhorar...](#tentando) - [E se existisse uma maneira de ter os dois limpos?](#e-se) - [Trabalhando com RSCSS](#trab-rscss) - [1. Tudo é um componente ](#comp) - [1.1 Nomeando Componentes](#comp-name) - [2. Elementos](#elementos) - [2.1 Nomeando elementos](#elementos-name) - [2.2 Elementos seletores](#elementos-seletores) - [2.3 Múltiplas palavras](#elementos-multiplas-palavras) - [2.4 Evite usar tags como seletores](#elementos-evite-tags) - [3. Variações](#variacoes) - [3.1 Nomeando variações](#variacoes-name) - [3.2 Variações nos elementos](#variacoes-elementos) - [3.3 Por que usar prefixos com traço?](#variacoes-tracos) - [4. Componentes aninhados (nested)](#componentes-nested) - [4.1 Variações](#nested-variacoes) - [4.2 Simplifique componentes internos](#nested-simplifique) - [5. Layouts](#layouts) - [5.1 Evite propriedades de posicionamento](#layouts-evite) - [5.2 Defina posicionamento nos pais](#layouts-posicionamento) - [6. Helpers](#helpers) - [7. Estrutura CSS](#estrutura-css) - [Exemplo](#exemplo) - [Conclusão](#conclusao)

Introdução

Hey 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. O 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! Resolvi fazer esse post por alguns motivos e eles foram: - Fixar um pouco da metodologia (sim! eu uso meu blog para estudar, você deveria também =p) - Não achei NADA em português! - Por que não fazer? xD O 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 =) Eu 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.

O que vem a ser o RSCSS?

Quanto 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: - O que essa classe significa? - Essa classe está sendo utilizada? - Se eu fizer uma classe X, será que ela vai dar conflito? O **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.

Por que usar metodologias?

O 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. Existem 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...

Escrevendo CSS

O 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. Atire a primeira pedra quem nunca fez um grande uso de nesting como: ```scss .nav { ul { li { a { ... } } } } ``` O problema de se fazer isso ali, é que quando temos um grande número de propriedades, a leitura já começa a ficar dificultada, como: ```scss .nav { width: 100%; padding: 10px 25px; position: fixed; ul { max-width: 940px; li { display: inline-block; border: 1px solid #ccc; padding: 10px 50px; a { color: #333; &:hover { text-decoration: none; } } } } } ``` Sem contar a dificuldade de leitura daquilo ali, ainda estamos gerando um código assim: ```css .nav ul li a { ...; } ``` Isso é 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. Outro 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. Pensando no exemplo de um card, usando esse tipo de abordagem de nesting, acabaríamos criando algo mais ou menos assim: ![Abordagem de nesting na criação de um card](/assets/img/rscss/nesting-card.png)

Tentando melhorar...

Tentando 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: ![Abordagem utilizando BEM](/assets/img/rscss/bem-css.png) O 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. ![Dirty HTML usando BEM](/assets/img/rscss/dirty-html.png) Olhando a abordagem inicial de css nativo (nesting) e essa abordagem do BEM, podemos ter um gráfico assim: ![Gráfico mostrando como funciona com BEM e CSS puro](/assets/img/rscss/css-cleanliness-chart.png) Se 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.

E se existisse uma maneira de ter os dois limpos?

Dessa 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. O mesmo exemplo do card usando essa metodologia ficaria: ![Abordagem do RSCSS](/assets/img/rscss/rscss.png)

Trabalhando com RSCSS

1. Tudo é um componente

A 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: ![Search Form dentro de uma navbar](/assets/img/rscss/component-example.png)

1.1 Nomeando Componentes

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

2. Elementos

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

2.1 Nomeando elementos

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

2.2 Elementos seletores

Prefira 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. ```scss .article-card { .title { /* bom */ } > .author { /* melhor ainda */ } } ```

2.3 Múltiplas palavras

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

2.4 Evite usar tags como seletores

Use 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. ```scss .article-card { > h3 { /* ✗ evite */ } > .name { /* ✓ melhor */ } } ```

3. Variações

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

3.1 Nomeando variações

As 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`. ```scss .like-button { &.-wide { /* ... */ } &.-short { /* ... */ } &.-disabled { /* ... */ } } ```

3.2 Variações nos elementos

Assim 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. ```scss .shopping-card { > .title { /* ... */ } > .title.-small { /* ... */ } } ```

3.3 Por que usar prefixos com traço?

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

4. Componentes aninhados (nested)

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

...

...

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

4.1 Variações

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

4.2 Simplifique componentes internos

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

5. Layouts

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

5.1 Evite propriedades de posicionamento

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

5.2 Defina posicionamento nos pais

Se 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. ```scss .article-list { & { @include clearfix; } > .article-card { width: 33.3%; float: left; } } .article-card { & { /* ... */ } > .image { /* ... */ } > .title { /* ... */ } > .category { /* ... */ } } ```

6. Helpers

Essas 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. ```scss ._unmargin { margin: 0 !important; } ._center { text-align: center !important; } ._pull-left { float: left !important; } ._pull-right { float: right !important; } ```

7. Estrutura CSS

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

Exemplo

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

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

Repare 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.

Conclusão

Bom 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. Outro 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. ================================================ FILE: posts/fazendo-o-browser-falar-por-voce-web-speech-api.md ================================================ --- layout: post date: 2021-02-21T08:18:25.000Z title: Fazendo o browser falar por você - Web Speech API description: Nesse post eu vou mostrar como utilizei a Web Speech API para meu projeto Japanese Words. main-class: js tags: - Dica categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Apresentando o Japanese Words Atualmente 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 Mas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras. ## Web Speech API Você 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. Os passos são: - 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) ```javascript const voices = window.speechSynthesis?.getVoices() ``` - 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. ```javascript const jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang)) ``` - 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. ```javascript const utterance = new SpeechSynthesisUtterance() utterance.text = word // word é a palavra que desejamos pronunciar utterance.lang = 'ja-JP' // língua a pronunciar utterance.voice = voice // voz defina acima utterance.rate = 0.8 // velocidade de fala ``` - 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) ```javascript window.speechSynthesis.speak(utterance) ``` ## Conclusão E 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. ================================================ FILE: posts/feito-e-melhor-que-perfeito.md ================================================ --- layout: post date: 2023-07-11T15:27:13.000Z title: Feito é melhor que perfeito description: Já se sentiu tão travado que não conseguiu entregar algo? Talvez esse post seja útil. main-class: misc tags: - dev - lifestyle --- ## Introdução Nossa, 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. Continuando 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. ## Paralisia da perfeição Se você leu o título, com certeza já ouviu a frase: > Feito é melhor que perfeito. Mas o porquê dessa frase e como isso assombra tanto os programadores, principalmente os iniciantes? Antes 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. O 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ã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. ## Vantagens e perigos de querer o perfeito Nem 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. ### Equilíbrio é tudo Tendo 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. ### O ego é o mau de tudo Tem 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. Já 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: > Ah não Will, nada a ver, nem me preocupo com os outros. Tem 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. Como 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. ## Aprenda em público Esse é 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! Para 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. Quando 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. E 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. ## Lance rápido, falhe rápido e aprenda Por 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. Portanto, 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**. Um 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. ## Conclusão Espero 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. També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. Se 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. ================================================ FILE: posts/filtros-css.md ================================================ --- layout: post date: 2015-07-26T20:30:23.000Z title: Filtros CSS description: Transforme o seu browser no seu próprio photoshop e aplique filtros somente com css. main-class: css tags: - css - tutorial categories: null --- ## Introdução Antes 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 =) Já 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. O 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. ## Filtros Cada 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. ## Compatibilidade Os 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 ## Como utilizar os filtros? Para 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: ```css .minha-imagem { -webkit-filter: grayscale(100%); // suporte Chrome, Safari, Android, Opera filter: grayscale(100%); // suporte para Firefox } ``` Mais de um filtro pode ser aplicado numa mesma imagem também, ficando assim: ```css .minha-imagem { -webkit-filter: grayscale(100%) blur(5px); filter: grayscale(100%) blur(5px); } ``` ## Diferentes tipos de filtros No 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: --- ### Grayscale Serve para aplicar um filtro preto e branco nas imagens e pode ir de `0` a `1` ou de `0%` a `100%`. ```css .imagem-1 { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .imagem-2 { -webkit-filter: grayscale(.7); filter: grayscale(.7); } ``` Imagem com escala de cinza 100% Imagem com escala de cinza 70% --- ### Sepia Para dar aquele aspecto de foto envelhecida, o funcionamento é o mesmo do `grayscale`. ```css .imagem-1 { -webkit-filter: sepia(100%); filter: sepia(100%); } .imagem-2 { -webkit-filter: sepia(.7); filter: sepia(.7); } ``` Imagem com escala de sepia 100% Imagem com escala de sepia 70% --- ### Blur Eu 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. ```css .imagem-1 { -webkit-filter: blur(3px); filter: blur(3px); } .imagem-2 { -webkit-filter: blur(30px); filter: blur(30px); } ``` Imagem com blur de 3px Imagem com blur de 30px --- ### Saturate A 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. ```css .imagem-1 { -webkit-filter: saturate(50%); filter: saturate(50%); } .imagem-2 { -webkit-filter: saturate(500%); filter: saturate(500%); } ``` Imagem com saturação de 50% Imagem com saturação de 500% --- ### Contrast Bem parecido com o `saturate`, ele também recebe valores em `%` e quanto maior o seu valor, mais intensas são as cores. ```css .imagem-1 { -webkit-filter: contrast(50%); filter: contrast(50%); } .imagem-2 { -webkit-filter: contrast(500%); filter: contrast(500%); } ``` Imagem com contraste de 50% Imagem com constraste de 500% --- ### Brightness Essa propriedade como o nome já diz, aumenta ou diminui o brilho da imagem e recebe valores em `%`. ```css .imagem-1 { -webkit-filter: brightness(50%); filter: brightness(50%); } .imagem-2 { -webkit-filter: brightness(500%); filter: brightness(500%); } ``` Imagem com brilho de 50% Imagem com brilho de 500% --- ### Hue-rotation Como 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`. ```css .imagem-1 { -webkit-filter: hue-rotate(45deg); filter: hue-rotate(45deg); } .imagem-2 { -webkit-filter: hue-rotate(120deg); filter: hue-rotate(120deg); } ``` Imagem com hue-rotate(45) Imagem com hue-rotate(120) --- ### Invert Aquele 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%`. ```css .imagem-1 { -webkit-filter: invert(100%); filter: invert(100%); } ``` Imagem com invert(100) --- ### Opacity Serve 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. ```css .imagem-1 { -webkit-filter: opacity(50%); filter: opacity(50%); } ``` --- Imagem com opacidade de 50% ### Drop-shadow També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)`. ```css .imagem-1 { -webkit-filter: drop-shadow(10px 10px 5px #000); filter: drop-shadow(10px 10px 5px #000); } ``` Imagem com drop-shadow --- ## Ah, mas eu prefiro Photoshop... Entã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`. Imagem com cinza e blur ## Conclusão Esse 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. ================================================ FILE: posts/formatando-datas-com-js-puro.md ================================================ --- layout: post date: 2021-02-18T15:49:00.000Z title: Formatando datas com JS puro description: Nem sempre precisamos de bibliotecas enormes para resolver um problema simples. main-class: js tags: - dicas categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando o poder do Intl.DateTimeFormat() Antigamente 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. Vamos ver abaixo alguns exemplos na prática: ```javascript // Digamos que a gente tenha a seguinte data const today = new Date(); // Thu Feb 18 2021 12:55:04 GMT-0300 (Brasilia Standard Time) // Para converter no formato mais simples do Brasil => 18/02/2021 console.log(new Intl.DateTimeFormat('pt-BR').format(date)); // Para converter em => 18 de fev. de 2021 console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric'} ).format(today)); // Para converter com mês completo => 18 de fevereiro de 2021 console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today)); // Para converter em inglês => February 18, 2021 console.log(new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today)); // Convertendo horas com timeZone => 12:55 AM GMT+9 console.log(new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', timeZone: 'Asia/Tokyo', timeZoneName: 'short'} ).format(today)); ``` ## Conclusão E 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. ================================================ FILE: posts/formatando-numero-em-dinheiro-com-js-puro.md ================================================ --- layout: post date: 2021-02-18T15:35:11.000Z title: Formatando número em dinheiro com JS puro description: Evite usar bibliotecas externas para coisas simples como formatar números em dinheiro. main-class: js tags: - dicas categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando o poder do Intl.NumberFormat() Antigamente 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. Vamos ver abaixo alguns exemplos na prática: ```javascript // Digamos que a gente tenha o seguinte número const money = 1234567.89; // Para converter em Real ( retorna => R$ 1.234.567,89 ) console.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money)); // Para converter em Euros ( retorna => 1.234.567,89 € ) console.log(new Intl.NumberFormat('de-De', { style: 'currency', currency: 'EUR' }).format(money)); // Para converter em Yenes ( retorna => ￥1,234,567 ) console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money)); ``` ## Conclusão E 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. ================================================ FILE: posts/fundamentos-javascript-antes-de-aprender-react.md ================================================ --- layout: post date: 2019-01-04T04:26:13.000Z title: Fundamentos JavaScript antes de aprender React description: Na necessidade você pode ir direto para o React sem saber alguns conceitos e se complicar ainda mais. Esse post pode te ajudar nisso. main-class: js tags: - react - js - es6 --- ## Introdução Fala 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. No [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. O 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. Se 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. Vá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. Enquanto 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. Bom, vamos lá, vou separar os tópicos aqui, para facilitar um pouquinho: - [Primeiro contato com React](#primeiro-contato-com-react) - [React e Classes no JavaScript](#react-e-classes-no-javascript) - [Template Literals](#template-literals) - [Arrow Functions](#arrow-functions) - [Funções como componentes no React](#funções-como-componentes-no-react) - [Sintaxe do React Class Component](#sintaxe-do-react-class-component) - [Map, Reduce e Filter no React](#map-reduce-e-filter-no-react) - [Operador Ternário no React](#operador-ternário-no-react) - [Importando e Exportando no React](#importando-e-exportando-no-react) - [Funções de Ordem Superior](#funções-de-ordem-superior) - [Funções de Ordem Superior no React](#funções-de-ordem-superior-no-react) - [Destructuring e Spread Operators](#destructuring-e-spread-operators) - [Conclusão](#conclusão) ## Primeiro contato com React Quando 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. Mas quando você vai ver os arquivos, é bem possível que dê de cara com um código como: ```jsx import React, { Component } from 'react' import logo from './logo.svg' import './App.css' class App extends Component { render() { return (
logo

Edit src/App.js and save to reload.

Learn React
) } } export default App ``` E 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. ## React e Classes no JavaScript Antes 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. Para entender melhor as classes, vamos usar sem o React no seguinte código abaixo: ```js class Developer { constructor(firstname, lastname) { this.firstname = firstname this.lastname = lastname } getName() { return `${this.firstname} ${this.lastname}` } } const me = new Developer('Willian', 'Justen') console.log(me.getName()) // "Willian Justen" ``` A 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. Para 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. Uma 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`. A 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`. As 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`. ```js class Developer { constructor(firstname, lastname) { this.firstname = firstname this.lastname = lastname } getName() { return `${this.firstname} ${this.lastname}` } } class ReactDeveloper extends Developer { getJob() { return 'React Developer' } } var me = new ReactDeveloper('Robin', 'Wieruch') console.log(me.getName()) console.log(me.getJob()) ``` Repare 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`. E 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`. ```jsx import React, { Component } from 'react' class App extends Component { render() { return (

Welcome to React

) } } export default App ``` E é 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`. Bom, 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). ## Template Literals Uma 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: ```js getName() { return `${this.firstname} ${this.lastname}`; } // forma antiga getName() { return this.firstname + ' ' + this.lastname; } ``` ## Arrow Functions Outra 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: ```js // Função em ES5 function getGreeting() { return 'Welcome to JavaScript' } // Função em ES6 com {} e por isso o return obrigatório const getGreeting = () => { return 'Welcome to JavaScript' } // Função em ES6 sem {} e return implícito const getGreeting = () => 'Welcome to JavaScript' ``` Se 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. ## Funções como componentes no React O 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`. Por 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. Os `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`. ```jsx // Função normal function Greeting(props) { return

{props.greeting}

} // Arrow Function com {} e return const Greeting = props => { return

{props.greeting}

} // Arrow Function sem {} e return implícito const Greeting = props =>

{props.greeting}

``` ## Sintaxe do React Class Component As 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`. E 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: ```jsx class Counter extends Component { constructor(props) { super(props) this.state = { counter: 0 } this.onIncrement = this.onIncrement.bind(this) this.onDecrement = this.onDecrement.bind(this) } onIncrement() { this.setState(state => ({ counter: state.counter + 1 })) } onDecrement() { this.setState(state => ({ counter: state.counter - 1 })) } render() { return (

{this.state.counter}

) } } ``` Onde 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: ```jsx class Counter extends Component { state = { counter: 0 } onIncrement = () => { this.setState(state => ({ counter: state.counter + 1 })) } onDecrement = () => { this.setState(state => ({ counter: state.counter - 1 })) } render() { return (

{this.state.counter}

) } } ``` ## Map, Reduce e Filter no React No 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ê? Simples, 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`). Um exemplo com o `map` para renderizar uma lista de items seria: ```jsx import React, { Component } from 'react' class App extends Component { render() { var users = [{ name: 'Robin' }, { name: 'Markus' }] return (
    {users.map(function (user) { return
  • {user.name}
    • })}
) } } export default App ``` Para deixar ainda mais limpo, podemos fazer o uso da Arrow Function e criar a mesma coisa em somente uma linha: ```jsx import React, { Component } from 'react' class App extends Component { render() { var users = [{ name: 'Robin' }, { name: 'Markus' }] return (
    {users.map(user => (
  • {user.name}
    • ))}
) } } export default App ``` E, como disse anteriormente, não só o `map` ajuda, mas funções como o `filter` também são geniais, como no exemplo abaixo: ```jsx import React, { Component } from 'react' class App extends Component { render() { var users = [ { name: 'Robin', isDeveloper: true }, { name: 'Markus', isDeveloper: false } ] return (
    {users .filter(user => user.isDeveloper) .map(user => (
  • {user.name}
    • ))}
) } } export default App ``` Se você quiser ler mais sobre os métodos, segue aqui a documentação: - [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - [Filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - [Reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) ## Operador Ternário no React No 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. ```jsx import React, { Component } from 'react' class App extends Component { render() { const users = [{ name: 'Robin' }, { name: 'Markus' }] const showUsers = false if (!showUsers) { return null } return (
    {users.map(user => (
  • {user.name}
    • ))}
) } } export default App ``` Entretanto, 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: ```jsx import React, { Component } from 'react' class App extends Component { render() { const users = [{ name: 'Robin' }, { name: 'Markus' }] const showUsers = false return (
{showUsers ? (
    {users.map(user => (
  • {user.name}
    • ))}
) : null}
) } } export default App ``` Outra forma de fazer, só retornando um dos lados da condicional, é usando o operador `&&`, da seguinte forma: ```jsx import React, { Component } from 'react' class App extends Component { render() { const users = [{ name: 'Robin' }, { name: 'Markus' }] const showUsers = false return (
{showUsers && (
    {users.map(user => (
  • {user.name}
    • ))}
)}
) } } export default App ``` Repare que caso o `showUsers` seja falso, nada irá aparecer, não precisando escrever o `: null` feito anteriormente. ## Importando e Exportando no React Tá 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? Começaremos a falar pelos `exports`, que já irão explicar os `imports` diretamente. Nós possuímos 2 tipos de `exports`, que são: - `named exports`: que são utilizados para exportar diversos métodos/valores de dentro de um mesmo arquivo. ```js const firstname = 'Robin' const lastname = 'Wieruch' export { firstname, lastname } ``` Repare 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`. ```js // Importando diretamente valor a valor, para isso é necessário o uso de chaves import { firstname, lastname } from './file1.js' console.log(firstname) // "Robin" // Importando todos os valores e atribuindo a um objeto import * as person from './file1.js' console.log(person.firstname) // "Robin" // Importando somente um valor, mas atribuindo um alias para o valor import { firstname as username } from './file1.js' console.log(username) // "Robin" ``` Cada uma das formas de importar tem suas vantagens. - Importar um objeto inteiro facilita para identificar de forma rápida de onde está vindo. - 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. - Importar valor a valor permite que não importemos coisas que não iremos utilizar naquele momento. A 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: ```js const robin = { firstname: 'Robin', lastname: 'Wieruch' } export default robin ``` E na hora de importar, podemos utilizar um nome qualquer que não `robin`: ```js import developer from './file1.js' console.log(developer) // output: { firstname: 'Robin', lastname: 'Wieruch' } ``` ## Funções de Ordem Superior As 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. Talvez 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.` Vamos dar uma olhada no map novamente: ```js const collection = ['Willian', 'Jonas', 'Marcio'] // Usando Função ES5 collection.map(function (person) { return `${person} Developer` // Output: ["Willian Developer", "Jonas Developer", "Marcio Developer"] }) // Usando Arrow Function com {} e return collection.map(person => { return `${person} Developer` // Output: ["Willian Developer", "Jonas Developer", "Marcio Developer"] }) // Usando Arrow Function e return implícito collection.map(person => `${person} Developer`) // Output: ["Willian Developer", "Jonas Developer", "Marcio Developer"] ``` Repare 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. Para 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. ## Funções de Ordem Superior no React Como 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`. Um exemplo, você pode criar um HOC que deixa tudo que é passado em maiúsculo. ```jsx const yell = (PassedComponent) => ({ children, ...props }) => {children.toUpperCase()}! const Title = (props) =>

{props.children}

const AngryTitle = yell(Title) Whatever // Output:

WHATEVER!

``` Alguns 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. Temos 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. Temos também o componente `Title` que recebe um atributo e o imprime na tela entre `

` de forma bem simples. E 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`. Dessa 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. Isso 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. Outra 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: ```jsx export const doIncrement = state => ({ counter: state.counter + 1 }) export const doDecrement = state => ({ counter: state.counter - 1 }) class Counter extends Component { state = { counter: 0 } onIncrement = () => { this.setState(doIncrement) } onDecrement = () => { this.setState(doDecrement) } render() { return (

{this.state.counter}

) } } ``` Repare 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. ## Destructuring e Spread Operators Um 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. ```js // sem destructuring const users = this.state.users const counter = this.state.counter // com destructuring const { users, counter } = this.state ``` Ali 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. ```jsx // sem destructuring function Greeting(props) { return

{props.greeting}

} // com destructuring function Greeting({ greeting }) { return

{greeting}

} ``` E 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. ```js const { users, ...rest } = this.state ``` Ali 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. ## Conclusão Bom 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. Se você acha que faltou algum detalhe ou tem outras referências legais, bota aí nos comentários! =) ================================================ FILE: posts/gatsby-e-nextjs-performance-e-developer-experience.md ================================================ --- layout: post date: 2021-07-06T15:27:07.000Z title: "Gatsby e NextJS: Performance e Developer Experience" description: Uma breve comparação entre os frameworks e a experiência de desenvolvimento. main-class: js tags: - nextjs - gatsby - blog categories: - NextJS --- ## Introdução Fala 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. Então chega de enrolar, bota para tocar a [banda Red](https://open.spotify.com/artist/01crEa9G3pNpXZ5m7wuHOk?si=UldtaNAuTe6MwLVKhBe1lg&dl_branch=1) e vem comigo! ## Performance Ao 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.. Segue aqui as notas do meu blog usando o **Gatsby**: ![Indica Nota 99 - 1.64 FCP e 1.74 LCP](/assets/img/gatsby-perf.png) Agora segue a nota do blog atual com **NextJS:** ![Nota 100: 1.48 FCP e 1.49 LCP](/assets/img/next-perf.png) Como 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! Eu 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! ## Processo de Build É 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. Para efeitos comparativos, eu utilizei a mesma máquina para gerar os builds. ```sh # Minha configuração Ryzen 9 3950x - 16 cores - 4.7Ghz 64Gb ram DDR5 3200mHZ ssd m1 nvme 1Tb - 3500Mb/s leitura | 2300Mb/s escrita Windows 11 WSL2 ``` E quanto as informações de conteúdo, eu tenho cerca 190 páginas somando posts e páginas normais. Vamos aos builds! Ignorem o formato do log do build e se atentem ao **tempo de build**. Segue primeiro o do Gatsby: ![Tempo de build: 98.23s](/assets/img/gatsby-build.jpeg) E agora o build do NextJS com exatamente o mesmo conteúdo e mesmo layout. ![Tempo de build 3.93s](/assets/img/next-build.jpeg) Sim! É 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! Mas talvez você venha e fale: > Ah Willian, mas seu PC é da Nasa, quero ver na Vercel/Netlify Pois então, segue aqui o tempo de build, consegue adivinhar qual é qual? ![Um dos builds teve 3min e outro teve 58s](/assets/img/build-vercel.png) Pois é, 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. ## Developer Experience E 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: - [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** - [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** - [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** - [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** E agora vamos falar do Gatsby: - [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**. Acho 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. ### Modelo de Plugins x Genérico Aqui 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. Eu 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. Por 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. E 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**. ## Conclusão Como minha mãe sempre diz: > O que seria do azul se todo mundo só gostasse do verde? Como 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. E você? O que acha dessas duas ferramentas? Compartilha esse post entre seus amigos e levante essa discussão sobre Developer Experience, é bem legal! ================================================ FILE: posts/guia-como-contribuir-em-open-source.md ================================================ --- layout: post date: 2018-02-08T21:01:03.000Z title: "Guia: Como contribuir em Open Source" description: Quer contribuir em open source e não sabe como e nem por onde começar? Esse pequeno guia pode te ajudar. main-class: dev tags: - opensource - git - github --- ## Índice - [Introdução](#introducão) - [O que é Open Source?](#o-que-é-open-source) - [Livre redistribuição](#livre-redistribuição) - [Trabalhos derivados](#trabalhos-derivados) - [Sem discriminação contra pessoas ou grupos](#sem-discriminacao-contra-pessoas-ou-grupos) - [Por que contribuir?](#por-que-contribuir) - [Melhorar seus conhecimentos](#melhorar-seus-conhecimentos) - [Ensinar e aprender](#ensinar-e-aprender) - [Criar uma boa imagem e ajudar na carreira](#criar-uma-boa-imagem-e-ajudar-na-carreira) - [Como contribuir?](#como-contribuir) - [Você gosta de design?](#voce-gosta-de-design) - [Você gosta de planejar eventos?](#voce-gosta-de-planejar-eventos) - [Você gosta de escrever?](#voce-gosta-de-escrever) - [Você gosta de organização?](#voce-gosta-de-organização) - [Você gosta de codar?](#voce-gosta-de-codar) - [Você gosta de ajudar pessoas?](#voce-gosta-de-ajudar-pessoas) - [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) - [Orientando-se para um novo projeto](#orientando-se-para-um-novo-projeto) - [Anatomia básica de um projeto open source](#anatomia-basica-de-um-projeto-open-source) - [Encontrando um projeto para contribuir](#encontrando-um-projeto-para-contribuir) - [Buscas diretas no Github](#buscas-diretas-no-github) - [Ferramentas para buscar projetos](#ferramentas-para-buscar-projetos) - [Uma checklist para antes de contribuir](#uma-checklist-para-antes-de-contribuir) - [Como submeter uma contribuição?](#como-submeter-uma-contribuicao) - [Comunique efetivamente](#comunique-efetivamente) - [Faça seu dever de casa antes](#faça-seu-dever-de-casa-antes) - [Faça seus pedidos de forma curta e direta](#faça-seus-pedidos-de-forma-curta-e-direta) - [Mantenha toda comunicação pública](#mantenha-toda-comunicação-pública) - [Respeite as decisões do projeto](#respeite-as-decisoes-do-projeto) - [Abrindo uma Issue](#abrindo-uma-issue) - [Abrindo um Pull Request](#abrindo-um-pull-request) - [O que acontece depois?](#o-que-acontece-depois) - [Você não recebe uma resposta](#voce-nao-recebe-uma-resposta) - [Respondem e pedem mudanças](#respondem-e-pedem-mudancas) - [Sua contribuição não foi aceita](#sua-contribuição-nao-foi-aceita) - [Sua contribuição foi aceita](#sua-contribuiçao-foi-aceita) - [Mais alguns artigos que podem lhe ajudar](#mais-alguns-artigos-que-podem-lhe-ajudar) - [Conclusão](#conclusão) ## Introdução Olá 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. Enquanto 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! ## O que é Open Source? > Muita gente acha que open source significa só o acesso ao código fonte de um projeto. Mas `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: ### Livre redistribuição A 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. ### Trabalhos derivados A 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. ### Sem discriminação contra pessoas ou grupos Exatamente, algo que muita gente pode não saber. Mas a licença não pode discriminar nenhuma pessoa ou grupo de pessoas. --- Bom, 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. ## Por que contribuir? Contribuir com o open source pode ser recompensador! Uma maneira de aprender, ensinar e ter uma experiência talvez nunca imaginada. E algumas razões: ### Melhorar seus conhecimentos Se 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? ### Ensinar e aprender A 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 =) ### Criar uma boa imagem e ajudar na carreira Pense 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". ## Como contribuir? A primeira e mais importante regra é: > Existem várias formas de contribuir e fazer código é só UMA delas. É 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? Seguem abaixo formas de você contribuir com o Open Source e também com a comunidade ao redor: ### Você gosta de design? - 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. - Ajude a melhorar a usabilidade e/ou acessibilidade de algum projeto já existente. - Teste, futuque, procure por bugs e os reporte! Isso é extremamente importante para nós. ### Você gosta de planejar eventos? > Ué? Pensei que estávamos falando de código. Como 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? - Ajude a organizar eventos e/ou meetups na sua cidade. - Ajude as pessoas a encontrarem eventos bons e interessantes para elas. ### Você gosta de escrever? - Ajude na documentação de um projeto (isso é **muito** importante). - Escreva tutoriais sobre o projeto. - Faça traduções de documentações. ### Você gosta de organização? - Mostre issues duplicadas, crie novas labels para issues, organize. - Vá atrás de issues antigas e veja se elas ainda fazem sentido, senão peça para fechá-las. - Crie discussões dentro dos projetos para que faça ele ir para frente. ### Você gosta de codar? - Busque por issues para contribuir - Pergunte se pode ajudar na criação de algo para o projeto - Automatize o processo de instalação do projeto - Melhore os testes ou ferramentas ### Você gosta de ajudar pessoas? - Responda perguntas sobre o projeto no Stack Overflow, Reddit, Quora, etc. - Responda as pessoas em issues abertas - Ajude a moderar quadros de discussão ou canais de conversação (Slack, Gitter) - Participe do [FrontendBr](http://github.com/frontendbr/forum) e do [BackendBr](http://github.com/backend-br/forum), ajude pessoas de todo o Brasil <3 ### Você pode simplesmente ajudar em outras coisas que não sejam código! - 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). - Existe também um projeto da h5bp sobre [Perguntas comuns em Entrevistas](https://github.com/h5bp/Front-end-Developer-Interview-Questions) E fique calmo, ainda vou falar como encontrar coisas para contribuir, isso acima foi só uma prévia xD ## Orientando-se para um novo projeto Quando 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. ### Anatomia básica de um projeto open source Todo 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: - **Author**: a pessoa/organização que criou o projeto. - **Owner**: pessoa que tem os direitos administrativos do repositório (nem sempre é o autor) - **Mantenedores**: os responsáveis por guiar a visão e organização do projeto. (podem ser ou não os autores do projeto) - **Contribuintes**: todo mundo que já contribuiu em alguma coisa no projeto. - **Membros da comunidade**: pessoas que usam o projeto e que podem ser ativos em grupos de discussão. Temos também a documentação, que tem seguido o seguinte padrão: - **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. - **README**: é a documentação de "boas-vindas" do projeto, onde, em geral, explica um pouco sobre o projeto e como começar com ele. - **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. - **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. E por último, nós temos as ferramentas que servem para organizar as dicussões: - **Issue tracker**: onde as pessoas discutem sobre bugs, dúvidas e/ou melhorias a serem feitas no projeto. - **Pull Requests**: onde as pessoas discutem e revisam as mudanças que estão sendo feitas dentro do projeto. - **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. ## Encontrando um projeto para contribuir Outra 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! Existem algumas formas bem legais de achar projetos para ajudar, que são: ### Buscas diretas no Github O Github possui algumas labels muito conhecidas e úteis que a galera usa, exatamente para buscar ajuda, alguns exemplos: - [is:issue is:open label:beginner](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Abeginner) - [is:issue is:open label:easy](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Aeasy) - [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) - [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) - [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") - [is:issue is:open label:starter](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Astarter) - [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) ### Ferramentas para buscar projetos - [Up For Grabs](http://up-for-grabs.net/#/) - uma lista de projetos com issues para iniciantes. - [Issuehub.io](http://issuehub.io/) - uma ferramenta para buscar issues no Github por label e linguagem. - [Code Triage](https://www.codetriage.com/) - outra ferramenta muito boa para procurar repositórios por issues e linguagem. - [First Timers Only](http://www.firsttimersonly.com/) - uma lista de bugs para pessoas que nunca contribuiram antes. - [YourFirstPR](https://twitter.com/yourfirstpr) - um twitter que reporta issues que podem ser resolvidos por iniciantes. - [Github Explore](https://github.com/explore/) - uma ferramenta dentro do próprio Github para lhe apresentar projetos novos e que podem ser interessantes. ## Uma checklist para antes de contribuir Quando 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: - O projeto possui uma licença? Ela é de acordo com o que você apoia? - Quando foi o último commit do projeto? Faz muito tempo? - Com que frequência esses commits são feitos? - O projeto tem muitas issues abertas sem resposta? - Os mantenedores respondem rapidamente as issues? - Existem discussões nas issues? - Tem alguma issue recente? - Existem issues fechadas para o projeto? - Verifique as mesmas coisas para os Pull Requests - Quando respondidas, essas issues/PR são tratadas de forma amigável? - As pessoas recebem reviews em suas contribuições? - Os mantenedores agradecem as pessoas por suas contribuições? ## Como submeter uma contribuição? Tã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: ### Comunique efetivamente A 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! Antes de abrir uma issue ou um Pull Request, tenha alguns pontos em mente. **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ê!). - **Bom**: "X não acontece quando eu faço Y" - **Ruim**: "X está quebrado! Por favor corrija!" #### Faça seu dever de casa antes É 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. - **Bom**: Eu não sei como implementar X. Eu chequei na documentação e não achei nenhuma menção, existe outro lugar? - **Ruim**: Como eu faço X? #### Faça seus pedidos de forma curta e direta Assim 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: - **Bom**: Eu gostaria de escrever um tutorial sobre a API. - **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... #### Mantenha toda comunicação pública As 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. - **Bom**: (as a comment on Github) "Olá @mantenedor! Como eu devo proceder com esse PR?" - **Ruim**: (como um email) "Olá, desculpe te incomodar, mas teria como dar uma olhadinha no meu PR?" #### É ok fazer perguntas (mas seja paciente!) Todo 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. - **Bom**: Obrigado por olhar esse erro. Eu segui suas instruções e esse aqui é o resultado. - **Ruim**: Por que você não corrige meu problema? Você não é o dono do projeto? #### Respeite as decisões do projeto Sim, 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. - **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. - **Ruim**: Vocês destruiram o projeto inteiro, vou usar Y. ### Abrindo uma Issue Você deve abrir uma issue nas seguintes situações: - Reportar um erro que você não pode resolver - Propor uma nova feature ou outra ideia de projeto Dicas para se comunicar nas issues: - _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. - _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. - _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. ### Abrindo um Pull Request Você deve abrir um Pull Request nas seguintes situações: - Submeter pequenas correções (um erro de digitação, um link quebrado ou um erro bem óbvio) - Começar a trabalhar numa contribuição que já foi pedida e você discutiu antes em alguma issue Um 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). Se o projeto estiver no Github, aqui algumas dicas úteis de como criar o PR: - [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/). - Crie um branch para o seu trabalho. - Referencie qualquer issue relevante ou qualquer documentação necessária no seu PR. - Inclua screenshots de antes e depois caso suas mudanças afetem algo visual do projeto. - 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. ## O que acontece depois? Depois que você submete sua contribuição, algumas coisas podem acontecer, que são: ### Você não recebe uma resposta Felizmente 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. Se 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. Se 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. ### Respondem e pedem mudanças É 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. Quando 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. Se 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. ### Sua contribuição não foi aceita Sua 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. ### Sua contribuição foi aceita Yeyyyy! Uma sensação incrível né? Corre já para contribuir em outra coisa! o/ ## Mais alguns artigos que podem lhe ajudar Wow! 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ê: - [Como escolher (e contribuir) no seu primeiro projeto open source (en)](https://github.com/collections/choosing-projects) - [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) - [Traga bondade para o Open Source (en)](http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx) - [Como contribuir com Open Source](https://opensource.guide/how-to-contribute/) - [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) - [Ficando mestre em Markdown](https://guides.github.com/features/mastering-markdown/) ## Conclusão É 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! E 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! ================================================ FILE: posts/habemus-react-hooks.md ================================================ --- layout: post date: 2019-02-08T05:37:19.000Z title: Habemus React Hooks description: Uma das features mais interessantes do React foi finalmente lançada, o famoso Hooks! Por que é tão legal assim? main-class: js tags: - react - js - hooks --- - [Introdução](#introdução) - [O que é? Onde vive? O que come?](#o-que-é-onde-vive-o-que-come) - [O que são React Hooks?](#o-que-sao-react-hooks) - [Por que criaram isso?](#por-que-criaram-isso) - [Classes ainda confundem pessoas e máquinas](#classes-ainda-confundem-pessoas-e-máquinas) - [Preciso aprender tudo de novo?](#preciso-aprender-tudo-de-novo) - [Hooks e seus funcionamentos](#hooks-e-seus-funcionamentos) - [Usando o Hook de estados (useState)](#usando-o-hook-de-estados-usestate) - [Declarando a variável de estado](#declarando-a-variavel-de-estado) - [Lendo a variável de estado](#lendo-a-variável-de-estado) - [Atualizando a variável de estado](#atualizando-a-variável-de-estado) - [Usando o Hook de efeitos (useEffect)](#usando-o-hook-de-efeitos-useeffect) - [Efeitos com Cleanup](#efeitos-com-cleanup) - [Regras para os Hooks](#regras-para-os-hooks) - [Somente chame os Hooks no Top Level](#somente-chame-os-hooks-no-top-level) - [Somente chame os Hooks em funções React](#somente-chame-os-hooks-em-funções-react) - [Explicação](#explicação) - [Criando seus próprios Hooks](#criando-seus-próprios-hooks) - [Extraindo um Hook customizado](#extraindo-um-hook-customizado) - [Usando um hook customizado](#usando-um-hook-customizado) - [Links interessantes](#links-interessantes) - [Conclusão](#conclusão) ## Introdução Faaaala 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é? Esse 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. ![Gatinho fofinho olhando com cara de pidão](/assets/img/cute-kitten.jpg) Bom, 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. ## O que é? Onde vive? O que come? Assim 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? Enfim, 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). ### O que são React Hooks? Numa versão bem resumida: > 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. Ou 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. ### Por que criaram isso? O 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: Uma outra fonte que eu acho super legal é esse Tweet abaixo: Se 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. Existem outros vários motivos, mas vou pontuar os principais aqui: #### É difícil de reutilizar lógica de estados entre componentes A forma mais comum de compartilharmos comportamentos/funcionamentos entre componentes era através dos HOC's (Higher-order components) e das render props. O 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. #### Classes ainda confundem pessoas e máquinas Quando 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. A 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. Adicionalmente, 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. Para 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. ### Preciso aprender tudo de novo? A 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á. Hooks 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`. Eles 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). ## Hooks e seus funcionamentos Existem 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. ### Usando o Hook de estados (useState) Seguindo a ideia de antes/depois, segue abaixo um Componente Class Based: ```jsx class Example extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } render() { return (

You clicked {this.state.count} times

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

You clicked {count} times

) } ``` Basicamente, 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. #### Declarando a variável de estado Numa classe, nós inicializamos o `count` como `0` definindo através do `this.state` lá no construtor. ```jsx ... constructor(props) { super(props); this.state = { count: 0 }; } ... ``` Num `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: ```jsx const [count, setCount] = useState(0) ``` - E o que o `useState` faz? Ele 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`. - O que nós passamos de argumento no `useState`? O `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. **Importante:** se precisarmos guardar dois diferentes valores no estado, iremos utilizar o `useState` duas vezes. - O que o `useState` retorna? Esse 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()`. Essa 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. Agora que sabemos como o `useState` funciona, as coisas vão fazer mais sentido. ```jsx const [count, setCount] = useState(0) ``` Ali 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`. #### Lendo a variável de estado Para ler o valor da variável, na classe nós utilizávamos assim: ```jsx

You clicked {this.state.count} times

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

You clicked {count} times

``` #### Atualizando a variável de estado Na classe, nós precisávamos do método `this.setState()` para atualizar os valores: ```jsx ``` Na função com hooks, nós já definimos tanto o `setCount` quanto o `count`, então fica bem mais simples: ```jsx ``` Se 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. ### Usando o Hook de efeitos (useEffect) Vimos 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`? Seguindo a mesma ideia de antes/depois, segue um exemplo onde atualizamos o `title` da página baseada no nosso `count`. Primeiro class based: ```jsx class Example extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } componentDidMount() { document.title = `You clicked ${this.state.count} times` } componentDidUpdate() { document.title = `You clicked ${this.state.count} times` } render() { return (

You clicked {this.state.count} times

) } } ``` Repare 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`. Agora vejamos com o `useEffect` hook: ```jsx import React, { useState, useEffect } from 'react' function Example() { const [count, setCount] = useState(0) useEffect(() => { document.title = `You clicked ${count} times` }) return (

You clicked {count} times

) } ``` - O que o `useEffect` faz? Usando 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. - Por que o `useEffect` é chamado dentro do componente? Colocando 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. - O `useEffect` roda toda vez que renderiza? Sim, 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. #### Efeitos com Cleanup No 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`: ```jsx class FriendStatus extends React.Component { constructor(props) { super(props) this.state = { isOnline: null } this.handleStatusChange = this.handleStatusChange.bind(this) } componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ) } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ) } handleStatusChange(status) { this.setState({ isOnline: status.isOnline }) } render() { if (this.state.isOnline === null) { return 'Loading...' } return this.state.isOnline ? 'Online' : 'Offline' } } ``` Repare que ao montar o componente nós fazemos um `subscribeToFriendStatus` e ao desmontar, fazemos exatamente o oposto com `unsubscribeFromFriendStatus`. Já utilizando o `useEffect` hook faremos assim: ```jsx import React, { useState, useEffect } from 'react' function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null) function handleStatusChange(status) { setIsOnline(status.isOnline) } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange) // Specify how to clean up after this effect: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange) } }) if (isOnline === null) { return 'Loading...' } return isOnline ? 'Online' : 'Offline' } ``` Dentro 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). O 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. Dentro 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. ### Regras para os Hooks Como 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. #### Somente chame os Hooks no Top Level Nã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`. #### Somente chame os Hooks em funções React Dessa forma você garante que toda a lógica de estados será visível por todo o componente. #### Explicação Um mesmo componente pode ter múltiplos `useState` e `useEffect`. Como o exemplo abaixo: ```jsx function Form() { // 1. Use a variável "name" no state const [name, setName] = useState('Mary') // 2. Use um effect para persistir os dados do form useEffect(function persistForm() { localStorage.setItem('formData', name) }) // 3. Use a variável "surname" no state const [surname, setSurname] = useState('Poppins') // 4. Use um effect para atualizar o título da página useEffect(function updateTitle() { document.title = name + ' ' + surname }) // ... } ``` Entã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: ```jsx // ------------ // Primeira renderização // ------------ useState('Mary') // 1. Inicializa a variável "name" como 'Mary' useEffect(persistForm) // 2. Adiciona um effect para persistir o form useState('Poppins') // 3. Inicializa a variável "surname" com 'Poppins' useEffect(updateTitle) // 4. Adiciona um effect para atualizar o título // ------------- // Segunda renderização // ------------- useState('Mary') // 1. Lê a variável "name" (o argumento é ignorado) useEffect(persistForm) // 2. Recoloca o efeito para persistir o form useState('Poppins') // 3. Lê a variável "surname" (o argumento é ignorado) useEffect(updateTitle) // 4. Recoloca o efeito para atualizar o título // ... ``` Enquanto a ordem permanecer a mesma, não há problema nenhum, mas o que acontece se colocar uma condicional para um dos hooks? ```jsx // 🔴 Estamos quebrando a primeira regra! if (name !== '') { useEffect(function persistForm() { localStorage.setItem('formData', name) }) } ``` A 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: ```jsx useState('Mary') // 1. Lê a variável "name" (o argumento é ignorado) // useEffect(persistForm) // 🔴 Esse hook foi passado useState('Poppins') // 🔴 2 (mas era 3). Falha para ler o "surname" useEffect(updateTitle) // 🔴 3 (mas era 4). Falha para substituir o effect ``` O 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. Sei 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/ ### Criando seus próprios Hooks Alé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. Mais acima, nós tínhamos o seguinte componente, que servia para indicar se um amigo estava online ou offline. ```jsx import React, { useState, useEffect } from 'react' function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null) function handleStatusChange(status) { setIsOnline(status.isOnline) } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange) return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange) } }) if (isOnline === null) { return 'Loading...' } return isOnline ? 'Online' : 'Offline' } ``` Agora, 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: ```jsx import React, { useState, useEffect } from 'react'; function FriendListItem(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); return (
  • {props.friend.name}
    • ); } ``` Repare 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). Agora vamos ver como podemos solucionar esse problema utilizando hooks sem a necessidade de criar mais componentes. #### Extraindo um Hook customizado Quando queremos compartilhar lógica entre duas funções, nós extraímos em uma terceira função. Fazemos o mesmo com os hooks! **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. ```jsx import React, { useState, useEffect } from 'react' function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null) function handleStatusChange(status) { setIsOnline(status.isOnline) } useEffect(() => { ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange) return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange) } }) return isOnline } ``` Repare que não há nada de novo nessa função, nós basicamente copiamos a lógica dos componentes acima. Diferente 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. #### Usando um hook customizado Agora que já extraímos a lógica para um hook separado, podemos simplesmente utilizar o mesmo nos nossos componentes: ```jsx function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id) if (isOnline === null) { return 'Loading...' } return isOnline ? 'Online' : 'Offline' } ``` ```jsx function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); return (
  • {props.friend.name}
    • ); } ``` Repare 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. ## Links interessantes Nossa, o post ficou bem grande, mas tem muitos outros detalhes legais que valem a pena ver, então vou botar alguns links aqui: - [Documentação da API](https://reactjs.org/docs/hooks-reference.html) - [FAQ](https://reactjs.org/docs/hooks-faq.html) - [Site com vários hooks customizados](https://usehooks.com/) - [Awesome-react-hooks](https://github.com/rehooks/awesome-react-hooks) ## Conclusão Bom 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! =) ================================================ FILE: posts/happy-halloween-caca-ao-tesouro.md ================================================ --- layout: post date: 2020-10-31T02:47:09.000Z title: Happy Halloween! Caça ao tesouro! description: Tenha a chance de ganhar 1 curso de React Avançado de graça! main-class: misc tags: - react categories: - "" --- ## Introdução Fala meu povo lindo!! Happy Halloween! Resolvi fazer uma surpresa bem legal para vocês hoje! Vamos 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! E você deve estar se perguntando: > Uai, mas como eu faço então? Bom, aí que está, só de acessar essa página **você já está participando!** Agora cabe a você, descobrir o resto das etapas =D Boa sorte a todos! ## E acabou! Meus parabéns para os alunos espertos que conseguiram! E para quem não conseguiu, agora vou explicar! Primeiro de tudo, bastava abrir o console do navegador e teria o seguinte: ```js //// Happy Halloween console.log('🎃🎃🎃 Happy Halloween 🎃🎃🎃') console.log('Quer ganhar um curso na faixa??') console.log( 'Qual foi minha fantasia de Halloween do ano passado? Acerte e vá para https://${fantasia}Halloween.willianjusten.com.br"' ) ``` Minha 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: - [harryhalloween.willianjusten.com.br](https://harryhalloween.willianjusten.com.br/) - [harrypotterhalloween.willianjusten.com.br](https://harrypotterhalloween.willianjusten.com.br/) Ou se você quisesse ser ainda mais "zoeiro", podia responder um `seilá` e ficaria: - [seilahalloween.willianjusten.com.br](https://seilahalloween.willianjusten.com.br/) E também funcionava! E 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. ## Era difícil demais acertar 60, não vale!!! Aí é 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: - Diminuir a velocidade de animação do CSS - Aumentar o tamanho dos bonecos para não ter como errar - Mudar o valor do `score` direto no console - Criar função para clickar nos elementos do Frakenstein - E até o mais simples, digitar a variável do cupom cifrado no terminal Você fez diferente? Manda lá [no meu twitter](https://twitter.com/Willian_justen) o que você fez! ![Ilustração de um castelo e tumbas com um Happy Halloween escrito embaixo, em um fundo roxo.](/assets/img/halloween.jpg) ================================================ FILE: posts/https-no-github-pages-com-custom-domain.md ================================================ --- layout: post date: 2016-06-11T19:07:32.000Z title: HTTPS no Github Pages com Custom Domain description: Aprenda a colocar a sua página do Github Pages com Custom Domain e HTTPS main-class: dev tags: - github pages - tutorial - https categories: null --- ## Introdução **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. Fala 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**. Mas 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. Vou ouvindo uma playlist que tem combinado um pouco com meus últimos dias, [Life Sucks](https://open.spotify.com/playlist/37i9dQZF1DX3YSRoSdA634?si=1g34PdUdTIa-NX6TCxi3cQ). ## Por que usar HTTPS? Isso num era só para ecommerce? Primeiro 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. Esse 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. Mas 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. ## Como fazer? Bom, 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. A 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 =) ### Cadastro na Cloudflare A 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). Assim 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. ![Tela para escanear novo site](/assets/img/https/add-site.png) Coloque 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: ![Tela do DNS](/assets/img/https/dns.png) Ele também vai te passar 2 nameservers que você precisará mudar onde comprou seu domínio. ![Tela do nameserver](/assets/img/https/nameservers.png) Em 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: ![Tela do registrobr](/assets/img/https/registrobr.png) Feito isso, vem a parada chatinha, **ter paciência** para o DNS propagar... ### Adicionando SSL via Cloudflare Bom, 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. Para 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: ![Tela do SSL](/assets/img/https/crypto.png) Feito 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. ### Redirecionando para HTTPS Para 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: ![Tela de Redirect](/assets/img/https/redirect.png) ### Links Canônicos Tá 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: ```html ``` Se você estiverem utilizando um gerador estático como o Jekyll, vocês deixam a parte da `url_da_pagina` dinâmica. ### Disqus Se 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. ## Conclusão Bom 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 =) ================================================ FILE: posts/introducao-ao-strapi-headless-cms.md ================================================ --- layout: post date: 2020-06-17T10:56:41.000Z title: Introdução ao Strapi - Headless CMS description: O que é um Headless CMS, quais as vantagens do Strapi e como ele funciona. main-class: dev tags: - strapi - cms - videos --- ## Introdução Faaala 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 O 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. ## Video ## O que é um Headless CMS? Primeiro 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. Eles 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/). ![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) Mas 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. Enquanto 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. Eu vi em um tweet uma citação bem legal: > 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. Ou 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. ## Strapi 3.0 Eu 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. Recentemente 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. Com 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. ## Vantagens do Strapi Diferentes 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. Na 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). A 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! ## Como instalar e usar Para iniciar um projeto com o Strapi, basta que você digite: ```bash npx create-strapi-app my-project ``` Ele 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. Apó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. Ele trabalha com 3 estruturas de dados bem importantes que são: - `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. - `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 - `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. Você 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. ## Conclusão Bom 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. Se 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! ================================================ FILE: posts/js-com-tdd-na-pratica-e-novidades.md ================================================ --- layout: post date: 2016-09-10T15:53:11.000Z title: Curso JS com TDD na Prática e Novidades description: Aprenda uma das melhores culturas de desenvolvimento e tenha portas abertas no mercado. main-class: js tags: - js - tdd categories: null --- ## Índice - [Introdução](#intro) - [O que é TDD e por que usar?](#tdd) - [TDD nas grandes empresas](#tdd-empresas) - [Ementa do Curso](#ementa) - [Perguntas Frequentes](#faq) - [Módulo Extra: TDD no React](#tdd-react) - [Minha nova aventura](#aventura)

    Introdução

    Faaaala 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ã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.) Eu 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 =)

    O que é TDD e por que usar?

    **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. De 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. Neste 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. Se você quiser ler mais sobre testes, eu escrevi um [post bem completo](https://willianjusten.com.br/entendendo-testes-de-software/) sobre o assunto.

    TDD nas grandes empresas

    Como 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: - [Vagas no FrontendBR Github](https://github.com/frontendbr/vagas/issues)

    Ementa do Curso

    ### Módulo 1 Será mais sobre o start de um projeto, falarei sobre styleguides, eslint, editorconfig, hooks e outros arquivos importantes para iniciar um projeto. ### Módulo 2 Iremos 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. ### Módulo 3 Será focado totalmente na teoria de testes, entendendo todos os conceitos, necessidades e as escolhas para bons testes. ### Módulo 4 Iremos 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. Nesse módulo também veremos como colocar essa biblioteca no TravisCI e como publicá-la no NPM para que outras pessoas possam utilizar. ### Módulo 5 Iremos 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. Dentro desse módulo, teremos como exercício, aplicar todas as coisas aprendidas no módulo 4 como coverage, CI e publicar no npm. ### Módulo 6 Será 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. Com 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.

    Perguntas Frequentes

    ### 1) Tem como parcelar o curso? Tem 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). ### 2) Já tem a ementa? A espera acabou e temos a ementa completa, que você pode ver logo acima em [ementa](#ementa). ### 3) Quando o curso começa e como vai funcionar? A 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. ### 4) Vai ter certificado para quem concluir o curso? Preciso para usar na minha faculdade. Sim, 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. ### 5) O que eu preciso saber para fazer o curso? Você 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". ### 6) O que você vai utilizar no curso? E vai ser só sobre testes? Eu 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. ### 7) Quando o curso começa e quando termina? O 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. ### 9) Como funciona o curso? Sã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. ---

    Módulo 1: Boas Práticas

    Nesse 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.

    Módulo Extra: TDD no React

    Isso 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 Para 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

    Minha nova aventura

    Como 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

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

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

    Cheguei 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. Entã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. E se você se interessou, as vendas estão abertas no [link](https://www.udemy.com/js-com-tdd-na-pratica/?couponCode=LANCAMENTOTDD). ================================================ FILE: posts/juntando-arrays-e-objetos-com-spread-syntax-no-javascript.md ================================================ --- layout: post date: 2021-02-21T07:12:03.000Z title: Juntando arrays e objetos com Spread syntax no JavaScript description: Evite usar bibliotecas externas para coisas simples como fazer merge de objetos e arrays. main-class: js tags: - dicas categories: - Dicas rápidas --- ## Introdução Fala 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 =) ## Vídeo ## Utilizando o poder do ...Spread Antigamente 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. Vamos ver abaixo alguns exemplos na prática: ```javascript const arrayOne = [1, 2, 3, 4] const arrayTwo = [5, 6, 7, 8] // juntando os arrays const newArray = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6, 7, 8] // funciona com objetos também! const props = { id: '1', name: 'Willian' } const moreProps = { age: 30, height: 178 } const newObj = { ...props, ...moreProps } // { id: '1', name: 'Willian', age: 30, height: 178 } // E você também consegue sobrepôr valores const defaultProps = { id: '1', name: 'Willian' } const newProps = { id: '3', age: 30 } // Chaves iguais são sobreescritas pelo último objeto passado const propsObj = { ...defaultProps, ...newProps } // { id: '3', name: 'Willian', age: 30 } ``` ## Conclusão E 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. ================================================ FILE: posts/lancamento-curso-de-git-e-github-na-vida-real.md ================================================ --- layout: post date: 2018-02-05T01:23:11.000Z title: Lançamento Curso de Git e Github na Vida Real description: Um curso direto ao ponto, aprenda workflows e comandos realmente úteis do dia-a-dia no Git. main-class: misc tags: - dev - cursos - git - github categories: null --- ## Lançamento do Curso Fala 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! ## Por que de lançar esse curso? Como 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. ## Funcionamento do Curso Seguindo 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!** Eu 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 O curso é composto de **4 módulos**, contendo **45 aulas** no total com mais de **4 horas** de conteúdo! Vamos lá: - **Módulo 1:** Utilizando o Visual Studio Code para os comandos comuns do Git, plugins úteis e mais. - **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? - **Módulo 3:** Trabalhando com o Github, veremos mais a fundo sobre Issues, Pull Requests, Code Review, etc. - **Módulo 4:** Workflows do Git, como funcionam diferentes fluxos de trabalho, como o Git Flow e o Feature Branch. Todo 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! > Poxa, mas só isso? E aquele "assunto maneiro lá", vai falar não? Boa 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? ================================================ FILE: posts/links-da-semana-1.md ================================================ --- layout: post date: 2015-02-01T20:37:40.000Z title: "Links da semana #1" description: "Links da semana #1 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - linksdasemana categories: - Links da Semana --- Eu planejava fazer esse post para sexta-feira, mas devido eu estar vomitando até minha alma, ficou um pouquinho complicado de fazer... Eu 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... E 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 Desde 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 =) Sendo 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**. ### CSS * [Fun with line-height!](http://css-tricks.com/fun-line-height/) - fazendo coisas criativas utilizando o line-height * [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. * [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ó. * [Atomic Design Book](http://atomicdesign.bradfrost.com/) - está para sair o livro sobre Atomic Design e aqui já podemos ver um pouco. * [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. * [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. * [Menu to Cross Icon](http://lukyvj.github.io/menu-to-cross-icon/) - um experimento bem bacana do menu hambúrguer. * [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. ### JS * [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. * [minBlock.JS](http://argunner.github.io/minBlock.js/) - uma implementação em JS/Canvas para criar os avatares randômicos como o github faz. * [Sane Stack](http://sanestack.com/) - um boilerplate para iniciar projetos rapidamente em Sails e Ember. * [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. * [Replace coffeescript with ES6](http://robots.thoughtbot.com/replace-coffeescript-with-es6) - um artigo mostrando como substituir o Coffeescript pelo ES6. - [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. ### Etc * [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. * [SVG OMG](https://jakearchibald.github.io/svgomg/) - uma GUI para o SVGO online <3 * [Hipster Logo Generator](http://www.hipsterlogogenerator.com/) - um gerador de logos hipster, bem divertido para brincar. * [Pokemon Branding](http://pictogram.agency/pokemonbranding/) - uns conceitos de design interessantes utilizando pokemons <3 * [Avocode](https://avocode.com/) - já fazia um tempinho que estava para sair, um possível substituto para o Photoshop. ================================================ FILE: posts/links-da-semana-2.md ================================================ --- layout: post date: 2015-02-08T15:49:52.000Z title: "Links da semana #2" description: "Links da semana #2 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - linksdasemana categories: - Links da Semana --- Sem mais delongas, aqui vão os links mais legais que vi na semana. ## CSS * [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. * [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. * [MProgress](http://lightningtgc.github.io/MProgress.js/) - um barra de progresso feita nos moldes do Material Design. * [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. * [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. * [Style Guide Generator](http://alistapart.com/blog/post/style-guide-generator-roundup) - um artigo mostrando alguns geradores de Style Guide. * [Vector Graphics in Sass](http://www.sitepoint.com/vector-graphics-sass/) - como criar vetores utilizando só Sass, abordagem louca e legal. * [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 ## JS * [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. * [Hound](https://github.com/etsy/Hound) - um search muito interessante usando React no Front e Go no Backend. * [Destructuring and Recursion in ES-6](http://raganwald.com/2015/02/02/destructuring.html) - um pouquinho sobre os recursos de recursão no ES6. * [Cation](https://github.com/sergiolepore/Cation) - um Dependency Injection Container para NodeJS e IOJS muito interessante. * [Syphon](https://github.com/scttnlsn/syphon) - uma implementação da arquitetura do Flux em aplicações React inspirado no ClojureScript e OM. * [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. * [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. * [Flux Comparison](https://github.com/voronianski/flux-comparison) - alguns comparativos utilizando o Flux. * [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. * [Tagtree Courses](http://tagtree.io/library) - um curso de ES6 pela Tagtree. ## Etc * [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. * [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. * [Tumblr Analysis](https://github.com/FGRibreau/tumblr-analysis) - um analisador de informações de posts do Tumblr feito em NodeJS. * [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. * [Gogs](http://gogs.io/) - um sistema de Git escrito em Go. **lindão**. ================================================ FILE: posts/links-da-semana-3.md ================================================ --- layout: post date: 2015-03-14T20:22:20.000Z title: "Links da semana #3" description: "Links da semana #3 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - linksdasemana categories: - Links da Semana --- Fiquei um tempo sem fazer esse tipo de post, mas pretendo retorná-lo, porque links interessantes nunca são demais =) Antes 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 =) ## CSS * [Freebie: “Forkio” One Page Website Template - Codrops](http://tympanus.net/codrops/2015/03/12/freebie-forkio-one-page-website-template/) * [Codepen Challenge #1](http://webdesign.tutsplus.com/articles/codepen-challenge-1-results--cms-23585) * [Creative Gooey Effects](http://tympanus.net/codrops/2015/03/10/creative-gooey-effects) - Lucas Bebber não é desse mundo, manda muito =) * [Flickity - touch and responsible gallery](http://flickity.metafizzy.co/) * [Practice your skills by getting random suggestions or creative inspiration!](http://tevko.github.io/practice/index.html) * [How to get started with css shapes](https://webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/) * [Can css be too modular?](https://csswizardry.com/2015/03/can-css-be-too-modular/) * [Automating Style Guide-Driven Development](http://www.smashingmagazine.com/2015/03/05/automating-style-guide-driven-development/) ## JS * [Arda: Meta-Flux framework for real world](https://github.com/mizchi/arda) * [A extremely (but powerful) simple logging system for NodeJS and browser](https://github.com/Kikobeats/acho) * [React D3 Components](https://github.com/codesuki/react-d3-components) * [React JS Tutorial and Guide to the Gotchas](https://zapier.com/engineering/react-js-tutorial-guide-gotchas/) * [Radium - set of tools to manage inline styles on React elements.](http://projects.formidablelabs.com/radium/) * [Build User Interfaces with React](http://www.crashlytics.com/blog/building-user-interfaces-with-react/) * [Measuring JavaScript Performance with console.time](http://adripofjavascript.com/blog/drips/measuring-javascript-performance-with-console-time.html) * [React Isomorphic Starterkit](https://github.com/RickWong/react-isomorphic-starterkit) ## Design * [5 Golden Rules For Mobile Email Design](http://www.sitepoint.com/golden-rules-mobile-email-design/) * [How Cards Are Quietly Transforming The Web](http://techcrunch.com/2015/02/27/cards-transforming-web/) * [How to prototype websites on paper](http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246) * [Defringe - a curated online gallery that filters creative content on the web](http://defringe.com/) * [Lumi - Build your Brand](http://www.lumi.com/) * [Arstropad - Mac & Ipad Draw Together](http://astropad.com/) ## Etc * [What’s the difference between Unit Testing, TDD and BDD?](http://codeutopia.net/blog/2015/03/01/unit-testing-tdd-and-bdd/) * [9 Tips improving your time management](http://www.creativebloq.com/career/9-tips-improving-your-time-management-31514419) * [10 steps to freelance success](http://www.creativebloq.com/career/10-steps-freelance-success-31514415) * [Start.me - Personalize your start page](https://start.me) * [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! * [Tinychart - Create beautiful graphics with JSON or table](http://tinychart.co/) ================================================ FILE: posts/links-da-semana-4.md ================================================ --- layout: post date: 2015-10-11T22:19:17.000Z title: "Links da semana #4" description: "Links da semana #4 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - linksdasemana - dev categories: - Links da Semana --- ## Introdução Fala 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. ## JavaScript - [Lançamento no React 0.14](http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html) - [Relax - um CMS usando React e Node](https://github.com/relax/relax) - [TungstenJS - modular framework for creating web UIs with high-performance rendering on both server and client](https://github.com/wayfair/tungstenjs) - [Promises in JavaScript Unit Tests: the Definitive Guide](http://www.sitepoint.com/promises-in-javascript-unit-tests-the-definitive-guide/) - [Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html) - [10 Interview Questions Every JavaScript Developer Should Know](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95) - [Novo site para o Medium Editor](https://yabwe.github.io/medium-editor/) - [#NodeJS : A quick optimization advice](https://medium.com/@c2c/nodejs-a-quick-optimization-advice-7353b820c92e) - [Nanoflux is a very lightweight agnostic full Flux implementation.](https://www.npmjs.com/package/nanoflux) - [Lazy, composable, and modular JavaScript](https://codewords.recurse.com/issues/four/lazy-composable-and-modular-javascript) - [Lazyload](http://verlok.github.io/lazyload/) - [From Rest to GraphQL](https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b) - [Checklist for your new Open Source JavaScript Project](https://ericdouglas.github.io/2015/09/27/checklist-for-your-new-open-source-javascript-project/) ## Python - [Python Pedia - Python Programming Resources.](https://pythonpedia.com/) - [Testing in Django](http://masteringdjango.com/testing-in-django/) - [Scaling Django to 8 Billion Page Views](http://blog.disqus.com/post/62187806135/scaling-django-to-8-billion-page-views) ## CSS - [Why You Need to Refactor Your CSS](https://seesparkbox.com/foundry/why_you_need_to_refactor_your_css) - [CSS Modules](https://glenmaddern.com/articles/css-modules) ## Workflow - [5 Questions Every Unit Test Must Answer](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d) - [Como fazer listas ajudou na minha produtividade](https://medium.com/brasil/como-fazer-listas-ajudou-na-minha-produtividade-83ab9bbfc6d5) ## Open Source - [Open Source Society University](https://github.com/open-source-society/computer-science) - [N1 - Extensible opensource Mail Client](https://nylas.com/) - [Clipboard JS](https://clipboardjs.com/) - [Accelerated Mobile Pages Project](https://www.ampproject.org/) ## Variados - [Software needs to be better — FunFunFunction #1](https://medium.com/humans-create-software/software-needs-to-be-better-funfunfunction-1-411942de9768) - [Scale 2015](https://code.facebook.com/posts/496171527213781/inside-scale-2015/) - [Goodbye, Native Mobile Apps](https://atavistinsider.atavist.com/goodbye-native-mobile-apps/) - [Inside the Dev Team Death Spiral](https://medium.com/javascript-scene/inside-the-dev-team-death-spiral-6a7ea255467b) - [Introducing the New Motion UI by Zurb](http://zurb.com/article/1409/introducing-the-new-motion-ui) - [MorphSVGPlugin](http://greensock.com/morphSVG) ================================================ FILE: posts/links-da-semana-5.md ================================================ --- layout: post date: 2015-10-18T21:19:17.000Z title: "Links da semana #5" description: "Links da semana #5 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - dev - js - css categories: - Links da Semana --- ## Introdução Tentando 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: - [Supercombo](https://open.spotify.com/artist/73HkjgziMO6I83vFOS8mo1) - banda brasileira de indie, calma e bem legal. - [Anavitória](https://open.spotify.com/artist/1sPg5EHuQXTMElpZ4iUgXe) - dupla brasileira com voz bem fofinha <3 - [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). - [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. Bom, a listinha de músicas dessa semana foi de bastante calmaria, mas não deixei de pegar vários links novos, que seguem: ## Javascript - [ES6 Interactive Guide](http://projects.formidablelabs.com/es6-interactive-guide/#/) - [The Refactoring Tales](http://javascriptplayground.com/the-refactoring-tales/refactoring-tales.html) - [Sri (Scala React interface) - Build truly native cross platform](https://github.com/chandu0101/sri) - [The Future of Web Development - React, Falcor, and ES6](http://engineering.widen.com/blog/future-of-the-web-react-falcor/) - [How To Write a Pacman Game in JavaScript](http://www.masswerk.at/JavaPac/pacman-howto.html) - [Integrating React with gulp](https://jonsuh.com/blog/integrating-react-with-gulp/) - [A cartoon guide to Flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207) - [ES6 in Depth](https://ponyfoo.com/articles/tagged/es6-in-depth) - [A Responsive Material Design App With Polymer Starter Kit](http://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/) - [Screamer.JS - create customisable Web Notifications](https://github.com/willianjusten/screamer-js/) - [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) ## CSS / SVG - [Understanding and Using rem Units in CSS](http://www.sitepoint.com/understanding-and-using-rem-units-in-css/) - [Using Web Fonts the Best Way (in 2015).](https://helloanselm.com/2015/using-webfonts-in-2015/) - [CodePen's CSS](http://codepen.io/chriscoyier/post/codepens-css) - [Um lego feito em CSS puro - LOUCO](http://codepen.io/rachel_web/pen/rOLRvM/) - [CodePen Challenge #5: Spooky Halloween SVG Characters](http://codepen.io/collection/nJGmgJ/) - [Effect Ideas for Image Grids](http://tympanus.net/codrops/2015/10/15/effect-ideas-for-image-grids/) ## Opensource - [Exposé - A simple static site generator for photoessays](https://github.com/Jack000/Expose) - [The official Javascript client for Cosmic JS](https://github.com/cosmicjs/cosmicjs-node) ## Design - [25 Luxury Website Designs with Elegant Layouts](http://line25.com/inspiration/luxury-website-designs) - [What’s New for Designers, October 2015](https://webdesignerdepot.com/2015/10/whats-new-for-designers-october-2015/) - [A collection of free resources made by designers at Facebook.](https://facebook.design) - [Every website looks the same, and that’s ok](https://medium.com/@WebdesignerDepot/every-website-looks-the-same-and-that-s-ok-36c32bd8a1dd) - [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) - [Um site simplesmente foda](http://keepearthquakesweird.com/) ## Variados - [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/) - [Performance Budget - Calcule o que gastar em seu site](http://www.performancebudget.io/) - [Writing Developer Job Postings](http://www.tokyodev.com/2015/08/28/writing-developer-job-posting/) - [Teste seu site no Http2](http://http2.loadimpact.com/) - [Hybrid Mobile Apps With Couchbase And Ionic Framework](http://blog.couchbase.com/hybrid-mobile-apps-with-couchbase-and-ionic-framework) - [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) - [Github Classroom](https://classroom.github.com/) - [A source control backed CMS for developers working with non-developers](http://cloudcannon.com/) - [Detox - Replace your Facebook feed with something positively distracting.](http://usedetox.com/) - [Front-end Developer Handbook](https://frontendmasters.gitbooks.io/front-end-handbook/content/index.html) ================================================ FILE: posts/links-da-semana-6.md ================================================ --- layout: post date: 2015-10-25T21:19:17.000Z title: "Links da semana #6" description: "Links da semana #6 - Links sobre coisas interessantes que fui vendo pela semana." main-class: misc tags: - dev - js - css categories: - Links da Semana --- ## Introdução Essa 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). ## Javascript - [Choosing a JavaScript Build Tool – Babel, Browserify, Webpack, Grunt and Gulp](http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/) - [PlainJS - Vanilla JavaScript for building powerful web applications](https://plainjs.com/) - [Web.br 2015 - Evolução e futuro do uso de paradigmas no JavaScript](https://www.youtube.com/watch?v=uEglleenUFk) - [The struggles of publishing a JavaScript library](http://nolanlawson.com/2015/10/19/the-struggles-of-publishing-a-javascript-library/) - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6) - [Tips on Setting up Karma Testing with Webpack](http://mike-ward.net/2015/09/07/tips-on-setting-up-karma-testing-with-webpack/) ## Design / Inspiracional - [Landing Folio - Várias Landing Pages para inspiração](https://www.landingfolio.com/) - [Lightning Design System - Um design system feito pela Salesforce](http://www.lightningdesignsystem.com/) - [Object Oriented UX](http://alistapart.com/article/object-oriented-ux) ## CSS / SVG - [Project Cards Template](https://codyhouse.co/gem/project-cards-template/) - [How To Work With SVG Text](http://vanseodesign.com/web-design/how-to-work-with-svg-text/) - [CSSgram - library for recreating Instagram filters with CSS filters and blend modes.](https://una.im/CSSgram/) ## Variados - [Jekyll Date Formatting Examples](http://alanwsmith.com/jekyll-liquid-date-formatting-examples) - [Chrome Devtools Tips & Tricks](http://mo.github.io/2015/10/19/chrome-devtools.html) - [Node.js for the Real World](http://www.technology-ebay.de/the-teams/mobile-de/blog/nodejs-real-world) - [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) - [Awesome & Marvelous Amas (Ask me Anything)](https://github.com/sindresorhus/amas) - [Livro Designing for Performance - LEIAM](http://designingforperformance.com/) - [Web performance today](http://www.zeldman.com/2015/10/21/web-performance-today/) - [Resume Builder - create your resumes easily](http://resumator.qwilr.com/) ================================================ FILE: posts/lista-de-dicas-de-seo-para-devs.md ================================================ --- layout: post date: 2019-08-20T14:36:57.000Z title: Lista de dicas de SEO para Devs description: Algumas dicas que podem ajudar o seu site se destacar nas pesquisas do Google. main-class: dev tags: - seo - frontend --- ## Introdução Fala 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. Enquanto 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. Mas bom, vamos logo ao post! ## Preparando para lançar ou migração 1. Coloque o seu domínio para renovar automaticamente. Pode parecer óbvio, mas muita gente já perdeu o domínio porque esqueceu de renovar. 2. Instale o [Google Analytics](https://analytics.google.com/analytics/web/) ou outro [similar](https://www.searchenginejournal.com/9-google-analytics-alternatives/92071/). 3. Certifique-se de seguir todas as [boas práticas com as meta tags](https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags). 4. 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. 5. 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/). 6. 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/). 7. 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/). 8. [Revise os erros mais comuns que desenvolvedores cometem quando criam um site mobile](https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes). 9. 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). 10. 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/). 11. 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**. 12. Crie URLs amigáveis. Nada de urls gigantescas, com números e letras desordenadas. Isso só vai prejudicar com que as pessoas tentem acessar. 13. 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). ![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) 14. Numa migração, tome algum tempo para verificar todos os casos de páginas 404 e crie redirects para os seus devidos links. 15. Tenha um olhar crítico para a usabilidade. Será que seus usuários querem que o vídeo toque automaticamente? Esse menu faz sentido? 16. Use formulários de contato ao invés de só passar o seu email para evitar spams. ## Após o site ser lançado 1. Veja quantas páginas estão sendo indexadas no Google usando **site:yourwebsite.com** na busca do Google. 2. 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). 3. Veja os erros do Google no Search Console. ![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) 4. Atualize seu sitemap removendo URLs não canônicas e páginas 40x antes de submeter o sitemap. 5. [Escreva um markup que ajude as buscas](https://support.google.com/webmasters/answer/99170) 6. 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. 7. Verifique por links quebrados e sempre redirecione para os corretos. 8. 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. 9. 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. ## Conclusão O 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. A Google atualizou recentemente o [Guia de SEO](https://support.google.com/webmasters/answer/7451184) deles, vale dar uma olhada também. E se você tiver alguma dica, bota aí nos comentários =) ================================================ FILE: posts/lyef-criando-componentes-desacoplados-em-reactjs.md ================================================ --- layout: post date: 2017-08-19T18:31:42.000Z title: Lyef - Criando componentes desacoplados em ReactJS description: Um boilerplate para criar componentes reutilizáveis e desacoplados em ReactJS main-class: js tags: - react - js categories: - Aprendendo ReactJS --- ## Introdução Fala 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. Nesse 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á. Lembrando 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. Enquanto escrevo o post, vou ouvindo uma banda indie bem legal chamada [Silversun Pickups](https://open.spotify.com/artist/6qyi8X6MdP1lu6B1K6yh3h). ## Por que do nome Lyef? Essa é 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`. ## Por que desse projeto? Na época eu estava iniciando um freela para uma empresa grande, e a empresa queria basicamente o seguinte: - Criar vários produtos que eram muito similares entre si. - Iniciar a estrutura do projeto e treinar as pessoas, para eles depois seguirem sozinhos. - Permitir que as pessoas trabalhassem de forma independente, tanto os freelas como os devs da empresa. Sem que um bloqueasse o outro. - Queriam utilizar React ou Meteor ou qualquer tecnologia nova para evitar ficarem desatualizados rápidos. Pensando 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. Mas 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? E 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? Pensando 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. ## Definindo padrões Como 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. Depois 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. Para 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). Para rodar o linter separadamente eu tinha os seguintes comandos: ```bash $ npm run lint # verificar todos os arquivos por erros $ npm run lint:fix # verificar e corrigir os erros possíveis automaticamente ``` E 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. ## Testes são importantes! Eu 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. Usei 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. Mas 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. E 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. E 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. Para rodar os testes, existiam os seguintes comandos: ```bash $ npm test # rodava os testes em single-run mode, ou seja, só uma vez $ npm run test:tdd # rodava os testes e ficava assistindo atrás de mudanças $ npm run test:coverage # rodava os testes e gerava os relatórios de cobertura ``` ![Imagem dos testes rodando](https://github.com/lyef/lyef-react-component/raw/master/images/tests.gif) ## Criando um ambiente isolado E 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. Na é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. Através do Storybook, eu consigo fazer coisas como na imagem abaixo: ![Imagem da Interface do Storybook](https://github.com/lyef/lyef-react-component/raw/master/images/storybook-example.gif) Ou 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). ## Botando isso na prática Depois 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. - Criar um repositório do Componente. - Criar as coisas necessárias daquele Componente. - Para cada atualização, utilizar o [Semver](https://willianjusten.com.br/semantic-version/) para versionar corretamente aquele componente. - Esse componente ficava disponível então no Github Privado com suas tags definidas Repare 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: ![Imagem mostrando 3 produtos independentes usando diferentes componentes](/assets/img/lyef-1/grafico.png) ## Conclusão Bom 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. ================================================ FILE: posts/mais-de-10-mil-alunos-na-udemy.md ================================================ --- layout: post date: 2017-08-17T20:02:17.000Z title: Mais de 10 mil alunos na Udemy description: Um pouco sobre esse número, processo de criação de cursos e mais. main-class: misc tags: - cursos - udemy categories: null --- ## Introdução Fala 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. Enquanto 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. O post vai ficar meio grandinho, então vai lá, pega um cafézinho reforçado e volta para continuar lendo =D ## Índice - [Começo de Tudo](#comeco-de-tudo) - [Primeiro Curso Pago](#primeiro-curso-pago) - [Saindo de empresa e focando em curso](#saindo-empresa) - [BrazilJS e lançamento de mais um novo curso](#brazil-js-lancamento) - [Como faço para criar Cursos?](#como-criar-cursos) - [Por que a Udemy?](#por-que-udemy) - [Saiba lidar com opiniões](#lidar-opinioes) - [Sobre Pirataria](#sobre-pirataria) - [Agradecimentos e Bônus](#agradecimentos)

    Começo de tudo

    No 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. Eu 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. Eu 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! Passaram 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

    Primeiro Curso Pago

    Depois 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. Para 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. A 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.

    Saindo de empresa e focando em curso

    Mas 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. Foi 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)). Com 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!

    BrazilJS e lançamento de mais um novo curso

    Ano 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. Eu 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. E 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. Mas 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! Outro 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. Mesmo 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

    Como faço para criar Cursos?

    Bom, 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. ### Definir um tema Essa 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. Entã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. ### Criar ementa Essa é 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. Outra 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. ### Gravação dos vídeos Eu 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. Outra 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. ### Edição de vídeos Aqui é 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. Mas 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ó...)

    Por que a Udemy?

    Inicialmente 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. O 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.

    Saiba lidar com opiniões

    Esse é 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. Já 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. Poré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! Então é importante que você escute os feedbacks e utilize eles da melhor forma possível. E aqueles que nada acrescentam, simplesmente ignore =)

    Sobre Pirataria

    No 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. Bom, é 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. Uma 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 =)

    Agradecimentos e bônus

    Nossa, 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. Para 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 **Update:** tiveram já 5 máquinas absurdamente rápidas que conseguiram os cupons! Meus parabéns!! =D Abraços para vocês e que comece a caça ao cupom de **100%**! ================================================ FILE: posts/making-of-blog-novo-gatsby-js.md ================================================ --- layout: post date: 2019-07-13T13:43:12.000Z title: Making of - Criando meu Blog Novo com GatsbyJS description: Coisas que usei por trás desse blog, escolhas de visual, performance e muitas outras coisas. main-class: js tags: - js - gatsby - netlify --- ## Introdução Fala 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**. O 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. Bom, 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). ## Visual e Mudanças Bom, 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: ![Screenshot da home antiga, tela branca e cards brancos. ](/assets/img/blog-antigo.png) No 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: ![Screenshot do blog novo, com interface escura e os posts em lista.](/assets/img/blogo-novo.png) Outra 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). Já 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. ## Sai Jekyll entra Gatsby Desde 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. A 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ão há nada melhor que usar o seu blog como cobaia para testes e aprendizados. Posso 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! ## Styled Components No 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. Para 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. Junto 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. A estrutura, ficou mais ou menos assim: ```bash ├── components │   ├── Avatar │   │   ├── index.js │   │   └── styled.js │   ├── Course │   │   ├── Image.js │   │   ├── index.js │   │   └── styled.js │   ├── Layout │   │   ├── index.js │   │   └── styled.js │   ├── MenuBar │   │   ├── index.js │   │   ├── styled.js │   │   └── trackers.js │   ├── MenuLinks │   │   ├── content.js │   │   ├── index.js │   │   └── styled.js ... ``` Repare 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. Pegando um trecho de código para exemplificar como faço: ```js // components/Layout/styled.js import styled from 'styled-components' import media from 'styled-media-query' export const LayoutWrapper = styled.section` display: flex; ${media.lessThan('large')` flex-direction: column; padding-top: 4.125rem; `} ` export const LayoutMain = styled.main` background: var(--background); min-height: 100vh; padding: 0 3.75rem 0 20rem; transition: background 0.5s, color 0.5s; width: 100%; ${media.lessThan('large')` padding: 0 0 3rem 0; `} ` ``` Nesse arquivo, eu crio e exporto minhas classes e então para utilizar, faço assim: ```jsx // components/Layout/index.js import * as S from './styled' const Layout = ({ children }) => ( {children} ) ``` Eu 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 ` Home ``` Basta você passar qual tipo de animação que deseja (`fade`, `swipe`, `cover`, `paintDrip`) e alguns outros parâmetros como `direction` e `duration`. ### Highlight Code Para 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. ### Lazy loading e otimização de imagem Se 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. Para 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. ### PWA Para 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. ## Performance Como 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: ![Uma imagem mostrando notas 100 em todos os quesitos no lighthouse](/assets/img/ligthouse-perf-novo.png) ## Conclusão Bom 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 =) ================================================ FILE: posts/making-of-parte-1.md ================================================ --- layout: post date: 2015-01-03T07:54:23.000Z title: Making of - Parte 1 description: Quais ferramentas foram utilizadas para montar esse blog e o porquê de ter escolhido cada uma delas. main-class: jekyll tags: - jekyll - gulp - stylus - svg --- Existe uma continuação desse post em [Making of - parte 2](https://willianjusten.com.br/making-of-parte-2/). ## Antes de qualquer coisa... Bom, antes de começar explicando como criei esse blog, algumas ideias e o que aconteceu durante o processo, é melhor eu me apresentar né? Meu 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... E 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. Eu 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 =) ## Tecnologias utilizadas Eu sou um cara muito curioso e gosto sempre de coisas novas, então eu utilizei: - [Jekyll](http://jekyllrb.com/) - como a base de todo o blog, sendo meu gerador de páginas estáticas. - [GulpJS](http://gulpjs.com/) - meu automatizador favorito, que utilizo para basicamente todas as tarefas tediosas do frontend. - [SVG](http://pt.wikipedia.org/wiki/SVG) - ícones escaláveis, fáceis de utilizar e muito leves. - [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 =) - [Jeet](http://jeet.gs) - sistema de grid feito em stylus. - [Kouto Swiss](http://kouto-swiss.io/) - um framework para stylus. - [Rupture](http://jescalan.github.io/rupture/) - uma ferramenta para facilitar o trabalho com media queries no stylus. - [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). ### Por que de cada uma dessas tecnologias? Eu 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. #### Jekyll Apesar 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/). E 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/) Durante 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. #### GulpJS Definitivamente meu automatizador favorito, seja pela velocidade, seja pela facilidade com que é de se escrever para ele. Junto com ele utilizei os seguintes plugins: - [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. - [Gulp-stylus](https://www.npmjs.com/package/gulp-stylus) - para compilar meu lindo Stylus - [Gulp-uglify](https://www.npmjs.com/package/gulp-uglify) - minificar o js - [Gulp-concat](https://www.npmjs.com/package/gulp-concat) - concatenar os arquivos - [Gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) - minificar todas as minhas imagens Se 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) #### SVG Para 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. Para 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: ```html ``` Eu poderia ficar um post inteiro explicando os motivos de se utilizar SVG, mas os motivos para utilizar SVG no blog foram: 1- 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) 2- [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. ![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) #### Stylus Praticamente 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 Junto 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: ```css .datetime col(1/6) text-align center + below(cut) stack() .day mainFont(800) color main font-size rem(80px) line-height 1.6 + below(cut) stack() .month-year color black font-size rem(18px) .content col(5/6) + below + below(cut) stack(); ``` A 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%`. As 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. As 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/). #### Github Pages Eu 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. O 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. ## Concluindo essa primeira parte Bom, 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). ================================================ FILE: posts/making-of-parte-2.md ================================================ --- layout: post date: 2015-01-05T00:21:31.000Z title: Making of Parte 2 description: Aqui vou mostrar o passo a passo de como criei o blog em Jekyll, usando Gulp e Stylus e coloquei para funcionar no Github Pages. main-class: jekyll tags: - jekyll - gulp - stylus - github pages --- ## Introdução Na 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. Se você quiser pular todo o blá blá blá e ver só o [código fonte](https://github.com/willianjusten/will-jekyll-template/) **Aviso! Este post é bastante extenso, vai lá pegar seu café esperto e volta!** ![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) ### Instalando o Jekyll Primeiro 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/) **Passo 1:** Instalar o [Homebrew](http://brew.sh/) ```bash ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ``` **Passo 2:** Instalando o [Ruby 2.2](https://www.ruby-lang.org/) Iremos utilizar o [rbenv](https://github.com/sstephenson/rbenv) que permite trabalhar com diferentes ambientes de Ruby. ```bash brew install rbenv ruby-build # Adicionando o rbenv ao bash para que seja carregado toda vez que abrir o terminal echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile source ~/.bash_profile # Instalando o Ruby 2.2.0 e definindo como versão padrão rbenv install 2.2.0 rbenv global 2.2.0 ruby -v # ruby 2.2.0 ``` **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... ```bash # Instalando o Jekyll gem install jekyll # Iniciando um projeto com ele jekyll new meu-blog-lindo ``` Com esses comandos já temos toda a estrutura de pastas do jekyll, de acordo com a imagem abaixo. ![Estrutura de pastas do Jekyll](/assets/img/making-of-parte-2/pastas-jekyll.png) ### Organizando as pastas Como 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/). * `_includes`: são trechos que se repetem ao longo do site e podem ser incluídos sem ter que digitar tudo. * `_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. * `_posts`: onde iremos escrever nossos posts, o padrão para escrever é em [Markdown](http://daringfireball.net/projects/markdown/syntax) * `_sass`: os arquivos que geram o css, se você preferir trabalhar em [sass](http://sass-lang.com/), o próprio jekyll compila para você. * `css`: pasta para onde vão os arquivos gerados pelo sass. * `_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. * `about.md`: um arquivo do tipo `page` que irá gerenciar uma página /about * `feed.xml`: arquivo para gerar o feed para o seu blog, essencial para que as pessoas possam seguir seu blog com mais facilidade. * `index.html`: A página inicial do seu blog Quando 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. ```ruby exclude: ['package.json', 'src', 'node_modules'] ``` Como 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`. ### Usando o GulpJS Para 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. Tendo o NodeJS já instalado, basta ir no terminal e iniciar o projeto: ```bash npm init ``` Ele 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/). ```bash npm install --save-dev gulp gulp-uglify gulp-concat gulp-stylus autoprefixer-stylus browser-sync gulp-imagemin gulp-plumber jeet kouto-swiss rupture ``` Depois de tudo instalado precisamos fazer nosso `Gulpfile.js`, que irá ter todas as tasks para automatizar o nosso sistema. Para ser expert em Gulp, basta saber suas funções principais e que ele trabalha com pipes. Sabendo isso, você consegue criar qualquer tarefa. * `gulp.task(nome, fn)`: registra uma tarefa com um nome. * `gulp.run(tarefas)`: executa todas as tarefas sequenciamente * `gulp.watch(tipo de arquivo, fn)`: fica vigiando o arquivo e roda a função caso ele se modifique * `gulp.src(pasta ou arquivo)`: indica qual pasta ou arquivo será lido para a tarefa * `gulp.dest(pasta)`: diz para onde o arquivo final precisa ir #### Parabéns! Você é um expert em Gulp! ![Cara de Gato espantado com a frase Como Assim?](/assets/img/making-of-parte-2/como-assim.jpg) Isso mesmo! É só isso que você precisa saber, sabendo disso, mão na massa! #### Primeiro definir as variáveis e chamar as dependências ```js var gulp = require('gulp'), plumber = require('gulp-plumber'), browserSync = require('browser-sync'), stylus = require('gulp-stylus'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), jeet = require('jeet'), rupture = require('rupture'), koutoSwiss = require('kouto-swiss'), prefixer = require('autoprefixer-stylus'), imagemin = require('gulp-imagemin'), cp = require('child_process'); var messages = { jekyllBuild: 'Running: $ jekyll build' }; ``` #### Definir as tasks do jekyll para dar build e rebuild a cada arquivo atualizado ```js /** * Monta o site do Jekyll */ gulp.task('jekyll-build', function (done) { browserSync.notify(messages.jekyllBuild); return cp.spawn('jekyll', ['build'], {stdio: 'inherit'}) .on('close', done); }); /** * Refaz o site e atualiza a página */ gulp.task('jekyll-rebuild', ['jekyll-build'], function () { browserSync.reload(); }); /** * Espera até que o jekyll-build seja executado e então levanta o * servidor utilizando o _site como pasta raiz */ gulp.task('browser-sync', ['jekyll-build'], function() { browserSync({ server: { baseDir: '_site' } }); }); ``` #### Compilar o Stylus Aqui 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. E 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"`. ```js gulp.task('stylus', function(){ gulp.src('src/styl/main.styl') .pipe(plumber()) .pipe(stylus({ use:[koutoSwiss(), prefixer(), jeet(),rupture()], compress: true })) .pipe(gulp.dest('_site/assets/css/')) .pipe(browserSync.reload({stream:true})) .pipe(gulp.dest('assets/css')) }); ``` #### Minificar e concatenar o JS Nã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. ```js gulp.task('js', function(){ return gulp.src('src/js/**/*.js') .pipe(plumber()) .pipe(concat('main.js')) .pipe(uglify()) .pipe(gulp.dest('assets/js/')) }); ``` #### Otimizar imagens ```js gulp.task('imagemin', function() { return gulp.src('src/img/**/*') .pipe(plumber()) .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })) .pipe(gulp.dest('assets/img/')); }); ``` #### Vigiar todos os arquivos e Tarefa default A 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. ```js gulp.task('watch', function () { gulp.watch('src/styl/**/*.styl', ['stylus']); gulp.watch('src/js/**/*.js', ['js']); gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']); gulp.watch(['index.html', '_includes/*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']); }); gulp.task('default', ['js', 'stylus', 'imagemin', 'browser-sync', 'watch']); ``` Prontinho, 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. ![Imagem mostrando o processo do Gulp no terminal](/assets/img/making-of-parte-2/terminal-gulp.png) Depois disso, basta ter criatividade e montar seu blog com o layout mais legal possível e vai ficar faltando somente a última etapa. ### Subindo para o Github Pages Para 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 =) Outra dependência é que você cadastre uma conta no [Github](https://github.com/). Tendo isso pronto, é só seguir os seguintes passos: #### Passo 1: Crie um repositório ![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/criar-repo.png) Para que funcione no branch `master`, você precisa criar utilizando o `seunomedeusuario.github.io`, no meu caso ficou `willianjusten.github.io`. ![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/nome-repo.png) #### Passo Final: ```bash # Iniciar um repositório git na pasta do projeto git init # Adicionar todos os arquivos git add -A # Commitar os arquivos git commit -m "Commit Inicial" # Adicionar o repositório remoto git remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git # Subir seu lindo blog git push -u origin master ``` Com 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`. ## Conclusão Uffa, 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 =) ================================================ FILE: posts/manipulando-svg-com-js.md ================================================ --- layout: post date: 2015-09-12T00:14:39.000Z title: "#14 - Manipulando SVG com JS" description: Veja como manipular SVG com JS e algumas libs para brincar. main-class: svg tags: - svg - js - tutorial categories: - O mundo mágico do SVG --- ## Introdução Caramba! 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! Como 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. Esse 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. ## Em que momentos devo usar JS? Como 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: - Se você estiver trabalhando com dados via JSON (em geral gráficos). - Quando precisa de alguma lógica mais complexa por trás de acordo com certas condições do contexto. - Quando precisa de uma grande compatibilidade, inclusive com IE velho. - Para animações mais complexas, com muitos passos e manipulação em diversos elementos. ## O que eu posso fazer com JS? Bom...**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. ## SVG e o DOM ### Seleção e Manipulação de estilos Como 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. Vamos considerar o seguinte SVG: ```html ``` Através do javascript podemos fazer o seguinte: ```js var icone = document.getElementById('icone-lindao') var curva = document.getElementById('curva') var outraCurva = document.getElementById('outra-curva') ``` Com isso, já teríamos todos os elementos selecionados, para ter certeza que selecionou mesmo o elemento, basta imprimir no console. ```js console.log(icone) console.log(curva) console.log(outraCurva) ``` Sabendo 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. ```js curva.style.fill = '#FAFAFA' ``` Alé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. ```html ``` Segue um exemplo fazendo algumas interações com um SVG:

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

    ### Criação e Manipulação de propriedades do SVG Sim, 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. Como 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 é: `http://www.w3.org/2000/svg`. E para criar elementos SVG, utilizamos o [createElementNS](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElementNS). A sintaxe é bastante simples: ```js var element = document.createElementNS(namespaceURI, qualifiedName) ``` Onde `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`. Apó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: ```js element.setAttributeNS(namespace, name, value) ``` O `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. Abaixo segue um exemplo de como criar um círculo usando esses simples métodos:

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

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

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

    ## Bibliotecas de Manipulação Apesar 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. Vou listar aqui algumas bibliotecas bem bacanas e suas principais vantagens: ### Snap.svg Talvez 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. [Link do Snap.svg](http://snapsvg.io/) ### RaphaelJS Uma 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. [Link do RaphaelJS](https://github.com/DmitryBaranovskiy/raphael) ### D3 É 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. [Link do D3](http://d3js.org/) ### SVG.JS Uma 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. [Link da SVG.JS](http://svgjs.com/) ### Bonsai JS Outra biblioteca bem leve, mas que permite bastante coisa. Tem uma API bem simples e interativa, podendo criar até joguinhos simples com ela. [Link da BonsaiJS](http://bonsaijs.org/) ### Greensock GSAP Essa 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. [Link do GSAP](http://greensock.com/gsap) ## Conclusão Bom 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 ================================================ FILE: posts/mantendo-seu-projeto-atualizado-com-dependabot-e-github-actions.md ================================================ --- layout: post date: 2020-08-08T08:46:44.000Z title: Mantendo seu projeto atualizado com Dependabot e Github Actions description: Atualizar dependências é algo bem chato e demorado, mas não precisa ser. main-class: dev tags: - github - boas praticas - "" --- ## Introdução Fala 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). A 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. Mas 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. ## Versão em vídeo Para quem quiser assistir a versão em vídeo desse post, segue aí: ## Sobre o Dependabot O 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. O 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 =) ## Configurando o Dependabot Nó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: ### Utilizando via UI Para 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: ![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) Basta 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: ![Uma lista com vários repositórios a serem adicionados.](/assets/img/dependabot-ui-2.png) Basta 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? Logo 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: ![Uma tela de configuração permitindo definir quando atualizar, diretório a buscar e outras informações.](/assets/img/dependabot-ui-4.png) Você ali pode definir quando atualizar (diariamente, semanalmente, mensalmente e até live). Eu recomendo o diariamente, que já é mais do que suficiente. ### Via dependabot.yml Como 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. Você 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: ```yml version: 2 updates: - package-ecosystem: npm directory: "/" schedule: interval: daily open-pull-requests-limit: 10 ``` ## Sobre o Github Actions Vimos 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. No nosso caso, nós queremos rodar nosso `lint`, `tests` e `build` para garantir que tudo continua funcionando, mesmo com a nova atualização. ### Configurando o Github Actions Para configurar, o processo é bem similar ao `dependabot.yml`, nós também teremos um arquivo `yml` com algumas configurações bem definidas. A [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. No 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: ```yml name: ci on: [pull_request] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v1 with: node-version: 14.x - name: Install dependencies run: yarn install - name: Linting run: yarn lint - name: Test run: yarn test - name: Build run: yarn build ``` Nele 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`. Os 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. ## Conclusão Apó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. Espero 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! ================================================ FILE: posts/mask-e-clip-com-css-e-svg.md ================================================ --- layout: post date: 2018-01-24T21:31:00.000Z title: Mask e Clip com CSS e SVG description: Dois efeitos simples que podem transformar seu site com estilo. main-class: svg tags: - svg - css - mask - clip categories: - O mundo mágico do SVG --- ## Introdução Fala 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. ## Ideia do Post Eu 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. ![Um screenshot do email com 10M escrito sobre uma foto de uma cachoeira](/assets/img/mask-svg/screenshot.png) É 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! **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 =) ## Clipping Para 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: ![Uma forma sobre uma imagem criando o Clipping](https://getflywheel.com/wp-content/uploads/2016/08/css-svg-clipping-masking-clipping-graphic.jpg) ### Clip em ação Já entendendo a teoria, vamos logo para prática, porque é o que importa. É possível se criar o Clipping de duas formas. #### Clip-path com CSS Uma 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:

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

    Como você pode ver, eu utilizei duas classes com a propriedade `clip-path`: ```css .polygon { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .circle { clip-path: circle(100px at 150px 100px); } ``` Sobre 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. Para 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`. #### Clip-path com SVG Enquanto 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).

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

    Para fazer funcionar, é extremamente similar ao feito com o CSS, mas a diferença é que a forma é criada no SVG, segue abaixo o código: ```html ``` Repare 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: ```css clip-path: url('#triangle-mask'); ``` Gostou 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. ![Screenshot do site Clippy](/assets/img/mask-svg/clippy.png) ## Masks Diferente 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. ### Mask no SVG e no CSS Para criar as máscaras, nós utilizamos o `` do SVG e a propriedade `mask` do css. Segue abaixo um exemplo:

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

    Como 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);`. O 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:

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

    Repare 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');`. Ou 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. ### Mask-image E 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:

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

    Como 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: ```css .object-mask { mask-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Logo_of_Unsplash.svg); mask-repeat: no-repeat; mask-size: 350px; mask-position: center; } ``` Como 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. ## Momento Jabá Brincadeiras 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! ## Conclusão Bom 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! - [Masking vs. Clipping: When to Use Each](https://css-tricks.com/masking-vs-clipping-use/) - [Pen utilizando vídeo](https://codepen.io/daviddarnes/pen/vEjMLr) - [Pen com Vídeo no Hero](https://codepen.io/estevanmaito/pen/RamBKE) - [Pen com clip-path e fundo interativo](https://codepen.io/mhotovec/pen/WZWxKg) - [Pen com animações na mask](https://codepen.io/celli/pen/bExxQy) - [Página 404 com canvas + svg](https://codepen.io/tmrDevelops/pen/aNGKzN) ================================================ FILE: posts/medindo-performance-do-seu-site-com-lighthouse.md ================================================ --- layout: post date: 2018-03-16T14:42:05.000Z title: Medindo a performance do seu site com Lighthouse description: Uma ferramenta perfeita para dizer tudo que está bom e ruim no seu site. main-class: dev tags: - performance - pwa - seo categories: - Performance Web --- ## Introdução Fala 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é. Eu 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! Eu 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... Enquanto 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. ## Por que performance importa? Antes mesmo de começar a falar mais sobre a ferramenta do Lighthouse, a gente precisa entender porque performance é tão importante. É 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: * [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) * [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) E da mesma forma que uma boa performance traz dados bons, uma performance com problemas pode trazer sérios problemas. * [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) * [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/) É 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. ## O que é o Lighthouse? Pegando a descrição que a própria Google dá para o [Lighthouse](https://developers.google.com/web/tools/lighthouse/): > O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Abaixo você consegue ver como é a arquitetura do projeto e o processo que ela faz para analisar o seu site, é bem genial a parada! ![Arquitetura](https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/architecture.jpg) Na imagem acima só mostra 4 categorias mas a ferramenta analisa o site através de 5 categorias específicas que são: * Progressive Web App * Performance * Accessibility * Best Practices * SEO E 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. Eles 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. ## Como usar? Existem algumas formas possíveis de utilizar o Lighthouse hoje, que são: * [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. * 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. * Via terminal instalando com `npm install -g lighthouse` - funciona muito bem e gera o relatório em vários formatos. * [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. ## Analisando o relatório ![Relatório do Lighthouse](/assets/img/relatorio-lighthouse.png) Dentro do relatório ele mostra separadamente cada uma das categorias e mostra também uma separação em 3 partes: * **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. * **Opportunities**: que são coisas que já estão boas, mas você pode melhorar ainda mais. * **Passed Audits**: os pontos onde você completou com excelência. Cada 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: > 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. Se 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. ## Conclusão Bom, 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! Se 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 ================================================ FILE: posts/menu-sticky-e-smooth-scroll-com-css-puro.md ================================================ --- layout: post date: 2018-05-30T04:37:00.000Z title: "Menu Sticky e Smooth Scroll com CSS puro " description: Aprenda algumas propriedades bem interessantes do CSS e já saia brincando por aí. main-class: css tags: - frontend - css categories: - Dicas de CSS --- ## Introdução Fala 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. Eu já tinha pensando em fazer esse post, mas o [@felipefialho\_](https://twitter.com/felipefialho_) acabou dando uma forcinha quando criou o seguinte Tweet: Bom 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. ## O experimento ![Gif mostrando uma tela sendo scrollada, mostrando uma imagem do Samuel L Jackson indo junto com a tela fixa.](/assets/img/samuel-sticky.gif) Se 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! ## Position: sticky Essa é 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. Mas agora em 2016 o [sticky voltou](https://developers.google.com/web/updates/2016/12/position-sticky)! E como ele funciona? > 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`. Parece meio complicado né? Vamos tentar ver melhor na prática. ### Menu fixo Vamos lá, como foi feito o exemplo acima? Primeiro vendo o menu, temos o seguinte html: ```html

    Scroll & Sticky!

    ``` Reparem 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: ```css header { height: 90vh; } nav { position: sticky; top: 0; } ``` Se 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. Com 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. > E porque ele não some da tela por mais que faça scroll? Simples, 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. ### Samuel fixo Eu 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? Bom, vamos entender como esse funciona, primeiro, vamos ao markup: ```html ``` Reparem 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`. Agora então definindo o seguinte css: ```css .sticky { position: sticky; bottom: 50px; } ``` Eu 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`. ### Compatibilidade Essa 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). ## Smooth Scroll Por 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: ```css html { scroll-behavior: smooth; } ``` ### Compatibilidade Essa 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). ## Conclusão Bom 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 =) Eu 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/). ================================================ FILE: posts/meu-ano-de-2015.md ================================================ --- layout: post date: 2015-12-29T20:35:04.000Z title: Meu ano de 2015 description: Foi um ano ruim? Definitivamente NÃO, pelo menos para mim. Aqui vou falar sobre algumas das experiências e coisas que aprendi no ano. main-class: misc tags: - dev - review categories: null --- ## Introdução Como já é de praxe, depois de tantos posts, estou escrevendo mais um post, ouvindo música! =D E 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. Resolvi 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. ## Nascimento do Blog Sim, 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. A 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 Quando 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 Eu 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. ### Reconhecimento E 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: > Tu é o cara do Blog Azul não é? Aliá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: > "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 ### Estatísticas Foram **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. Agora 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! ![Gráfico de acessos do meu blog em 2015](/assets/img/meu-2015/acessos.png) E os 10 posts mais acessados foram: - [Como se tornar um Desenvolvedor Front End](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/) - [Como criar seções Fullscreen com CSS](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/) - [Começando com ReactJS](https://willianjusten.com.br/comecando-com-react/) - [3 Meses de Globo.com](https://willianjusten.com.br/3-meses-de-globocom/) - [Alguns seletores CSS importantes para Aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) - [Devo fazer faculdade?](https://willianjusten.com.br/devo-fazer-faculdade/) - [Técnicas de Aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/) - [Como ter Domínio Próprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/) - [Usando SVG Sprites](https://willianjusten.com.br/usando-svg-sprites/) - [Animações em SVG com CSS](https://willianjusten.com.br/animacoes-em-svg-com-css/) ## Eventos Esse foi O ano dos eventos para mim, eu fui em tantos que nem sei quantos foram, pior que acabei perdendo várias das credenciais =/ Queria ter ido até em mais, mas a falta de $ e tempo, impediram de ir em alguns. Nunca 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 ![Foto de credenciais de eventos](/assets/img/meu-2015/eventos.jpg) E 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! Foi 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... Eu palestrei no mesmo evento que o [Fernando Masanori](https://www.twitter.com/fmasanori)! Esse cara é uma lenda do Python para mim <3 ### Networking ![Evento na BrazilJS](/assets/img/meu-2015/amigos.jpg) Nesses 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: - [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/ - [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. - [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. - Jader Gomes - mais um baiano que veio para o evento me prestigiar e pegar carioquinhas... - Thales Marchetti - cara gente boa pacas que conheci no evento do imasters e graças a ele, arrumei meu novo teto no Rio. Enfim, 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/) ## Opensource Esse 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. ![Gráfico do Github](/assets/img/meu-2015/opensource.png) Os projetos que eu destaco desse ano para mim foram: - [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!! ![Imagem de um cara falando que estão usando o Screamer na Prefeitura de Manaus](/assets/img/meu-2015/screamer.png) - [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. - [FreeTime](https://github.com/free-time/free-time.github.io) - projeto que eu tive o orgulho de participar e ajudar. - [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 Enfim, 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 Pretendo continuar criando coisinhas para que todos possam usar e que venha 2016! ## Ano novo, vida nova, blog novo... Bom, 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/). Aprendi 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. Mas...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 E 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 =) ## Mas pera aí...e as metas? Exatamente isso, não tem meta! Quando a gente atingir a meta, nós dobramos a meta! O 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!** ================================================ FILE: posts/meu-ano-de-2016.md ================================================ --- layout: post date: 2016-12-23T01:21:04.000Z title: Meu ano de 2016 description: Um ano super cheio, com vários eventos, projetos, mudanças e muito mais. main-class: misc tags: - dev - review categories: null --- ## Introdução Fala 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... Enquanto 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. Eu 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. ## Meu Blog Exatamente 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**. Abaixo segue o gráfico de acessos do meu blog nesse ano de 2016: ![Gráfico de Acessos do Blog em 2016](/assets/img/meu-ano-2016/acessos.png) Foram 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**. E a lista de posts/páginas mais acessadas no ano foram: - [Começando com ReactJS](https://willianjusten.com.br/comecando-com-react/) - [O que ninguém diz para os iniciantes](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/) - [Página de Séries](https://willianjusten.com.br/series/) - [Como se tornar um Desenvolvedor Frontend](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/) - [Página de Cursos](https://willianjusten.com.br/cursos/) - [Meus plugins favoritos do Sublime](https://willianjusten.com.br/meus-plugins-favoritos-do-sublime-text/) - [Novo curso de Git e Github para Iniciantes](https://willianjusten.com.br/novo-curso-de-git-e-github-para-iniciantes/) - [Como usar o ReactJS](https://willianjusten.com.br/como-usar-o-reactjs/) - [Falando sobre RSCSS](https://willianjusten.com.br/falando-sobre-rscss/) - [Organizando seu css com ITCSS](https://willianjusten.com.br/organizando-seu-css-com-itcss/) ## Cursos Depois 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. E 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. Depois 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. No 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! E 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. ## Eventos Se 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! Eu 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: ![Foto do Front in Rio](/assets/img/meu-ano-2016/frontinrio.jpg) Depois 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! Nessa 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: ![Foto do Code in The Dark](/assets/img/meu-ano-2016/code-in-the-dark.jpg) E 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: ![Foto do Front in Sampa](/assets/img/meu-ano-2016/frontinsampa.jpg) Um 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: ![Foto do Front in BH](/assets/img/meu-ano-2016/frontinbh.jpg) E 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 E ter muiiito barulho no final da apresentação foi demais! E 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. O 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). ## Opensource Como 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: ![1332 Contribuições no Github](/assets/img/meu-ano-2016/contribs.png) Sim, eu sei que depois de Setembro eu dei uma caída, mas prometo voltar a toda! E os projetos que destaco desse ano foram: - [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. - [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/). - [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) - [Cards Jekyll Template](https://github.com/willianjusten/cards-jekyll-template) - como todo tema que eu crio, também liberei esse tema para opensource. Sei 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 Além desses projetos, ainda tive uma participação em uma iniciativa muito maneira, que foi: - [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. ## Saída de empresa e mais mudanças Esse 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). Alé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 Nesse 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. Alé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: - Holyhead (País de Gales) - Edinburgo, Highlands, Loch Ness (Escócia) - Bruxelas, Bruges (Bélgica) - Lisboa, Sintra (Portugal) - Paris (França) E pretendo aumentar ainda mais a lista, incluindo alguns eventos por aqui e ali! ## Conclusão É 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! ## E quanto as metas para 2017? Exatamente isso, não tem meta! Quando a gente atingir a meta, nós dobramos a meta! ================================================ FILE: posts/meu-ano-de-2017.md ================================================ --- layout: post date: 2017-12-22T17:02:58.000Z title: Meu ano de 2017 description: Muitos países e cidades visitadas, nova plataforma de cursos e recordes de alunos! main-class: misc tags: - dev - review categories: null --- ## Introdução Fala pessoal, como faço todos os anos desde quando comecei meu blog, lá vai o meu sobre meu ano de 2017! =D Se 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! O 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 Enquanto 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. Bom, 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. ## Meu blog Esse 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. Esse 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 ![Gráfico do Analytics de 2017](/assets/img/meu-ano-2017/analytics.png) Eu 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: - [Minha Home](https://willianjusten.com.br/) - curioso como é o maior canal de entrada - [Começando com React](https://willianjusten.com.br/comecando-com-react/) - Esse post de 2015 continua a bombar com o hype do React. - [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) - [Página de Cursos](https://willianjusten.com.br/cursos/) - Com o lançamento dos cursos na Udemy essa página subiu muito. - [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! - [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 - [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. - [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 - [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. - [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. Bom, é 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. ## Cursos Em 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! Lembro 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! Sobre 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. E 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! =) ## Trabalho, Viagens e Fotografia Diferente 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! No 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. De 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. E 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á: Apó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.

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

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

    ### Chegada em Iceland Eu 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: ![Vista de Iceland através da Janela do avião, o país todo branco de neve](/assets/img/meu-ano-2017/chegada.jpg) Como 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. Eu 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. ![Cachoeira Skógafoss](https://source.unsplash.com/JuhxRDzAHok/1200x900) Cachoeira 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). ![Glacier em Höfn](https://source.unsplash.com/WMOwLypr_2I/1200x900) Sou 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). ![Jokulrsalron](https://source.unsplash.com/LzwNq8DVQzs/1200x900) Esse 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). E 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 Abaixo segue uma das fotos =)
    ## Outros países depois de Iceland Apó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. ![Memorial aos Judeus em Berlin](https://source.unsplash.com/D4iryoQJFk4/1200x900) Uma visão diferente do Memorial aos Judes de Berlin. [Download em alta qualidade](https://unsplash.com/photos/D4iryoQJFk4). ![Estádio de Futebol na Varsóvia](https://source.unsplash.com/KqpDuf1i83w/1200x900) Um estádio de Futebol na Varsóvia [Download em alta qualidade](https://unsplash.com/photos/KqpDuf1i83w). ![Uma ponte no Rio Danúbio em Vienna](https://source.unsplash.com/wTYMbdQqyIk/1200x900) Uma 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). ### Uma descoberta muito feliz, Austria! Eu 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. E claro, lá eu tirei várias fotos que são minhas favoritas, como, por exemplo essa foto da floresta em Schladming. ![Floresta de Schladming](https://source.unsplash.com/2UJDfClMpiA/1200x900) Como 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). ![Casa do 007 Spectre](https://source.unsplash.com/5tUmubhG6uI/1200x900) Eu 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). Enfim, tem muitas fotos de lá, é melhor ir no [Unsplash](https://unsplash.com/@willianjusten) ou [Instagram](https://www.instagram.com/will_justen/). ## Volta para casa, descanso e BrazilJS Depois 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 Lá 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 ## Volta a Europa e encontro do Time Toptal Final 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. E 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. Enfim, 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! ### Peregrinando na Espanha Depois 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 ![Vista do Metropol Parasol por cima](https://source.unsplash.com/v4t6eg2VMWE/1200x900) Eu 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). ![Puente Nuevo em Ronda](https://source.unsplash.com/vgfT4xaRs_c/1200x900) Essa 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). ![Vista do Castilo de Gibralfaro em Málaga](https://source.unsplash.com/7vKP5BAm8wg/1200x900) Essa é 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). Eu 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. ## Conclusão É 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. E quanto a parte que vocês já conhecem, a ideia é escrever mais posts, criar mais cursos e voltar a ativa com palestras e eventos! ================================================ FILE: posts/meu-ano-de-2018.md ================================================ --- layout: post date: 2018-12-27T04:46:00.000Z title: Meu ano de 2018 description: Cursos novos, canal no Youtube, foco em saúde e um pouco mais. Um pouquinho desse meu ano e algumas metas para o ano que vem. main-class: misc tags: - dev - remoto - cursos --- ## Introdução Como 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: - [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) - [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) - [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) Como 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! =) ## Meu Blog Apesar 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). Dentre as mudanças feitas, foram: - [Adição do muiiito pedido Night Mode](https://willianjusten.com.br/adicionando-night-mode-no-seu-site/) - [Mudança para usar fontes do sistema](https://willianjusten.com.br/performance-web-usando-fontes-do-sistema/) - [Uso de critical css inline no Jekyll](https://willianjusten.com.br/perfomance-web-critical-css-e-jekyll/) - [Uso de script para varrer links quebrados](https://willianjusten.com.br/varrendo-seu-site-atras-de-links-quebrados/) - [Adaptando o blog para PWA com artigos offline e até joguinho!](https://willianjusten.com.br/como-fazer-seu-site-funcionar-offline-com-pwa/) - [Migração para a Netlify](https://willianjusten.com.br/como-colocar-seu-site-no-ar-de-graca/) Com 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: ![Acessos no blog, um gráfico do Analytics](/assets/img/acessos-2018.png) Até 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. Os posts mais acessadas do ano foram: - [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. - [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. - [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. - [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. - [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. - [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_). ## Cursos Eu 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. Depois 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). Lá 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 E 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. Esse ano eu alcancei a incrível marca de **mais de 60 mil alunos!** O que só me motiva ainda mais =) Para o ano que vem, eu tenho algumas coisas em mente, vamos ver o que vai rolar. ~~Vai ter coisa de React sim, pode deixar.~~ ## Trabalho Assim 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/). Apesar 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 ## Viagens Diferente do ano passado, esse ano eu fiz menos viagens e somente pela América do Sul. Eu 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). ![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) E 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. ![Um vulcão num fim de tarde](/assets/img/chile-2018.jpeg) Nã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. ## Saúde Essa 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. Para 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. Foi 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. Nessa 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. Uma 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. Ahhh, como poderia me esquecer, eu arrumei uma gatinha para me fazer companhia já que trabalho em casa, o nome dela é Arya =) ![Foto de uma gata olhando para o seu brinquedo](https://source.unsplash.com/1hBWrLIDSCc/500x800) ## Conclusão Esse 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. E 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 Um bom final de ano para todos vocês e um ano novo melhor ainda! ================================================ FILE: posts/meu-ano-de-2019.md ================================================ --- layout: post date: 2019-12-27T15:30:11.000Z title: Meu ano de 2019 description: Um ano movimentado na Toptal, blog novo, curso novo e viagens como sempre. main-class: misc tags: - cursos - blog --- ## Introdução Como 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: - [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) - [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) - [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) - [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/) Esse 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). Enfim, 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 Vamos ao que interessa e falar sobre as coisas que me aconteceram esse ano. ## Blog Depois 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: - Usa React/GraphQL, que são tecnologias que uso no meu dia-a-dia - Focado em performance (me preocupo demais com isso) - Funciona bem no Netlify (que já usava no Jekyll) - Vira um PWA com uma linha Como 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 As grandes mudanças com o visual foram: - 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 - 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 - 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 Se 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/). ### Algumas métricas Como eu sou o maluco das métricas, vão aqui algumas: ### Usuários no Ano ![Gráfico do analytics mostrando que tive 200.743 usuarios no ano](/assets/img/acessos-2019.png) Tive 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. ### Preferência Visual ![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) Aqui 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. ### Cidades que mais acessam ![Tabela de cidades que mais acessam: São Paulo, Rio de Janeiro, BH, não definido, Curitiba](/assets/img/cidades-2019.png) Nã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 ### Sistemas Operacionais e Browsers mais utilizados ![Lista dos SO mais utilizados: Windows, Linux, Android, Mac, iOS](/assets/img/so-2019.png) Na 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. É 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. ![Lista dos Browsers mais utilizados: Chrome, Firefox, Safari, Opera, Android](/assets/img/browsers-2019.png) Na lista dos browsers, nada muito diferente do que imaginava, com exceção do **Opera**! WTF? Pensei que esse browser tinha morrido hahaha ## Troca de time na Toptal Desde 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. No 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. Dentro dessa parte, eu trabalho bastante com React, Redux, Apollo, GraphQL, mas tem coisinhas do backend que são feitas em Ruby on Rails. Espero que o ano que vem tenham ainda mais desafios e que eu possa aprender bastante com eles. ## Lançamento do curso de Gatsby Logo 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. Eu 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. O curso se mostrou um sucesso e tem uma das mais altas classificações lá na Udemy, com vários reviews muito legais! ![Alguns reviews do curso de Gatsby tendo 5 estrelas e com ótimos elogios.](/assets/img/reviews-gatsby.png) ## Encontros da Toptal Outra coisa bastante legal desse ano é que não tive só um encontro grande da Toptal, mas **dois** encontros! ### Brazil Gathering O 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 ![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) Nessa 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) E bom, o que falar desse paraíso? ![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) E 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! ![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) Se 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) ### Encontro do time em Barcelona Apenas 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! ![Foto com 18 pessoas em frente a um restaurante](/assets/img/encontro-barcelona.jpg) Nessa 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 ## Viagem para Itália e Suiça Aproveitando 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. ### Workshop de Fotografia nas Dolomitas Mas 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! Aqui vão algumas fotos dessa viagem: ![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) Esse é 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). ![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) Essa 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). ![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) Na 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). Se quiser ver mais fotos (ainda estou subindo outras), é só acessar [essa collection no Unsplash](https://unsplash.com/collections/8919833/my-adventures-in-dolomites). ### Um passeio pela maravilhosa e CARA Suiça Sempre 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: ![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) Esse é 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). ![Foto de um trem passando num viaduto bem alto entre montanhas.](/assets/img/willian-justen-de-vasconcellos-ubwnghh-jie-unsplash.jpg) Imagina 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). ## Conclusão Quando 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! E 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 ================================================ FILE: posts/meu-ano-de-2020.md ================================================ --- layout: post date: 2020-12-28T02:53:47.000Z title: Meu ano de 2020 description: Um ano complicado, mas com boas vitórias também. main-class: misc tags: - retrospectiva --- ## Introdução Como 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: * [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) * [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) * [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) * [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/) * [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/) Esse ano eu ouvi bastante coisa como sempre, mas foram bem diferentes, então vão aqui algumas coisas: * [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. * [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! * [Perturbator](https://open.spotify.com/artist/244uLu9lkdw39BJwlul3k8?si=2XLjGzzqSLey24opxGy_gA) - perfeito para trabalhar focadão com synthwave pesadão a la Cyberpunk Mas, 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 ## Blog Ano 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. ### Algumas métricas do blog Como faço todo ano e gosto de comparar e analisar os dados, seguem alguns dados desse ano de 2020. ## Usuários do ano ![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) Como 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. Apesar 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. ## O ano do vídeo! Canal no YouTube As 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 E, 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! ![Gráfico mostrando comparação entre videos de 2019 para 2020.](/assets/img/videos-publicados.png) Mas esses números tem uma razão para serem tão maiores também. Eu criei séries maiores diretamente para o YouTube. Como: * [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! * [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. * [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) ### Mais interação e diferentes formatos Eu 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. Meus últimos vídeos tiveram um bom número de views (para o meu humilde canal), então devo continuar com essa linha: * [Monitores, produtividade e minha preferência](https://www.youtube.com/watch?v=3yBOg0Hhmtw) * [Comunicação Assertiva](https://www.youtube.com/watch?v=wRoE7MFvTAU) * [Será que sou bom o suficiente?](https://www.youtube.com/watch?v=2g181ibXzEM) ### Lives Outra 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! Se 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! Minha [ú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. ## Saída da Toptal, depressão e saúde... Eu 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é. Ano 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. Para 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. Eu 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. Por 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. ## Curso de React Avançado Eu 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. Nesse 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. Espero 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. Tive 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. ## GitHub Stars Uma 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. Eu 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! Eles 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! ## Mudança e qualidade de vida Agora 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ã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. Agora 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!). ![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) ## Descanso e PS5 Como 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. Nesse 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... ## E o ano que vem? Bom, 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! E 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**! E 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? Espero que tenha gostado do post e qualquer coisa, comenta lá no [meu Twitter](https://twitter.com/Willian_justen). ================================================ FILE: posts/meu-ano-de-2021.md ================================================ --- layout: post date: 2021-12-21T08:00:40.000Z title: Meu ano de 2021 description: Ano passado já foi complicado para mim, mas esse ano foi ainda mais. main-class: misc tags: - retrospectiva - ano --- ## Introdução Como 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: * [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) * [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) * [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) * [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/) * [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/) * [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/) Sobre 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: * [The Weeknd](https://open.spotify.com/artist/1Xyo4u8uXC1ZmMpatF05PJ?si=oNpWDQaWRWCpbq08t7T85A): ouvi bastante, ainda mais a partir de Outubro quando decidi ir para NY * [Post Malone](https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60?si=Zc9SDVX_QfuVPPaiilqIVg): outro que ouvi muito, principalmente no Canadá com meu amigo Marcus * [Low Hum](https://open.spotify.com/artist/7AfmYGPRYiNkwKfV8LrqLd?si=tel88LurTiCBWRLtUywqxg): um som meio depressivo e experimental, que foi a vibe do meu ano. Bom, 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. ## Blog Esse 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. Apesar 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! Segue abaixo o gráfico do Google Analytics desse ano: ![Grafico do Google indicando uma queda de quase 30% de usuarios](/assets/img/users-blog-2021.png) Como 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é. ## Canal do YouTube Eu 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. ![Grafico indicando que 2020 o crescimento foi maior que 2021](/assets/img/youtube-2021.png) Diria 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. ## Finalização do curso React Avançado Em 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. Tenho 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. Mesmo 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. Mas, é 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. ## Volta rápida ao trabalho Como 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. Uma 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). Só 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. ## Mini viagem e prêmio Já 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. Pensando 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). ![Foto de drone das ondas da praia, uma agua bem azul e areia clara](/assets/img/willian-justen-de-vasconcellos-fm0czakepsq-unsplash.jpg) ![Foto de uma ilha num tempo bem sombrio de chuva](/assets/img/willian-justen-de-vasconcellos-gnkzxu7kp6u-unsplash.jpg) Ainda 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. Numa 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. ![Foto de um trofeu de gato dourado escrito Top Teacher 2021](/assets/img/github-award.jpeg) Gostaria inclusive de agradecer a todos os meus alunos que estejam lendo esse post, pois esse prêmio é de vocês também. ## Término de noivado e decisão de viajar Logo 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: ![Eu perguntando se o convite para Vancouver ainda estava de pe e ele dizendo que sim](/assets/img/mensagem-marcus.png) E 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. ## Viagem para NY Eu 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. Primeiro 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. Sobre 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! Eu 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. Lá 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. ## Assistir a NBA de perto Para 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. Em 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. ## Vancouver e um irmão "mais novo" Como 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! Cheguei 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. E 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 Enfim, 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ã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. ## Volta e Covid Bom, 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. ## E o ano que vem? Bom, 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. ================================================ FILE: posts/meu-ano-de-2023.md ================================================ --- layout: post date: 2023-12-26T08:00:40.000Z title: Meu ano de 2023 description: Retornando os posts de retrospectiva main-class: misc tags: - retrospectiva - ano --- ## Introdução Uma 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. Se quiser ver minha evolução ao longo de tantos anos, ficam aqui os posts anteriores: - [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) - [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) - [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) - [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/) - [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/) - [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/) - [Meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021/) E 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: - [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. - [Trilha sonora do Spider-Man - Across the Spider-Verse](https://open.spotify.com/album/4ocB97o3gdrIYyIwYSSwVy?si=hqDjBTkkQY6vjoKC1MQw8Q) - [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. ## Blog Esse 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: - [Valorize suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas) - [Feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito) - [Está tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada) - [Mude!](https://willianjusten.com.br/mude) - [Burnout dura mais que você imagina!](https://willianjusten.com.br/burnout-e-o-tempo) Foram 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 =) ## Canal do YouTube Eu 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. Então minhas estátiscas do YouTube ficaram assim: ![Seu canal teve 423.560 visualizações nos últimos 365 dias](/assets/img/youtube-2023.png) Aí 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. ## Trabalho Eu 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". ![Prêmio de Take pride in your work](/assets/img/premio.jpeg) Apesar 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 ## Ida para França e acidente! Eu 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. O 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. No 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. ![Eu no hospital](/assets/img/ombro.jpeg) É 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. ## Chamonix Apesar 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. ![Chamonix](/assets/img/chamonix.jpg) Tirei algumas fotinhas por lá, se quiser ver mais, estão no meu [Unsplash](https://unsplash.com/collections/lXqD_F-DDVw/my-adventures-in-chamonix). ## Retorno ao Brasil Como 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. ## Frontinsampa, SP e apartamento No 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. Mas 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. Foi 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.... ## Seattle e LA ![Panorâmica de Seattle](/assets/img/seattle.jpg) Essa 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. Foi 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. Seattle é 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. Você pode ver mais das minhas fotos de Seattle no meu [Unsplash](https://unsplash.com/collections/-TIivX5Mug8/my-adventures-in-seattle). Depois 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. Alé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. Você pode ver mais das minhas fotos de LA no meu [Unsplash](https://unsplash.com/collections/50RZQWP5DSo/my-adventures-in-la). ## Desafios e exaustão Agora 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. ## E o ano que vem? Todo ano eu traço alguns objetivos, esses ficam só para mim, mas espero que eu consiga realizar boa parte deles. E vocês? Tiveram um bom 2023? O que aconteceu de mais legal para vocês? Me contem nos comentários! ================================================ FILE: posts/meu-ano-de-2024.md ================================================ --- layout: post date: 2024-12-26T08:00:40.000Z title: Meu ano de 2024 description: Mudança para São Paulo, viagens, trabalho e um pouco mais. main-class: misc tags: - retrospectiva - ano --- ## Introdução Sei 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! Escrever 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. Se quiser ver minha evolução ao longo de tantos anos, ficam aqui os posts anteriores: - [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) - [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/) - [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/) - [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/) - [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/) - [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/) - [Meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021/) - [Meu ano de 2023](https://willianjusten.com.br/meu-ano-de-2023/) E 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: - 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. - 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)) ## Blog Eu 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. ## Canal do YouTube Eu 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. Então minhas estátiscas do YouTube ficaram assim: ![Seu canal teve 258.649 visualizações nos últimos 365 dias](/assets/img/youtube-2024.png) Aí 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**! ## Trabalho Eu 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). Tem 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. Além disso, também participei dos hackathons semestrais da empresa e ganhamos tanto em Junho quanto em Dezembro em diferentes categorias! 🎉🎉🎉 ## Mudança para SP e realizar sonho da minha mãe Ano 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. Apesar 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. Como 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. ## Experimentando São Paulo Muitos 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. Eu 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! ![Sol](/assets/img/sol-casa-24.jpg) ## Viagens Eu 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. ![Santiago/Chile -24](/assets/img/santiago-chile-24.jpg) Pouco 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. E 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. Lá 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. Ainda 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! Foram 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. ## Shows Teve 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! Eu 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! Depois 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. Como 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. E 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. ![Shows 24](/assets/img/shows-24.jpg) ## React Avançado de graça No 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. ## Volta a criação de conteúdo Depois 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). Com 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é? ## Spoilers Nã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! E 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?! Um grande abraço a todos, espero que tenham tido um ano bem legal e que o ano que vem venha ainda melhor! ================================================ FILE: posts/meu-dia-a-dia-como-dev-frontend.md ================================================ --- layout: post date: 2015-01-15T20:17:11.000Z title: Meu dia a dia como dev frontend description: Um pouco do meu dia a dia como dev frontend. Minha máquina, meus programas, arquivos, configurações. main-class: misc tags: - frontend categories: null --- Como 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. E teve esse pedido do [Matheus Moraes](https://github.com/matheusmmo): > 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. Um papo um pouco mais descontraído, sobre experiências. Eu 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. Quem 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. Enfim, é isso. Fica a dica ai pra quem quiser fazer ^^ O [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 =) ## Meu cantinho ![Mesa de trabalho](/assets/img/workflow/mesa.jpg) Eu 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. Utilizei 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). Praticamente 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. ![Quadro Kanban](/assets/img/workflow/quadro.jpg) Tenho 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. ## Aplicativos Como 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. Para codar, utilizo o [Sublime Text 3](http://www.sublimetext.com/3) com alguns [plugins fundamentais](https://github.com/willianjusten/sublime-preferences) para minha vida. Meu 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. #### Outras coisinhas que uso * [Mou](http://25.io/mou/) - para escrever Markdown e ter um preview bonitinho. * [Vagrant](https://www.vagrantup.com/) - para criar ambientes de desenvolvimento separados. * [Dropbox](https://www.dropbox.com/) - meu salvador da pátria para guardar todas as minhas coisas. * [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. * [Spotify](https://www.spotify.com/br/) - sério, ele é muito importante para mim, sem ele, não trabalho direito. ## Workflow Eu mudo bastante as ferramentas e tecnologias de acordo com os projetos, mas o que não falta nunca: * [Gulp](http://gulpjs.com/) - meu automatizador de tarefas padrão * [Stylus](http://learnboost.github.io/stylus/) - meu pre-processador css favorito Eu tenho um boilerplate que uso bastante e adapto bastante também, que é o [Fast](https://github.com/willianjusten/Fast) Em 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/ ================================================ FILE: posts/meu-processo-para-a-toptal.md ================================================ --- layout: post date: 2017-07-21T20:20:15.000Z title: Meu processo para a Toptal description: Algumas coisas que aconteceram até eu entrar na Toptal e algumas das dúvidas comuns. main-class: misc tags: - remoto - toptal categories: null --- ## Introdução Faala 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 Enquanto 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. ## Como a Toptal funciona? Antes 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. E 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. E 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. ## Confusão Em 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 Existem 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. ## Processo Bom, 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/). O 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! E 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). ### Primeiro Contato Meu 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. Foi 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. Logo 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. Pouco 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. ### Etapa 2 Essa 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. Depois 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. O 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 No 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. ### Etapa 3 Essa 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. Eu 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. Eu 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! Eu 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. E 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ã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! ### Etapa 4 Diferente 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. Está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. Na 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) E 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. ### Início na Toptal Logo 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 No 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. ## Como funciona o Core Team da Toptal? Bom, 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. Por 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. Se 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 ## Conclusão Bom 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 ================================================ FILE: posts/meu-setup.md ================================================ --- layout: post date: 2018-10-19T07:03:08.000Z title: Meu Setup description: Quais ferramentas eu tenho, que programas eu uso e outras coisinhas mais. main-class: misc tags: - setup - code --- ## Introdução Faaaaala 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! A 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 Como 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! ## Quais tranqueiras eu tenho? ### Computador Eu tenho um **Macbook Pro 15" com Touchbar**, é uma máquina realmente muito boa e a tela é a coisa mais bonita que tem. **Os prós:** - Tela muito boa com resolução fantástica - 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. - O material é ainda muito bem cuidado e o Mac apesar de grande (15") ainda é bem leve. **Contras:** - A touchbar só serve para gastar sua bateria e custar mais caro, achei completamente inútil - O teclado é a pior porcaria que inventaram (pelo menos agora são obrigados a trocar as teclas defeituosas de graça) ### Monitor Meu 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. Como 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. O 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. ### Fone de Ouvido Passo 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. Depois 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 O 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. ### Câmera e Drone Para 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/). Tudo 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. Ano 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) ### Cadeira Sim, 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. Decidi 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. A 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. No 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). ### Softwares Como 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. Para 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). Meu 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... Como player de música, eu uso o [Spotify](https://www.spotify.com/br/) sem pensar duas vezes. Para 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. Outro 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. Uso 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. No 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. As 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 =/ Para 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. Para 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. Na 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 Para 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! Enfim, acho que de apps diários são esses, mas se vocês tiverem dúvidas mais específicas é só falar também =D ### Conclusão Bom 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. Se 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 ================================================ FILE: posts/meus-15-dias-no-chile.md ================================================ --- layout: post date: 2019-07-25T10:17:49.000Z title: Meus 15 dias no Chile description: Meu roteiro, lugares que me hospedei, passeios que fiz e outras curiosidades. main-class: misc tags: - viagem - remoto - exterior categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Eu 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. Eu 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). Enquanto 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. ## Por que da viagem? Eu 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. Como 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: ![Mensagem no Whatsapp: Eu: Chile 29/11 a 14/12 por 750 conto, vamos?](/assets/img/convite-julia.png) E 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/). E não poderia ter sido uma companhia melhor, nós rimos e zoamos desde o primeiro segundo da viagem até o último hahaha ## Roteiro No 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. Sabendo 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. Então, em resumo, os pontos foram: - **29 de Novembro**: Voo Rio de Janeiro - Santiago e Santiago - Puerto Montt - **30 de Novembro até 3 de Dezembro**: Frutillar e arredores - **3 de Dezembro até 9 de Dezembro**: Púcon e arredores - **10 de Dezembro até 12 de Dezembro**: Valparaíso / Viña del Mar - **12 de Dezembro até 15 de Dezembro**: Santiago Fizemos alguns passeios bate e volta que eu irei falar nos dias/tópicos abaixo. Outra 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). ## Curiosidades e Informações pertinentes - A comida no Chile é realmente muito cara! - Fique atento se a casa tem água filtrada, muitos lugares são extremamente secos e a água é fundamental. - Assim como no Peru, sempre tente negociar as coisas e passeios, todos dão desconto. - Chilenos só tomam Nescafé ou outro café horrível! Não tome café em lugar nenhum, você irá se decepcionar. - 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. - 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. - 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. - Existem vulcões em tudo que é canto e você sempre se surpreende com a beleza deles. - 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. - As viagens de ônibus funcionam muito bem, mesmo as mais demoradas. ## Companhia aérea - Sky Airlines ![Foto da asa do avião com um arco íris](/assets/img/sky-airlines.jpg) Essa é 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. Ou 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! ## Hospedagem Nessa 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. Em 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. Aliá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 E 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! ## Santiago - Puerto Montt (30/11) Como 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. Tudo 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. Depois 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. Chegando 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. ![Foto de um quarto espaçoso com 3 camas](/assets/img/puerto-montt-airbnb.png) Assim 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. ## Frutillar (30/11 a 03/12) Ahh 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). Frutillar 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! Alé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. ![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) O [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** ![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) Lá 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: > Se o portão está aberto, deve poder entrar né? Nós "invadimos" a fazenda e acabamos descobrindo que estava acontecendo um casamento, tiramos algumas fotos na encolha e fomos embora xD ![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) Outra 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. Para 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. ![Um rio muito bonito com a imagem de um vulcão enorme atrás.](/assets/img/petrohue.jpg) Depois 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. Como 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 ![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) ## Púcon (03/12 a 09/12) Essa 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. O 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! ![Um gato negro próximo a umas flores rosas](/assets/img/chacho.jpg) No 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). ### Huilo Huilo Nosso 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. Sobre 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. O que salvou demais na minha opinião, foi a cachoeira, que é extremamente bonita e deu uma foto que gosto bastante, que está abaixo: ![Uma linda cachoeira em volta de bastante verde.](/assets/img/salto-huilo-huilo.jpg) ### Vulcão Villarica e Indômito Chegamos 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. ![Foto do vulcão villarica](/assets/img/viagem-chile.jpg) Infelizmente 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! Nesse 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. ![Foto de uma mão segurando uma cerveja em frente a uma piscina coberta e cadeiras para descansar.](/assets/img/indomito.jpg) ### Termas Geométricas Um 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! O 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! ![Duas fotos: lado esquerdo: uma cachoeira, lado direito: uma ponte de madeira vermelha com bastante vegetação ao redor.](/assets/img/geometricas.jpg) ### Playa Negra Em 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. Após dar uma passada lá, também fomos em algumas lojinhas de artesanato numas feirinhas que tem por ali. ![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) ## Valparaíso - Viña del Mar (10/12 - 12/12) Depois 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. Em 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. Valparaí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. ![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) E 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!). ![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) ## Santiago (13/12 - 15/12) Essa 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. Uma 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. Outro 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á. Por 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. ## Resumo, mais fotos, vídeos, etc... Num 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. Se 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ê! Eu 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. Eu 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. O 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. ## Agradecimento Gostaria 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. ================================================ FILE: posts/meus-20-dias-no-peru.md ================================================ --- layout: post date: 2018-05-14T08:11:28.000Z title: Meus 20 dias no Peru description: Um pouco do roteiro que fiz, lugares que me hospedei, trilhas que fiz, meus equipamentos e mais. main-class: misc tags: - travel - ferias - airbnb categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Como 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. Algumas 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). ## Por que de ir para o Peru? Quem 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. Comecei 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... Nas 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! ## Roteiro que eu fiz Como 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. Nessas 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. Eu vou separar a viagem pelos lugares que fui, pois acho que vai ficar mais fácil de ir se localizando. ## Curiosidades e informações pertinentes - 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! - 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. - Tenha em mente que a hospedagem e comida são baratos, mas os passeios relativamente caros, então vai guardando os centavinhos. - A altitude é muito fdp sim, então tome sempre chá de coca, mastigue folha e beba muita água. - 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. - 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. - Ande bastante! Sempre tem coisinhas para ver, principalmente na cidade de Cusco. - Sempre pergunte o percurso para os guias, as vezes pode ter algo que você não queira fazer ou queira mudar. - 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. - 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... - 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. - 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. - 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. - Leve casaco impermeável, dependendo da época, vai sempre chover um pouco. ## Cusco (04/04 - 08/04) ![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) Você 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) Foi 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. No 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. Lá no Airbnb, mal chegamos e já fomos recebidos pela nossa host com o famoso chá de coca, que sim, funciona bastante contra o soroche. No 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. Nesse 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. Nos 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! ### Impressões e Informações Nó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 - Uma cidade bastante rica culturamente. - Bastante acolhedora. - Bem turística, cheia de vendinhas em todos os lugares. Preste atenção em todas as vielas. - 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. - Eles tem McDonalds, Starbucks e KFC! Coisa rara no Peru! - Dá para se locomover para todos os lugares a pé e eu recomendo fazer isso! - Lembre de guardar vários dias nessa cidade, pois todos os passeios saem dela. ## Maras/Moray (06/04) ![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) Você 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) Foi 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. Moray é 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! Já 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. Aqui 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! ### Impressões e Informações - 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). - Maras tem um visual bem bonito, mas não tem muita coisa de história nem nada. - O tour para esse passeio foi **R\$25** e eles buscam de Cusco e levam até lá. ## Vale Sagrado (07/04) ![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) Você 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) O 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. Nossa 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. Depois de Pisac fomos para Ollantaytambo que é uma puta escadaria! Lá o guia fez mais algumas explicações e é isso. Em 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). ### Impressões e Informações - O tour foi de **R\$25** incluindo o almoço - O passeio durou o dia inteiro, saindo de 8h e chegando as 19h aprox. - Pisac é um lugar que daria para ficar o dia inteiro, muitas ruínas e com uma vista muito bonita. - Chinchero tem umas ruínas, mas não conseguimos visitar por causa da hora. ## Machu Picchu (08/04 - 09/04) ![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) Você 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) Saí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. Existem várias formas de se chegar a Machu Picchu, que são: - `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. - `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. - `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. Ficamos 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. Acordamos 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 Já 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. ### Impressões e Informações - 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**. - Machu Picchu é grande para caramba, muito maior do que nós imaginávamos pelas fotos. - 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. - 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ão esqueça de carimbar seu passaporte no final do passeio. É de graça e bem legal! ## Laguna Humantay (10/04) ![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) Você 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) Eu 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. Demos 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. Demoramos 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. Chegando 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. Uma 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á. ### Impressões e Informações - O passeio custou **R\$65/pessoa**, pois falavam que era um passeio mais exclusivo (exclusivo uma ova!) - 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ão esqueça de levar coca de todas as formas e água. Um lanchinho também é bom para dentro da van. - Aproveite para tirar fotos no caminho enquanto descansa, mas não pare só para tirar fotos e por um tempo muito longo. - 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. ## Rainbow Mountain (11/04) **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 ## Cusco - Lima - Ica (12/04) Decidimos 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. Fomos 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. Depois 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!~~ Lá 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 ## Ica - Huacachina (12/04 - 15/04) ![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) Você 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) Confesso, 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). Num 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! Em 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! ### Impressões e Informações - Se locomova de Tuktuk, uns carrinhos/moto indianos que custam muito barato. Certas viagens pagamos **3 reais!** - Não deixe de fazer o passeio de bugre, é muito divertido! - 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. ## Huaraz (15/04 - 20/04) Antes 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! Chegando 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. Por 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. ### Impressões e Informações - 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/). - Huaraz é feia, suja e não tem nada. - Incrivelmente foi o lugar onde todos os restaurantes tinham comida boa. Mas não era assim tão barato. - Faça seus passeios pela Golden, pois ela basicamente é a principal e as outras se juntam a ela. ## Laguna Paron (16/04) ![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) Você 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) É um passeio tranquilo, eles disseram. Vai ser bom para aclimatizar, eles disseram... Na 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. O 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 ### Impressões e Informações - O passeio custou **R\$50/pessoa** e fizemos pela Golden Tour que é a única que faz esse lugar. - 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. - Se você gostar de aventura, vai ser legal. - A água é impressionantemente azul! - Demora muiiiiito para chegar de van, mas a vista é bem bonita, vários penhascos. ## Glaciar Pastoruri (17/04) ![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) Você 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) Foi 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. Chegando 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. Lá 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. ### Impressões e Informações - O passeio custo **R\$50/pessoa** e fizemos pela Golden Tour, já que no final tudo sai dela mesmo. - Se você vai para Huaraz, esse passeio é obrigatório. - Se tiver um drone, leve! É permitido voar lá, mas minha dica é voar um pouquinho distante, só para o barulho não incomodar ninguém. - Vá agasalhado, estamos a 4800m de altitude, venta bastante e é frio. ## Laguna 69 (19/04) **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 ## Lima (20/04 - 24/04) ![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) Você pode ver e baixar minhas fotos lá no [Unsplash](https://willianjusten.com.br/meus-20-dias-no-peru/). Engraç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ê. Apesar 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. Lá eu também pude voar meu drone e tirar fotos bem legais <3 ### Impressões e Informações - Definitivamente a cidade mais cara de todo o Peru - 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**. - Prefira ficar no bairro de Miraflores, apesar de mais caro, é o mais bonito e com mais coisas para se fazer. - Não precisa ficar muitos dias lá, em 2 dias já viu o suficiente. ## Conclusão Malz 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. ================================================ FILE: posts/meus-50-dias-na-espanha.md ================================================ --- layout: post date: 2018-03-13T21:01:03.000Z title: Meus 50 dias na Espanha description: "Um pouco sobre como me locomovi, hospedagem, gastos e meu trabalho remoto. " main-class: misc tags: - travel - remoto - experiencia categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Eu 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: > O blog é meu, eu escrevo o que eu quiser. Brincadeiras 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. ![Enquete no twitter: 97% apoia o post 3% não](/assets/img/enquete.png) Mas 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! Enquanto 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. ## Por que de ir para Espanha? Todo 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. A 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!). ## Roteiro que eu fiz Sempre 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"). Nas 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! No 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. ![Percurso no mapa da Espanha](/assets/img/spain-50-days.png) Se quiser ver o mapa interativo no Google, [segue esse link aqui](https://drive.google.com/open?id=1B66Pq0RDQYag0duSzyvOrvFIccZKZ83F&usp=sharing). > Ahhhh, por que você não foi a Barcelona? E cidade X, Y, Z? Sobre 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! ## Como vou separar esse post? Para 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). ## A tecnologia ajudando minha vida Eu 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é? Para 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. E 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! Em 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. Como 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! Para 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). E 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! ## Rotina de trabalhar e viajar Para 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. Todo 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. A 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. Tirando 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? Acordava 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: - Ia para um café (se eu quisesse ver gente e estivesse me sentindo muito solitário) - Trabalhava do Airbnb (quando precisava me concentrar bastante e/ou precisasse de um internet estável) Sobre 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. Na 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. Quanto 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... ## Sobre as Cidades e mais Eu 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. Sobre fotos, você pode ver [algumas das minhas fotos favoritas no Unsplash](https://unsplash.com/collections/1589714/my-adventures-in-spain). ### Criando o Volta Mozão Chegou 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. Foi 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. ![Imagem da tela do Volta Mozão faltando 50 dias](/assets/img/volta-mozao.png) Eu 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 ## Madrid (23/10 - 26/10) ![Templo de Debod](/assets/img/willian-justen-de-vasconcellos-594081-unsplash.jpg) Eu 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). ### Impressões - Tem turista para caramba, mas não chega nem perto do caos de Barcelona, então ponto positivo! - 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**. - Fui bem atendido em todos os lugares, mas te falar que era difícil achar lugar vazio (espanhol come fora demais!) - O metrô é super fácil, mas não muito barato, ainda mais que precisa comprar o cartão primeiro. De Madrid eu fui para Sevilla de trem, esse foi carinho (**53 euros**), mas como a Toptal tava pagando né xD ## Sevilla - Niebla - Huelva (26/10 - 02/11) Lá 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á. ![Foto da Equipe da Toptal](/assets/img/toptal-team.jpg) ### Impressões - Niebla é um ovo e meh, não tem muita coisa não. Mas a casa que ficamos era demais. - Huelva é bem mais bonita que Niebla, mas também não é tãaao grandiosa assim. - Demos sorte que um dia estava tendo um festival no Castelo de Niebla, isso foi bem legal! - Sevilla é quente para caraaaaaamba e tem uma horda imensa de turistas! Muitas cenas de GoT foram filmadas ali, então já viu né... ## Sevilla (02/11 - 03/11) Como 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ó. Aqui 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. ## Ronda (03/11 - 04/11) ![Puente Nuevo](https://source.unsplash.com/vgfT4xaRs_c/1600x900) Uma 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). ### Impressões - Cidade muito bonita, com uma vista linda e que mistura natureza/trilha e belas construções - Pessoas muito atenciosas e comida excelente! Paguei pelo menu coisa de 5 euros e vinha comida demais! - Um número considerável de turistas na ponte e só. Nas trilhas era bem vazio e bom. De 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... ### Málaga (04/11 - 07/11) Essa 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**. ![Vista do Castillo de Gibralfaro](/assets/img/malaga.jpg) ### Impressões - Já disse que a cidade é linda? - Primeira cidade com praias bonitas pelo caminho - Tem um castelo legal e ruínas! - As pessoas não são tão legais quanto nas cidades anteriores - Todo mundo fala inglês (a maioria é britânico mesmo) - O menu era relativamente mais caro, sempre por volta de **10-15 euros** De Málaga eu fui para Granada de BlaBlaCar e custou **8,50 euros**. ### Granada (7/11 - 11/11) ![Alhambra](https://source.unsplash.com/Cdb3-cWZBeo/1600x900) Uma 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. ### Impressões - Nem parece que você está na Europa aqui de tão forte a influência árabe (isso foi super legal) - O Alhambra é enorme e você vai perder um dia inteiro lá - Comida barata de novo! Menu por **4-5 euros** e as famosas tapas (um petisco + cerveja) por **1-2 euros**. De 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! ### Torrevieja (11/11 - 15/11) ![Foto do Pink Lake](/assets/img/pink-lake.jpg) A 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! ### Impressões - É uma cidade incrível e super limpa - Tem um lago rosa cara! - Eu não falei uma palavra em Espanhol nessa cidade - O menu era mais carinho **10-15 euros** De Torrevieja fui para Valência de BlaBlaCar por **13 euros**. ### Valencia (15/11 - 18/11) ![Cidade das Artes e Ciências](https://source.unsplash.com/SKsf4V9qujM/1600x900) Tem 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. ### Impressões - A Cidade das Artes e Ciências é mais linda ainda de perto - Que cidade limpa! =o - Que comida deliciosa! Era cara **15-20 euros**, mas comi igual rei! - Falam espanhol rápido para caramba, mas todos tem paciência. De 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**. ### Bilbao (18/11 - 23/11) ![Guggenhein](https://source.unsplash.com/ZB3mkIOycjE/1600x900) Como 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. A 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. ### Impressões - Um lugar bem diferente da Espanha - Pessoas frias (mais "europeias" e menos "latinas" como o resto da Espanha) - O Guggenhein vale a pena por fora, por dentro é um museu bem chato Em 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! ![Pedra do Dragão - GoT](/assets/img/gaztelugatxe.jpg) De Bilbao fui para Santander de BlaBlaCar e me custou **7 euros**. ### Santander (23/11 - 27/11) ![Cabo de Faro Mayor](https://source.unsplash.com/HCvTsYtqOpc/1600x900) Santander é 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. ### Impressões - Pessoas muito simpáticas e que adoram conversar - Muitos lugares para comer e baratos, **5-8 euros** para um menu - 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 - Lindas paisagens no Faro de Cabo Mayor De 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**. ### Canga de Onís (27/11 - 30/11) ![Lagos de Covadonga](https://source.unsplash.com/uewFv0SEIEM/1600x900) Fiquei 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! De 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**. ### Oviedo (29/11 - 01/12) Fiquei 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. De 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**. ### Santiago de Compostela (02/12 - 06/12) Lá 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! ### Impressões - A cidade é movimentada pela galera que faz o El Camino de Santiago - Mochileiros em todos os cantos - Comida barata e boa! Achei menu por **3 euros** e bom! De Santiago fui para Vigo, última cidade da viagem, peguei um BlaBlaCar que deu **9 euros**. ### Vigo (06/12 - 11/12) Eu 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. ### Impressões - É uma cidade sem muitos atrativos turisticos - Fuja dessa cidade em Dezembro, chove todos os dias - Comida por um preço razoável, **6-10 euros** ## Conclusão Uffa, 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! ================================================ FILE: posts/meus-plugins-favoritos-do-sublime-text.md ================================================ --- layout: post date: 2016-03-21T21:48:36.000Z title: Meus plugins favoritos do Sublime Text description: Confesso que o Sublime é meu amorzinho, nele eu consigo ser produtivo e fazer muitas coisas. Veja o que eu uso no meu workflow. main-class: dev tags: - workflow - dev categories: null --- ## Introdução Faaaala 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. Vai 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. ## Por que eu uso o Sublime? Olha, 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). Brincadeiras 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. ## Instalando as coisas Se 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. Para 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. ## Tema e Highlight ![Tela do meu Sublime](/assets/img/sublime-plugins/sublime-tema.png) Para 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. O 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. ## Language Syntax Bom, 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: - [Jade Syntax](https://packagecontrol.io/packages/Jade) - [Sass Syntax](https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass) - [Stylus Syntax](https://github.com/billymoon/Stylus) - [Liquid Syntax](https://github.com/siteleaf/liquid-syntax-mode) ## Git Todo 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? ![Tela mostrando o Git Gutter em ação](/assets/img/sublime-plugins/sublime-gutter.png) Mas 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. ![Tela mostrando o Git Blame em ação](/assets/img/sublime-plugins/sublime-git.png) E aqui embaixo usando o comando `git blame` em um arquivo, olha o [Fernando Daciuk](http://blog.da2k.com.br/) commitando ali =p ![Tela mostrando o Git Blame em ação](/assets/img/sublime-plugins/sublime-blame.png) ## Trabalhar com Arquivos e Pastas Uma 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: - [Advanced New File](https://github.com/skuroda/Sublime-AdvancedNewFile) - posso criar pastas e arquivos direto do teclado, usando os atalhos dele - [AutoFileName](https://github.com/BoundInCode/AutoFileName) - completa os paths dos arquivos, coisa linda demais - [Sidebar Enhancements](https://github.com/titoBouzout/SideBarEnhancements) - mais opções na barra lateral! YEY! - [Sublime All Autocomplete](https://github.com/alienhard/SublimeAllAutocomplete) - ele acha palavras, métodos, enfim, tudo que tiver nos outros arquivos, super bom. ## Linters e organização de código Eu 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: - [Sublime CssComb](https://github.com/csscomb/sublime-csscomb) - padroniza meu CSS de acordo com o padrão passado no arquivo do .csscomb - [EditorConfig Sublime](https://github.com/sindresorhus/editorconfig-sublime) - segue padrão definido no .editorconfig (USE AGORA MESMO!) - [Sublime Linter](https://github.com/SublimeLinter/SublimeLinter3) - o responsável por fazer o Linter dentro do Sublime, ferramenta magnífica. - [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 ## Snippets Sou um cara preguiçoso, que adora atalhos, então a primeira coisa que procurei, foram bons snippets, para facilitar a minha vida. - [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. - [Stylus Snippets](https://github.com/billymoon/Stylus-Snippets) - meu pre-processador favorito, não poderia ficar sem snippet para eles =) - [Java​Script & Node​JS Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets) - muitos snippets úteis, me agiliza bastante ao escrever JS - [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. ## Jekyll Meu 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? - [Sublime Jekyll](http://23maverick23.github.io/sublime-jekyll/) - agiliza criação dos posts, drafts e etc. - [Markdown Extended](https://github.com/jonschlinkert/sublime-markdown-extended) - melhora o jeito de escrever Markdown, que é a linguagem que utilizo nos posts. ## Métrica Esse 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. Você 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 ## Conclusão Bom 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!! ================================================ FILE: posts/migrei-meu-blog-do-gatsby-para-o-nextjs.md ================================================ --- layout: post date: 2021-07-04T04:46:26.000Z title: Migrei meu blog do Gatsby para o NextJS description: Um pouco da razão da mudança, coisas que fiz e minhas impressões. main-class: js tags: - nextjs - gatsby - blog categories: - NextJS --- ## Introdução Fala 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). No [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. Nesse 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). ## A pergunta que não quer calar Lá no Twitter algumas pessoas responderam o Tweet, outros chegaram até a mandar a DM fazendo sempre a mesma pergunta: > Mas por que você vai trocar? Não gosta mais do Gatsby? O Next é bem melhor? E bom, a primeira resposta que eu dou para essa é bem simples: > Mudei porque deu vontade! Isso 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. ## Mudança é oportunidade para aprendizado Eu 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. Aliá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! ## Meu processo Eu 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/). Lá eu meio que fui definindo as tarefas que precisava fazer e ia iniciando os ciclos de 25min, fluiu super bem! ## Sobre Gatsby e Next Como 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. A 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. O 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. Se você não sabe nada sobre essas siglas, recomendo fortemente [esse vídeo](https://www.youtube.com/watch?v=X3W-YFe2_io). ## Minhas impressões da migração O 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. Eu 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. ### Arquivos estáticos e build As mudanças são: - Do `static` (Gatstby) para `public` (Next) - O Gatsby faz o build para `public` (então lembre-se de remover do `.gitignore`) - O Next cria uma pasta `.next` (esse você adiciona) ### Os componentes "cascas" No 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. Já no Next você possui 2 arquivos, que são: - `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). - `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. ### Links Na hora da conversão dos componentes, esse foi um passo fundamental, apesar de bobo, se você não trocar, vai quebrar tudo xD ```js // Gatsby import { Link } from 'gatsby' export default function Page() { return meu link } // Next import Link from 'next/link' export default function Page() { return ( meu link ) } ``` Como 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`. ### Styled Components No 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: #### Configurar o Babel Você precisa instalar o `babel-styled-components` e também configurar o `.babelrc` com: ```json { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true } ] ], "env": { "test": { "plugins": [ [ "babel-plugin-styled-components", { "ssr": false, "displayName": false } ] ] } } } ``` E depois disso, você precisa também alterar o `_document` para gerar os estilos no server. ```jsx import Document, { Html, Head, Main, NextScript } from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: App => props => sheet.collectStyles() }) const initialProps = await Document.getInitialProps(ctx) return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} ) } } finally { sheet.seal() } } render() { return (
    ) } } ``` Se você não fizer essas duas etapas, o blog pode "piscar" começando sem estilo e ganhando os estilos, o que não é legal. ### Criação de páginas/posts No 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. Já 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. Em um outro post vou mostrar detalhadamente como se faz tanto com markdown quanto com uma API. ### Componente de Imagem O 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! Você pode ver a [documentação do componente](https://nextjs.org/docs/api-reference/next/image), mas um exemplo simples de uso: ```jsx import Image from 'next/image' export default function Home() { return ( A text explaining the image ) } ``` Como pode ver, é bem simples e direto. Tendo algumas propriedades legais para passar como `placeholder="blur"`, `layout="responsive"` e outras coisas mais. ### Componente de SEO Enquanto 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 é: ```jsx // src/components/seo.js import Head from 'next/head' import config from '../config' export default function SEO({ description, title }) { const siteTitle = config.title return ( {`${title} | ${siteTitle}`} ) } ``` ## Conclusão Enfim, 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: - [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. - [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. E 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! ================================================ FILE: posts/migrei-para-o-vscode-e-estou-feliz.md ================================================ --- layout: post date: 2017-07-27T22:08:41.000Z title: Migrei para o Visual Studio Code e estou feliz! description: Um pouco da minha experiência com esse editor que me fez aposentar o Sublime e plugins que uso. main-class: dev tags: - workflow - dev categories: null --- ## Introdução Faaala 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. E 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! Obs.: 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! ## Características Segue um passeio pelas principais features desse editor. ### Intellisense A 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. ![Intellisense em ação](https://code.visualstudio.com/assets/docs_carousel/intellisense_b.png) ### Debugging Isso 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. ![Exemplo do Debugging funcionando](https://code.visualstudio.com/assets/docs_carousel/debug_b.png) ### Multi-cursor, linter e mais Isso 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á. ![Exemplo mostrando o multicursor](https://code.visualstudio.com/assets/docs_carousel/multi-cursor-edit.png) ### Code Navigation e Refactor Uma 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! ### Integração com o Git E 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! ![Tela mostrando o diff](https://code.visualstudio.com/assets/docs_carousel/git_b.png) E 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**! ## Meus Plugins favoritos Os 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. - [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. - [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. - [AutoFileName](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename) - completa o nome dos arquivos para mim, perfeito para adicionar imagens. - [Chai Snippets](https://marketplace.visualstudio.com/items?itemName=nwhatt.chai-snippets) - para quem usa Chai, ajuda bastante para escrever os testes. - [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) - para rodar seu código diretamente do terminal do VSCode. - [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) - ele coloca um background nas cores no css, facilitando assim saber qual cor é. - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - o nome já diz, permite fazer debug no Chrome, lindo. - [Document this](https://marketplace.visualstudio.com/items?itemName=joelday.docthis) - para criar cabeçalhos em métodos e variáveis. - [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - para o editor seguir as regras do arquivo do `.editorconfig`. - [ES6 Mocha Snippets](https://marketplace.visualstudio.com/items?itemName=spoonscen.es6-mocha-snippets) - para quem escreve testes com o Mocha. - [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. - [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. - [Git History (git log)](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) - para mostrar logs bonitinhos do Git. - [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore) - ajuda a criar o `.gitignore`. - [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - snippets lindinhos para o seu código em ES6. - [jsx](https://marketplace.visualstudio.com/items?itemName=TwentyChung.jsx) - suporte para escrever `jsx`. - [language-stylus](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus) - suporte para escrever `stylus`. - [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. - [Prettify JSON](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json) - para indentar `JSON`, bastante útil. - [Reactjs code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets) - snippets para quem usa React. - [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! - [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer) - para poder visualizar SVG diretamente do editor. - [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! - [Wakatime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) - porque eu sou fissurado com métricas. ## Conclusão É 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 E 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! ================================================ FILE: posts/minha-trajetoria-ate-ser-desenvolvedor.md ================================================ --- layout: post date: 2017-06-21T22:49:40.000Z title: Minha trajetoria até me tornar Desenvolvedor description: Uma pequena entrevista onde falo sobre meus primeiros trabalhos, desafios e meu futuro. main-class: dev tags: - dev - remoto categories: null --- ## Introdução Fala 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. Enquanto 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 Bom, vamos ao post que interessa, mais um pouquinho da minha história em palavras curtas. ## Apresentação ![Profile Photo](https://willianjusten.com.br/assets/img/external/willian-profile.jpg) Olá, 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). Escrevo num [blog pessoal](https://willianjusten.com.br/) e também crio [cursos](https://willianjusten.com.br/cursos/), que hoje estão sendo transferidos para a plataforma da [Udemy](https://www.udemy.com/user/willian-justen-de-vasconcellos/). ### Como você conheceu a área de Desenvolvimento? No 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. Quando 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 Dentro 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. E 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. ### Por que você escolheu ser Desenvolvedor Remoto? É 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! ![I hate programming, I hate programming, it works!!! I love programming](https://images-na.ssl-images-amazon.com/images/I/61Tsx5j7pPL._UL1500_.jpg) Outro 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! E 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. Muita 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. ### Como foi o seu primeiro trampo (alocado)? Eu 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. Eu 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. O 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. A 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. Viram 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. Na 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 E 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: > Um bom mentor pode te fazer se apaixonar pelo que faz e pode fazer você querer crescer e fazer ainda mais. Eu 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. ### Como foi o seu primeiro trampo (remoto)? Bom, 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. > 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. Sempre 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 é: > 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. E 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. Farei 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. Na 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. Por 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: ![Foto da Equipe com 14 pessoas numa videoconferência](https://willianjusten.com.br/assets/img/external/team-toptal.jpeg) E 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... ![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) ### Quais são as skills de quem trabalha nesta área? Eu 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. Para 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. Para 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. ### Quais são os principais desafios da área? O 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. E 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. ### Quais são as principais recompensas da área? A 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. A 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. E 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. ### Você pensa em mudar de área? Nossa á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. ### Por que alguém deveria se tornar um(a) desenvolvedor(a) remoto? Se 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ê. Mas 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. ================================================ FILE: posts/minhas-experiencias-com-trabalho-remoto-em-ti.md ================================================ --- layout: post date: 2018-11-19T06:13:33.000Z title: Minhas experiências com Trabalho Remoto em TI description: Após mais de 2 anos trabalhando remoto, venho compartilhar algumas das minhas experiências e também responder muitas perguntas main-class: dev tags: - experiencia - dicas - lifestyle categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Índice - [Introdução](#introducão) - [Do alocado ao remoto, minha breve história](#do-alocado-ao-remoto-minha-breve-história) - [Minha rotina de trabalho remoto](#minha-rotina-de-trabalho-remoto) - [Você está preparado para a vida de Remoto?](#voce-esta-preparado-para-a-vida-de-remoto) - [Experiência](#experiência) - [Disciplina](#disciplina) - [Comunicação](#comunicacão) - [Local de trabalho e equipamentos](#local-de-trabalho-e-equipamentos) - [Personalidade](#personalidade) - [Perguntas e Respostas](#perguntas-e-respostas) - [Perguntas sobre trabalho remoto](#perguntas-sobre-trabalho-remoto) - [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) - [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) - [Quais ferramentas utiliza para medir a sua produtividade?](#quais-ferramentas-utiliza-para-medir-a-sua-produtividade) - [Quais ferramentas utiliza para se organizar? E no trabalho?](#quais-ferramentas-utiliza-para-se-organizar-e-no-trabalho) - [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) - [Qual stack você usa na Toptal?](#qual-stack-voce-usa-na-toptal) - [Como você recebe seu pagamento? Existe CLT ou só PJ?](#como-voce-recebe-seu-pagamento-existe-clt-ou-so-pj) - [Como manter-se animado a programar em um trabalho remoto?](#como-manter-se-animado-a-programar-em-um-trabalho-remoto) - [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) - [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) - [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) - [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) - [Perguntas sobre viagens e trabalho](#perguntas-sobre-viagens-e-trabalho) - [Você gasta bastante dinheiro para viajar? Como faz com hospedagem?](#voce-gasta-bastante-dinheiro-para-viajar-como-faz-com-hospedagem) - [Como você consegue trabalhar quando viaja?](#como-voce-consegue-trabalhar-quando-viaja) - [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) - [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) - [Como você cria seu roteiro para viagens? Utiliza algum app?](#como-voce-cria-seu-roteiro-para-viagens-utiliza-algum-app) - [Conclusão](#conclusao) ## Introdução Fala 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. Eu 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 O 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. Enquanto 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 ## Do alocado ao remoto, minha breve história Eu 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 Como 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! A 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ã. Depois 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**! Acho 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. Durante 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/). Junto com essa minha ida para a Europa, eu também decidi que era isso que eu queria da minha vida. - Poder morar onde quiser e viajar mais - Não me preocupar com trânsito - Ter horários mais flexíveis - Me isolar em dias ruins de depressão - Estar em contato com pessoas de todo o mundo. E para isso, só tinha uma opção, **trabalhar remoto**. Lá 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 =) ## Minha rotina de trabalho remoto Como 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 Eu 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). Dentro 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ós trabalhamos com a metodologia [Scrum](https://www.scrum.org/resources/what-is-scrum) e o time é composto por: - 4 Brasileiros (GMT-3) - 2 Ucranianos (GMT+2) - 1 Russo (GMT+3) - 1 Croata (GMT+1) - 1 Britânico (GMT) - 1 Espanhol (GMT+1) Entã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. Além da daily, também possuímos algumas reuniões pré-definidas que são: - `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. - `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. - `Sprint Review`: sempre ao final do Sprint para vermos como foi nossa produtividade e outras métricas. - `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. - `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. E 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! Baseado 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. ## Você está preparado para a vida de Remoto? Antes 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. ### Experiência Antes 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**. Para trabalhar remoto, você precisa de umas características que acaba ganhando trabalhando por um tempo alocado, então pular essa etapa é bastante prejudicial. Quando 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. Aproveite 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. ### Disciplina Esse seria o segundo ponto mais importante no trabalho remoto, você pode chegar e falar: > Ah, mas eu sou muito responsável, isso aí eu tiro de letra. Mas é 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. Se você morar com mãe/parceiro(a), um diálogo assim é super comum: > **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. É 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. A 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. ### Comunicação Costumo 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. As 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. Essa é 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! ### Local de trabalho e equipamentos > Ué? Como assim? Por que se preocupar com local de trabalho se vai ser remoto? É 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. Outra 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. E 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. ### Personalidade Por 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ê. ## Perguntas e Respostas Agora vem a parte interessante, são váaaaarias perguntas! Como eu também viajo bastante, vou separar em: - Perguntas sobre trabalho remoto - Perguntas sobre viagens e trabalho Mas, se você tiver outras dúvidas, não deixe de postar nos comentários! ### Perguntas sobre trabalho remoto #### Qual a vantagem e desvantagem de se trabalhar remotamente? Qual a maior dificuldade que você encontrou nesse tipo de trabalho? Bom, 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. #### 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 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. #### Quais ferramentas utiliza para medir a sua produtividade? Na 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. Como 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. Eu 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 #### Quais ferramentas utiliza para se organizar? E no trabalho? Na 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). Todas as nossas reuniões são criadas no Google Calendar, assim como apresentações/assets ficam no Google Drive. Para os layouts, nós recebemos versões no [InVision](https://www.invisionapp.com/) e no [Sketch](https://www.sketchapp.com/). Utilizamos o [Github](https://github.com/toptal) para todo o nosso código e o [Jenkins](https://jenkins.io/) para rodar nossos testes. Nossa 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). Pessoalmente 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. #### Até hoje só ouvi falar sobre ferramentas de pareamento remoto mas nunca vi na prática. Quais são? Na 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. No 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... #### Qual stack você usa na Toptal? Para cada time podem existir diferentes stacks, tem gente trabalhando com Python, Elixir, Javascript, Ruby e mais outras mil coisas. Eu 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). #### Como você recebe seu pagamento? Existe CLT ou só PJ? Essa é 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. Hoje 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ã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. Eu 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. #### Como manter-se animado a programar em um trabalho remoto? Essa é 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. O 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ê. E 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. #### Iniciei ontem a trabalhar remotamente, fico receoso de não estar 100% do tempo à disposição. Como dizer não? Trabalho 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. Deixe 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. #### Como um iniciante em programação pode se organizar para adquirir conhecimento e conseguir trabalhar remoto? Como 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. #### É possível conseguir um trabalho remoto apenas com certificações e cursos online, isto é, sem curso superior? Totalmente 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). #### Qual a média de idade dos desenvolvedores fora do Brasil? Desenvolvedores mais velhos tem espaço na Europa? Olha, 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 =) #### 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 é? Sendo 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. E 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. Eu 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. ### Perguntas sobre viagens e trabalho #### Você gasta bastante dinheiro para viajar? Como faz com hospedagem? Eu 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. Eu 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! Para 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. Inclusive, 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 #### Como você consegue trabalhar quando viaja? Eu 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. #### Como você tem achado os locais para trampar? Existe algum app que o ajuda nesta tarefa? Olha, 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. #### É tranquilo encontrar internet boa para trabalhar remoto viajando? Na 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. Já 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. #### Gostaria de saber como a mudança de lugares afeta sua rotina de produtividade e concentração. É 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. #### Como você cria seu roteiro para viagens? Utiliza algum app? Eu 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 Entã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. Costumo 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/). ## Conclusão Bom 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. ================================================ FILE: posts/mini-curso-gratuito-de-typescript.md ================================================ --- layout: post date: 2020-05-18T13:31:55.000Z title: Mini Curso gratuito de TypeScript description: Aprenda o que é TypeScript, como funciona, por que usar e muito mais! main-class: js tags: - typescript - ts - curso --- ## Introdução Fala pessoal! Tive uma conversa com meus alunos no [Slack dos alunos](https://bit.ly/slack-will), onde fiz a seguinte pergunta: ![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) E 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. Pensando 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. O 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 =) ## Playlist dos vídeos Conforme eu for lançando os vídeos, eu vou atualizando esse post, para facilitar que vocês encontrem no blog depois. Então, lá vai o primeiro vídeo! ### 01. Introdução ao TypeScript ### 02. Mitos e Verdades ### 03. Instalando o compilador e escrevendo primeiro código ### 04. Criando e configurando o TSConfig ### 05. Types ### 06. Type Inference ### 07. Type Aliases e Union ### 08. Type Aliases e Intersection ### 09. Classes ### 10. Interfaces ### 11. Type Alias vs. Interfaces ### 12. Generics ### 13. Type Utilities ### 14. Decorators ## Conclusão Espero que curtam os vídeos, nosso momento agora é de ficar em casa e estudar o máximo que pudermos =) ================================================ FILE: posts/mostrando-ultimos-posts-e-videos-no-github-profile.md ================================================ --- layout: post date: 2020-08-10T11:44:05.000Z title: Mostrando últimos posts e vídeos no Github Profile description: Como utilizar o Github Actions para manter seu profile atualizado e bonito. main-class: misc tags: - git - github --- ## Introdução Fala 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). O 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. ## Versão em vídeo Para quem quiser assistir a versão em vídeo desse post, segue aí: ## Sobre o Github Profile O 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). ![Foto da interface do Github com minha foto a esquerda e uma lista de informações a direita.](/assets/img/github-profile.png) Existem de diferentes formas, algumas super criativas, outras mais simples, segue abaixo uma lista de alguns: * [@sindresorhus](https://github.com/sindresorhus) * [@ABSphreak](https://github.com/ABSphreak) * [@AVS1508](https://github.com/AVS1508) * [@afc163](https://github.com/afc163) E se você quiser mais ideias, tem essa [lista cheia de inspirações](https://github.com/coderjojo/creative-profile-readme). ## Criando o repositório e configurando Para 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: ![Uma mensagem dizendo que você encontrou um segredo, que o repositório é um perfil especial.](/assets/img/github-profile-2.png) Agora 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: ```md ### Hello, I'm Willian! 💻 Software Engineer and Instructor at [Willian Justen Cursos](https://willianjusten.com.br/cursos)
    🏡 Brazilian, Based in Petrópolis, RJ - but most of the time traveling around the world 🌎 ### You can find me on 📺 [Youtube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1)
    🐦 [Twitter](https://twitter.com/Willian_justen)
    📷 [Unsplash](https://unsplash.com/@willianjusten)
    ⚛️ [My site](https://willianjusten.com.br)
    ``` ## Criando a Github Action Com 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). Para 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: ```yml name: Latest blog post workflow on: push: schedule: # Runs every hour - cron: "0 * * * *" jobs: update-readme-with-blog: name: Update this repo's README with latest blog posts runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: gautamkrishnar/blog-post-workflow@master with: comment_tag_name: BLOG feed_list: "https://willianjusten.com.br/feed.xml" - uses: gautamkrishnar/blog-post-workflow@master with: comment_tag_name: YOUTUBE feed_list: "https://www.youtube.com/feeds/videos.xml?channel_id=UCa12brLWzCqnxN0KOyjfmJQ" ``` Ali no `on` eu digo que quero que a action rode em todo `push` e também programo para rodar de hora em hora. Depois 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. Ali 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. Com essa configuração feita, nós só precisamos editar o `README.md` para que a action saiba onde inserir os links: ```md ### 📕 Latest Blog Posts ### 📺 Latest Videos on YouTube ``` Repare 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. Depois disso, basta subir no Github e a action irá rodar para você e buscar as informações! =D ## Conclusão Espero 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 ================================================ FILE: posts/mudando-sua-vida-atraves-de-projetos-paralelos.md ================================================ --- layout: post date: 2016-05-19T17:39:52.000Z title: Mudando sua vida através de projetos paralelos description: Fica aqui um relato de alguém que mudou sua vida e quer mudar ainda mais. main-class: misc tags: - dev - life categories: null --- ## Introdução Fala 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. Para 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 =) Esse post deve acabar ficando um pouquinho grande e por isso, vou separá-lo em alguns tópicos principais. Que serão: - [Um mergulho na minha história](#historia) - [Meus cursos](#meus-cursos) - [Novos rumos](#novos-rumos) - [Novos projetos](#novos-projetos) - [Conclusão](#conclusao) Bom, 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. ![Um gatinho com olhinhos de pedindo alguma coisa](/assets/img/side-projects/cat.jpg)

    Um mergulho na minha história

    Quando 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é? Bom, 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. Aquele 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. Naquela é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. Ao 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++. E 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. A 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. Só 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! Quando 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é... Dentro 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/). E 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). Isso é 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.

    Meus cursos

    Continuando 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! Vou 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. Já foram **1957 alunos inscritos!** (Editado) Segue o gráfico referente ao [curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) ![Gráfico de estatística para o Jekyll](/assets/img/side-projects/jekyll-stats.png) Como 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 E 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. ![Gráfico de estatística para o git](/assets/img/side-projects/github-stats.png) Foram **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.

    Novos Rumos

    E 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! Anuncio 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: ![Um homem sentado a beira de um lago com várias montanhas com picos congelados a frente](/assets/img/side-projects/digital-nomad.jpg) E 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.

    Novos Projetos

    Alé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

    Conclusão

    Bom 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. Você 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! ================================================ FILE: posts/mude.md ================================================ --- layout: post date: 2023-08-14T08:00:40.000Z title: Mude! description: Mude, mas comece devagar, porque a direção é mais importante que a velocidade. main-class: misc tags: - vida - reflexão --- ## Introdução Continuando 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. Eu 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. Enquanto 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. ## Poema de inspiração Toda a ideia desse post veio depois dessa **maravilhosa** interpretação do Abujamra de um poema do Edson Marques, vale demais assitir. ## Rotina Sempre 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. Você pode vir e falar: > Ah, Willian, mas eu só funciono com rotina, sem rotina eu não sou ninguém. Ter 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ê. **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. Por 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. Tem 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: > Acorda, trabalha, repete, mantém > > Deixa para viver depois > > Até o que eu amo, não mais me entretém E é 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. ## Comece devagar Usando esse pedaço do poema: > Mude > > Mas comece devagar, > > porque a direção é mais importante > > que a velocidade. Acho 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. A 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. ## Um paralelo com a programação > Achou que não ia ter nada de programação no post? Achou errado, otário! haha Esse 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. Os 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. ## Saia da casinha de "Dev" Mude também nos hobbies, nas conversas, nas interações, como programadores, costumamos ficar focados e centrados somente em programação. > Nosso hobby? Programar. > > Nossas conversas? Algo de programação. > > Amigos? Quase sempre só da área. Mudar 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. ## Conclusão Espero 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! ================================================ FILE: posts/mulheres-na-tecnologia.md ================================================ --- layout: post date: 2020-05-27T15:47:47.000Z title: Mulheres na tecnologia description: Nossa área é predominante masculina, mas não precisa ser assim. Como um pequeno gesto pode ajudar. main-class: misc tags: - women - mulheres --- ## Introdução Fala pessoal, uffa, consegui um tempo para escrever esse post, até para explicar algumas coisas e acho que vai ser mais fácil também. Eu 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. Nos últimos meses eu tive contato com várias alunas, algumas delas inclusive já lançaram até seus blogs: - [Ilda Neta](https://ildaneta.netlify.app/) - [Luisa Bezerra](https://www.luisabezerra.com.br/) - [Ana Beatriz](https://anabneri.com.br/) E 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 Eu 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. ## Chuva de mensagens e histórias Eu 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. Algumas 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! ## Acordei e mais mensagens! Como 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. Sem 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! ## Mais de R$ 25.000 doados em cursos! Isso 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í. E 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. ## Mas infelizmente, tem espertinhos... Com 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... De 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. Entã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! ## Ajude você também! Minha ideia foi de coração, mas confesso que desorganizada e mal estruturada, mas se num fosse assim, também nem aconteceria hahaha Eu 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! ================================================ FILE: posts/nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa.md ================================================ --- layout: post date: 2020-08-05T02:59:30.000Z title: NextJS, Gatsby ou Create React App? Entendendo os conceitos de SSR, SSG e SPA. description: Antes de escolher um deles, é importante saber as diferenças e suas necessidades. main-class: js tags: - js - next - gatsby --- ## Introdução Fala 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. Esse 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á. ## Vídeo Se quiser optar por assistir a versão em vídeo, segue o vídeo abaixo: ## O que é um framework web? O 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. ## Por que usar um framework web? Acho 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. ## Mas, cuidado! É 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. Vou dar um exemplo que vi esses dias de um aluno perguntando: > Galera que manja do next, eu consigo pegar um projeto já pronto em html, css e js, e passar ele para o nextjs? E obviamente, eu perguntei, mas por que de usar o Next? E a resposta foi: > A empresa quer umas mudanças e vai passar os projetos para o react e next para o SEO kkk Um 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! > Ou seja, você vai reescrever tudo e, no fim, trocar o famoso 6 por meia duzia. É por isso que antes mesmo de escolher uma tecnologia/framework, é importante saber o que você precisa e o que você já tem. Pense 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". ## Sobre o NextJS O [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. No 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". E 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. E quais seriam as características do NextJS? Bom, vou listar apenas algumas delas: - Renderização no servidor (Server Side Rendering - SSR) - Geração de estáticos (Static Site Generation - SSG) - CSS-in-JS (Styled-jsx, Styled Components, Emotion, etc) - Zero Configuration (rotas, hot reloading, code splitting…) - Completamente extensível (controle completo do Babel/Webpack, plugins, etc) - Otimizado para produção E 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/) ### E quais as diferenças entre Next, Gatsby e Create React App? Para poder comparar, antes mesmo nós precisamos falar sobre os **diferentes tipos de aplicações**, que são: - Sites estáticos (HTML/CSS/JS - SSG) - Client Side Rendering (Single Page Application - SPA) - Server Side Rendering (SSR) Abaixo eu vou mostrar com umas animações fantásticas um pouco do processo de cada um. ## Como funciona um site estático (SSG - Static Site Generation) Em um site estático (ou gerado estaticamente), o fluxo é bem simples: Caso 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. A 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. ### Vantagens - Uso quase nulo do servidor - Pode ser servido numa CDN (melhor cache) - Melhor performance entre todos - Flexibilidade para usar qualquer servidor - Ótimo SEO ### Desvantagens - Tempo de build pode ser muito alto - Dificuldade para escalar em aplicações grandes - Dificuldade para realizar atualizações constantes ### Quando usar um site estático? - Site simples sem muita interação do usuário - Se você é a única pessoa que publica conteúdo - Se o conteúdo muda pouco - Se o site é simples, sem tantas páginas - Quando a performance é extremamente importante **Exemplos**: Landing Page, Blogs, Portfólios ### Ferramentas que criam estáticos: - Gatsby - Next SSG - Jekyll - Hugo - Hexo - Procure por Jamstack / Static Generator e se surpreenda! ## Como funciona o Client Side Rendering (SPA) Quando 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. O 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. Como é o fluxo nessa forma? Você 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. No 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. Depois 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. ### Vantagens - Permite páginas ricas em interações sem recarregar - Site rápido após o load inicial - Ótimo para aplicações web - Possui diversas bibliotecas ### Desvantagens - Load inicial pode ser muito grande - Performance imprevisível - Dificuldades no SEO - A maioria do conteúdo não é indexado ### Quando usar o SPA? - Quando não tem tanta necessidade de indexar informações no Google - Quando o usuário faz muitas interações na página e não quero refreshes - Quando as informações vão ser diferentes para cada usuário (autenticação, por exemplo) **Exemplos**: Twitter Web, Facebook Web, Spotify Web ### Ferramentas que criam SPA: - Create React App e similares - Angular - Vue - Next/Gatsby (ambos permitem ter um funcionamento interno como SPA, mas não é o foco) ## Como funciona o Server Side Rendering (SSR) O *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. O 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. ### Vantagens - Ótimo em SEO - Meta tags com previews mais adequados - Melhor performance para o usuário (o conteúdo vai ser visto mais rápido) - Código compartilhado com o backend em Node - Menor processamento no lado do usuário ### Desvantagens - TTFB (Time to first byte) maior, o servidor vai preparar todo o conteúdo para entregar - HTML maior - Reload completo nas mudanças de rota ### Quando utilizar Server Side Rendering? - Quando tem necessidades de um SPA, mas precisa de um loading mais rápido - Quando o conteúdo muda frequentemente - Quando trabalha com um número muito grande de páginas - Quando precisa de uma boa indexação no Google **Exemplos**: Ecommerce, Sites de Notícias ### Ferramentas que criam SSR: - NextJS - NuxtJS (Next mas em Vue xD) - Razzle - Svelte com Sapper - Angular Universal ## Okay, mas qual eu uso então? Como 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? Aqui 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. E 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. E 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. ## Conclusão Espero 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 E ~~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. ================================================ FILE: posts/novidades-do-react-16.md ================================================ --- layout: post date: 2017-09-28T20:59:22.000Z title: Novidades do React 16 description: Veja o que tem de novo com o novo lançamento do React. main-class: js tags: - react - js categories: null --- ## Introdução Fala 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. Enquanto escrevo esse post, vou ouvindo o novo album do Foo Fighters chamado [Concrete and Gold](https://open.spotify.com/album/6KMkuqIwKkwUhUYRPL6dUc) que ficou demais! ## Confusão, reclamações e mais sobre a licença do React Se 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... Sendo 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. E 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. Então, resumindo, o React continua sendo uma ótima biblioteca para trabalhar e vale muito a pena estudar sim tá! =D ## A completa reescrita do React > O React vai ser todo reescrito? Ferrou, vou ter que aprender tudo de novo? Tá parecendo Angular isso aí! Sim, 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! Essa 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. O 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: ### Novas features / Mudanças Seguem então alguns dos detalhes legais dessa nova versão: ### Tamanho reduzido Apesar 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: - `react` agora 5.3 kb (2.2 kb gzipped), antes 20.7 kb (6.9 kb gzipped). - `react-dom` agora 103.7 kb (32.6 kb gzipped), antes 141 kb (42.9 kb gzipped). - `react + react-dom` agora 109 kb (34.8 kb gzipped), antes 161.7 kb (49.8 kb gzipped). Ou 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. ### Fragments e Strings Agora 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 =) ```jsx // antes encapsulando com uma div render() { return (

    Meu Título

    Meu texto lindo aqui.

    ) } // agora usando como array render() { return [

    Meu Título

    ,

    Meu texto lindo aqui.

    ] } ``` Lembrando 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: ```jsx // antes encapsulando com um span render() { return Usando o Span!; } // agora usando como string direta render() { return 'Sem Spans!'; } ``` ### Melhor error handling Antes, 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". Com 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. E 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: ```jsx componentDidCatch(error, info) { // Adicionamos uma variável no nosso state // para tratarmos na nossa UI this.setState({ ...state, hasError: true }); // E você também tem 2 paramêtros para reportar console.log(error); // o erro em si console.log(info); // contém o Component Stack } ``` Depois 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: ```jsx render() { if (this.state.hasError) { // Imprimindo uma mensagem de erro return

    Ixi, alguma coisa deu errado =(

    ; } else { // retornando o componente de fato ... } } ``` ### Portals Essa 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: ```jsx render() { // React monta uma nova div e renderiza o filho dentro return (
    {this.props.children}
    ); } ``` Mas, as vezes é interessante inserirmos o filho numa posição diferente do DOM: ```jsx render() { // O React não vai criar uma nova div. Ele vai renderizar o filho dentro do `domNode`. // `domNode` é qualquer nó válido, independente de sua localização no DOM. return ReactDOM.createPortal( this.props.children, domNode, ); } ``` Um 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`. Você pode ler mais sobre nesse [post do Facebook](https://facebook.github.io/react/docs/portals.html). ### Melhor server-side rendering Graç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. Tem 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. Você pode ler mais sobre o `ReactDomServer` está funcionando, [nesse post](https://facebook.github.io/react/docs/react-dom-server.html). ### Suporte a DOM Attributes Antes 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. ```jsx
    // React 15 iria imprimir
    // React 16 imprime o que desejo
    ``` Essa é 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). ## Sobre atualização, breaking changes, deprecations... O primeiro aviso é: **Se você já tem sua aplicação rodando no React 15.6 sem nenhum warning, irá funcionar no React 16.** ### Deprecations Para 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. O 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. No 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). ### Breaking Changes Como 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. - 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`. - `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). - `setState`: - 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. - Chamar `setState` diretamente num `render` vai causar uma atualização dos estados. Lembrando que você não deveria chamar `setState` dentro de um `render`. - Os callbacks de `setState` agora ativam imediatamente depois do `componentDidMount`/`componentDidUpdate` ao invés de após todos os componentes serem renderizados. - Ao trocar `` por ``, `B.componentWillMount` agora vai sempre acontecer antes de `A.componentWillUnmount`. Antes, `A.componentWillUnmount` podia inicializar primeiro em certos casos. - 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. - `componentDidUpdate` lifecycle não recebe mais o parâmetro `prevContex`. - 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. ## Empacotamento Como 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: - `react/dist/react.js` → `react/umd/react.development.js` - `react/dist/react.min.js` → `react/umd/react.production.min.js` - `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js` - `react-dom/dist/react-dom.min.js` → `react-dom/umd/react-dom.production.min.js` ## Requisitos O 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). ## Site atualizado da Documentação É 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/). ## Conclusão Bom 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! ================================================ FILE: posts/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows.md ================================================ --- layout: post date: 2020-02-10T14:05:15.000Z title: "Novo Curso: Criando um ambiente de Desenvolvimento no Windows" description: Aprenda a ter um terminal bom, node e muito mais dentro do Windows main-class: dev tags: - windows - terminal --- ## Introdução Fala pessoal! Para começar bem o ano, nada melhor que um curso novo né? E sabe o que é melhor? É de graça! Esse 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: - [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows) - [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) Espero que gostem =) ## Computador novo Recentemente 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. Mas 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. ## Mil dificuldades com terminal e windows Eu 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. Alguns vão se virando e acabam conseguindo fazer funcionar, mas vários outros travam e alguns acabam até desistindo de aprender. Esse curso tem o intuito de ajudar essas pessoas a não travarem mais e estudarem o que realmente importa. ## Ementa Enfim, vamos ao que interessa, segue abaixo a ementa: - Atualizações e Insiders Program - Instalando um Package Manager - Habilitando WSL e instalando Ubuntu - Convertendo para WSL 2 - Instalando um terminal - Criando um usuário no Linux - Definindo usuário padrão no WSL - Movendo entre diretórios no terminal - Configurando diretório padrão para o terminal - Configurando terminal padrão no Windows - Configurando tema para o terminal - Criando teclas de atalho no terminal - Instalando o Zsh e Oh My Zsh - Listando e criando diretórios no terminal - Editores de texto no terminal - Editando o tema do Zsh - Configurando plugin de auto-suggestions - Criando chaves ssh - Criando um Alias para comandos do terminal - Configurando o WSL no VS Code - Configurando o NVM e instalando o NodeJS - Instalando o Yarn - Rodando um projeto NodeJS Como 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. ## Links para o curso Os links estão ali em cima, mas caso você não tenha visto, seguem os links aqui: - [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows) - [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) ## Conclusão Espero 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 =) ================================================ FILE: posts/novo-curso-de-git-e-github-para-iniciantes.md ================================================ --- layout: post date: 2016-04-03T14:21:20.000Z title: Novo curso de Git e Github para iniciantes description: Aprenda como funciona o git e o github em vídeos curtos e práticos. main-class: misc tags: - dev - cursos - git - github --- ## Introdução Vou 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 Fazem 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 =) ## Por que Git e Github? Para 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. Como 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. Fiz 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: - `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. - `Configurando o Git`: passos de instalação e configuração do usuário. - `Essencial do Git`: os principais comandos para se começar a trabalhar. - `Repositórios remotos`: um pequeno passeio pelo Git e como colocar seu projeto lá. - `Ramificação (Branch)`: entender a necessidade de ter branches separados, como funcionam e os conceitos de Merge e Rebase. - `Extras`: coisas simples, mas que podem ajudar bastante ao utilizar o Git. O 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. ## Funcionamento dos cursos Todos 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. Terã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. Mas 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 ## Como ajudar a ter mais cursos? Existem várias formas que você pode me ajudar. [Momento de Will mendigando] ### Compartilhe! Se 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**! ### Faça os cursos e comente Nã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. ### Dê sugestões Fale 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 ## Um abraço e que comecem os estudos!! Vamos lá galera, todo mundo acessando, compartilhando, curtindo, comentando e sendo feliz!!! [Link do curso Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/) ================================================ FILE: posts/novo-projeto-awesome-audioviz.md ================================================ --- layout: post date: 2016-03-27T03:24:29.000Z title: Novo projeto Awesome Audio Viz description: Quem já acessou esse blog uma vez na vida já viu como eu amo música, por que não um projeto usando música? main-class: dev tags: - dev - audio - creative categories: null --- ## Introdução Primeiro 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. Bom, 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. ## Paixão por Música Acho 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. Sempre 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. Depois 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). Junto 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. Entã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? ## Nascimento de outra Awesome Para 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. Dessa 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 Outra 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 Tendo 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. Entã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! =) ## Criação da Logo Quem 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 ## Call for Papers E 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 Eu peguei e gravei um vídeo beeeeeem porquinho, propondo a minha talk, se quiser rir um pouco, segue o vídeo abaixo: O 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/ ## Conclusão É 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ã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) ================================================ FILE: posts/o-basico-da-api-do-reactjs.md ================================================ --- layout: post date: 2015-07-17T03:18:37.000Z title: "#3 - O básico da API do ReactJS" description: Aprenda um pouco mais sobre a API do React e como começar a brincar. main-class: js tags: - react - js - tutorial categories: - Aprendendo ReactJS --- ## Introdução Para 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. Como 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/). Nos 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. Tentarei 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. ## Criando e Renderizando componentes O 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. ### ReactDOM.render ```js render( ReactElement element, DOMElement container, [function callback] ) ``` **update: (02/06/2016)** - O método anteriormente ficava dentro da API do React, mas agora passou para a API específica do ReactDOM. O 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. Um 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/). Segue um [vídeo em inglês](http://learnreact.com/lessons/1-render-getting-started), explicando este método. ### Render sem JSX - React.createElement ```jsx ReactDOM.render( React.createElement('h1', null, 'Hello World!'), document.getElementById('content') ) ``` Sem 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. Segue um [vídeo em inglês](http://learnreact.com/lessons/2-createelement), falando sobre este método. ### Render com JSX ```jsx ReactDOM.render(

    Hello World!

    , document.getElementById('content')) ``` Para o render com o JSX, basta criamos o elemento com as tags do próprio html e ligarmos a um container. ## createReactClass ```js createReactClass(object specification) ``` Serve 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. ```jsx var Hello = createReactClass({ render: function () { return

    Hello World!

    } }) ReactDOM.render(, document.getElementById('content')) ``` Como 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`. Segue um [vídeo em inglês](http://learnreact.com/lessons/4-createclass), explicando como funciona. ### React.component (ES6) No 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: ```jsx class Hello extends React.Component { render() { return

    Hello World!

    } } ReactDOM.render(, document.getElementById('content')) ``` ### Exemplos Seguem os exemplos rodando no Codepen:     Repare que eu criei diferentes containers para que cada elemento fosse renderizado em um desses espaços. ### Usando JS dentro do render Já 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. ```jsx var frutas = ['Banana', 'Maçã', 'Uva'] ReactDOM.render(
    {frutas.map(function (fruta) { return
  • {fruta}
    • })}
    , document.getElementById('compras') ) ```

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

    No 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`. ## Props Quando 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. ```jsx var Hello = createReactClass({ render: function () { return

    Hello {this.props.name}!

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

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

    ## Especificações, Ciclos de Vida e Estado ### Especificações (Specs) Quando 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. #### getInitialState Esse 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. #### getInitialProps Esse 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. ### propTypes O objeto de `propTypes` permite validar as propriedades que estão sendo passadas para os componentes. ### Ciclos de Vida (Lifetime Cycles) O 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: - `componentWillMount`: chamado uma vez só, tanto do lado client quando do server antes da renderização acontecer. - `componentDidMount`: chamado uma vez só, só na parte do cliente, depois da renderização. - `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. - `componentWillUnmount`: chamado quando desejamos desmontar o componente. Existem mais métodos na API, basta dar uma [olhada aqui](https://facebook.github.io/react/docs/component-specs.html). ## Criando um timer Já tendo os conceitos acima, conseguimos criar um simples timer. Segue o código e vamos destrinchá-lo: ```jsx var Timer = createReactClass({ getInitialState: function () { return { elapsed: 0 } }, componentDidMount: function () { this.timer = setInterval(this.tick, 50) }, componentWillUnmount: function () { clearInterval(this.timer) }, tick: function () { this.setState({ elapsed: new Date() - this.props.start }) }, render: function () { var elapsed = Math.round(this.state.elapsed / 100) var seconds = (elapsed / 10).toFixed(1) return (

    Já se passaram {seconds} segundos.

    ) } }) ReactDOM.render(, document.getElementById('timer')) ``` Na 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. Na 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. Na 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. A 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). Na 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`. Por 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. Segue um exemplo live no Codepen:

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

    O 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. ## Conclusão Bom, 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. #### Ahhh, mas como eu aprendo mais de Javascript? Tem 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!! ## Veja mais posts [Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs) ================================================ FILE: posts/o-que-ninguem-diz-para-iniciantes.md ================================================ --- layout: post date: 2016-03-26T13:38:25.000Z title: O que ninguém diz para os iniciantes description: Análise de uma famosa entrevista com Ira Glass sobre iniciantes e o processo criativo. main-class: misc tags: - dev - creative categories: null --- ## Introdução Fala 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. ## Vídeo Inspirado Se você estiver tendo problemas de visualizar o vídeo acima completo, tente [esse aqui](https://www.youtube.com/watch?v=D_gSFWt6ito) ## Transcrição Livre

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

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

    Mas existe uma lacuna.

    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.

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

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

    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ós sabemos que nosso trabalho não tem aquela coisa especial que gostaríamos que tivesse.

    Todos nós passamos por isso.

    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.

    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.

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

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

    ## Análise e Introspecção Enquanto 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. Você 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? Como o Ira Glass diz, isso é normal, você tem bom gosto, você sabe olhar bons trabalhos e dizer o quanto eles são bons. O 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. Você 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. Mas 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. Esses 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!** Você 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. Existia 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. Há 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. Um 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. Ou 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. ## Conclusão Posso 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. ================================================ FILE: posts/o-que-preciso-saber-para-trabalhar-no-exterior.md ================================================ --- layout: post date: 2017-12-03T17:55:35.000Z title: O que preciso saber para trabalhar no exterior? description: Algumas coisinhas que você precisa saber para poder conseguir um trabalho no exterior e/ou remoto. main-class: dev tags: - experiencia - dicas - lifestyle categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução ¡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! O 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). Enquanto 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 =) A 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!

    Perca o medo!

    Isso 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ã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? E 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 ## Tenha foco e não tente abraçar o mundo Outra 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ã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ão tenha medo de teoria Muitos 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. O [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). ## Pesquise, pergunte, não tenha dúvidas Se você tem vontade de trabalhar fora, primeiro você precisa fazer várias perguntinhas e colocar elas numa balanca. - Quais empresas eu gostaria de trabalhar? - Quero trabalhar e viajar ao mesmo tempo? - Quero só me mudar do Brasil? - Quais países eu gostaria de morar? Esse país é quente, é frio? Será que vou me adaptar? - Quais os requisitos que esse país pede? Nã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? Tendo 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 =) ## Inglês, ahh o temido Inglês... Nã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: Muita 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 Eu 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. Ok, 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. > O mais importante numa comunicação é entender e se fazer entendido. Nada mais. Claro 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. Lembre-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. Entã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. Aí 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. Eu 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! Sobre 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... E 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. Lembro 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. Tem 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. E 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). ## Crie um portfólio Nã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. Você 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 =) Outra 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. ## Mire nas empresas e vai na fé! Se 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! Sobre 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! ## Conclusão Bom 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! ================================================ FILE: posts/onde-baixar-svg.md ================================================ --- layout: post date: 2015-01-16T16:51:33.000Z title: "#3 - Onde baixar SVG?" description: Eu sou programador e não designer, como é que vou fazer essas coisas aí? Aqui vou mostrar que não precisa ser designer para poder usar SVG. main-class: svg tags: - svg categories: - O mundo mágico do SVG --- ## Índice da série * [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) * [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) ## Não sei desenhar, não posso usar SVG. Vejo 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. ## Bancos de imagens ![Uma tela do shutterstock para baixar](/assets/img/baixar-svg/imagens.png) As 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. #### Links * [Shutterstock](http://www.shutterstock.com/pt/cat-29-Vectors.html) - Pago * [Vecteezy](http://www.vecteezy.com/) - Free e Pago * [SVGCuts](http://svgcuts.com/blog/category/fsvgotw/) - Free ## Ícones ![Vários ícons coloridos](/assets/img/baixar-svg/icons.png) Os í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. Particularmente sou muiiiiito fã do [icomoon](https://icomoon.io/), tanto que farei um post separado, especial só para ele. #### Links * [Icomoon](https://icomoon.io/) - Free e Pago * [Iconmonstr](http://iconmonstr.com/) - Free * [Material Design Icons](https://github.com/google/material-design-icons) - Free * [Iconic](https://useiconic.com/) - Pago * [Flaticon](http://www.flaticon.com/) - Free e Pago * [The Noun Project](http://thenounproject.com/) * [Awesome Svg - Icons](https://github.com/willianjusten/awesome-svg/blob/master/topics/Icons.md) - tem mais links aqui ## Patterns ![Uma imagem feita em polígonos](/assets/img/baixar-svg/patterns.jpeg) Particularmente 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 No 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. #### Links * [Plain Pattern](http://www.kennethcachia.com/plain-pattern/) - Permite criar patterns com ícones em SVG (uso bastante) * [Trianglify](http://qrohlf.com/trianglify/) - Famosas texturas de low poly * [SVGeneration](http://www.svgeneration.com/) - permite criar diferentes tipos de patterns * [Patternbold](http://buseca.github.io/patternbolt/) - alguns tipos simples de patterns * [Gerstnerizer](http://eskimoblood.github.io/gerstnerizer/) - gerador minimalista de patterns ## Agora não tem mais desculpa! Já 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 =) ================================================ FILE: posts/organizando-seu-css-com-itcss.md ================================================ --- layout: post date: 2016-02-09T16:08:54.000Z title: Organizando seu CSS com ITCSS description: Organizar CSS em larga escala é difícil, mas não precisa ser tão assim. Aprenda uma arquitetura para te auxiliar nisso. main-class: css tags: - css - metodologia - frontend categories: null --- ## Introdução Fala 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. Para 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 Prometo 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). **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. ## Problemas comuns do CSS O 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. ![Gráfico mostrando os problemas do css como especificidade](/assets/img/itcss/css-problemas.png) Você 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. ## Nasce o ITCSS A 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. Pensando 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: ![Gráfico mostrando a especificidade usando ITCSS](/assets/img/itcss/itcss.png) Conforme 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. ![Triângulo do ITCSS](/assets/img/itcss/triangle.png) ## Mas o que são essas divisões? Essas camadas são organizadas da mais genérica até a mais específica. E estas são: ### Settings Essas 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. ```scss $color-ui: #BADA55; $spacing-unit: 10px; ``` ### Tools É 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. ```scss @mixin font-brand() { fotn-family: "UI font", sans-serif; font-weigth: 400; } ``` ### Generic Essa é 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. ```scss * { box-sizing: border-box; } ``` ### Base Aqui 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! ```css ul { list-style: square outside; } ``` ### Objects Seguindo 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. Aqui é 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: ```scss .base-list { margin: 0; padding: 0; list-style: none; > .item { padding: $spacing-unit; } } ``` ### Components Aqui 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. Normalmente, aqui ficarão listas específicas como de produtos, cards específicos como aqueles incluindo imagens, etc. Seguindo o RSCSS, teríamos algo como: ```scss .products-list { @extend font-brand(); border-top: 1px solid $color-ui; > .item { border-bottom: 1px solid $color-ui; } } ``` ### Trumps Por 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. É 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. ```css .hidden { display: none !important; } ``` ## Coisas para se prestar atenção Depois de tudo isso, tem algumas coisas que você deve prestar atenção na arquitetura, como: - A especificidade vai crescendo linearmente e lentamente de camada a camada. - Progressivamente adicionamos estilos, **nunca removemos**. - Cada camada é mais detalhada e explícita que a anterior. - Se você cria um objeto genérico, ele pode ser extendido/reutilizado, aproveite isso. - Tudo que você cria tem um lugar específico para ficar. - Trabalhando assim, diga adeus aos problemas de especificidade. ## Extra Se 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`. ![Triângulo do ITCSS](/assets/img/itcss/theme.png) Colocando 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. ## Conclusão Bom 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. ================================================ FILE: posts/perfomance-web-critical-css-e-jekyll.md ================================================ --- layout: post date: 2018-03-21T07:55:37.000Z title: "Perfomance Web: Critical CSS e Jekyll" description: A web é lenta, mas sempre podemos deixar mais rápido, mais uma dica simples para melhorar seus sites. main-class: dev tags: - performance - css - jekyll categories: - Performance Web --- ## Introdução Olá 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. Enquanto vou escrevendo esse post, vou ouvindo [Kishi Bashi](https://open.spotify.com/artist/3LVPGE5jPPwtbGslx07YR0?si=6_TVym1hRf60MBJaNh-3tg), um multi-instrumentista fantástico! ## Render Blocking Se 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: ![Imagem mostrando sobre o render blocking](/assets/img/screen shot 2018-03-20 at 20.42.21.png) Ele diz que estilos carregados externamente bloqueiam a renderização da página e diz para considerar usar o CSS crítico via ` ``` Você 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! ## Conclusão Espero 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/ ================================================ FILE: posts/performance-web-evite-escrever-html-demais.md ================================================ --- layout: post date: 2018-05-29T11:10:42.000Z title: "Performance Web: Evite escrever HTML demais" description: Calma, HTML ainda é importante, mas é legal ficarmos atentos a quantidade de nós criados. main-class: dev tags: - performance - seo categories: - Performance Web --- ## Introdução Dando 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! Enquanto 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 =) ### Otimizar CSS, melhorar JS, mas e o HTML? Quando 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. Só 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: * `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. * `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. * `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. Bom, espero que com os pontos acima você já esteja no mínimo assim: > Ai meu Deus! Sou eu quem faço o Chrome gastar 98% da minha memória! Para melhorar isso, vou colocar aqui algumas dicas que podem ajudar a melhorar seu HTML e evitar esse monte de problemas. ## Dicas e recomendações para melhorar o HTML * Tenha menos que 1500 nós no total * Tenha no máximo uma profundidade de 32 nós no documento * Evite que o elemento pai tenha mais que 60 filhos Só com essas primeiras dicas, certeza que alguém pensou: > E como eu vou saber o número dessa caralha toda? Fique 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! Continuando com as dicas: * 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. * Faça paginação caso haja a necessidade (irei mostrar esse ponto mais a frente) * 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) ## Estudo de caso Bom, 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: ![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) Repare 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!** Apó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. Eu 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: ![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) Como podem perceber, minha nota passou para 98, mas não é isso que importa, mas outros marcadores também foram melhorados, como: - First Contentful Paint: **-310ms** (melhoria de **~22%**) - Estimated Input Latency: **-33ms** (melhoria de **~39%**) - Speed Index: **-1060ms** (melhoria de **~49%**) E 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). ## Conclusão A 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). ================================================ FILE: posts/performance-web-usando-fontes-do-sistema.md ================================================ --- layout: post date: 2018-03-19T10:41:16.000Z title: "Performance Web: Usando fontes do sistema " description: Como algo tão simples como as fontes podem ajudar na performance do seu site. main-class: dev tags: - performance - fontes categories: - Performance Web --- ## Introdução Dando 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. Enquanto 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. ## Uso de fontes Bem 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! Com 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: ```html ``` Note 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. ![Imagem do Google Fonts, mostrando um Load Time: Slow](/assets/img/fonts.png) Será 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? ## Use fontes que o usuário já está acostumado Nos ú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). E 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. E 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? ## Como usar as fontes do sistema? Apesar 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: ```css body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } ``` E o Medium/Wordpress fazem umas pequenas mudanças e usam: ```css body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; } ``` **Nota:** esse método só pode ser usado com `font-family`, não utilize como `font`, pois poderá resultar em estilos inesperados. ## Conclusão Como 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! É 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! ================================================ FILE: posts/perguntas-e-respostas-jekyll.md ================================================ --- layout: post date: 2015-01-21T08:15:41.000Z title: Perguntas e Respostas - Jekyll description: Algumas dúvidas comuns sobre o Jekyll. Entenda melhor como funciona esse gerador estático. main-class: jekyll tags: - jekyll categories: null --- ## Introdução Desde 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. É 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. Resolvi 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! =) ## Índice * [Jekyll serve só para Blog?](#soblog) * [Como funciona exatamente?](#comofunciona) * [Quais comandos que o Jekyll tem?](#rodar) * [O que é esse tal de Front Matter?](#frontmatter) * [O que são variáveis globais?](#globais) * [Existem mais variáveis?](#outras) * [Como usar as variáveis?](#variaveis) * [Quais funções/comandos temos no Jekyll?](#funcoes) * [Como crio um post?](#post) * [Como crio uma página?](#pagina) * [Meu css e imagens não estão pegando! O que faço?](#arquivos) * [O que eu tenho que subir para o servidor?](#servidor) * [Como compilar o Sass?](#sass) * [Como faço para mostrar código colorido?](#highlight) * [Como usar esse sistema de comentários?](#disqus) * [Como crio as urls amigáveis? (permalink)](#permalink)

    Jekyll serve só para blog?

    Nã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).

    Como funciona exatamente?

    Outra 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`. Ele cria um conjunto de pastas básicas: * `_includes`: são trechos que se repetem ao longo do site e podem ser incluídos sem ter que digitar tudo. * `_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. * `_posts`: onde iremos escrever nossos posts, o padrão para escrever é em [Markdown](http://daringfireball.net/projects/markdown/syntax) * `_sass`: os arquivos que geram o css, se você preferir trabalhar em [sass](http://sass-lang.com/), o próprio jekyll compila para você. * `css`: pasta para onde vão os arquivos gerados pelo sass. * `_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. * `about.md`: um arquivo do tipo `page` que irá gerenciar uma página /about * `feed.xml`: arquivo para gerar o feed para o seu blog, essencial para que as pessoas possam seguir seu blog com mais facilidade. * `index.html`: A página inicial do seu blog E 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.

    Quais comandos que o Jekyll tem?

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

    O que é esse tal de Front Matter?

    O 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: ```yaml --- layout: default title: Um nome legal para o meu Blog --- ``` De 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: ```yaml --- layout: post title: "Perguntas e Respostas - Jekyll" date: 2015-01-21 06:15:41 image: '/assets/img/perguntas-jekyll/img-share.png' description: "Algumas dúvidas comuns sobre o Jekyll. Entenda melhor como funciona esse gerador estático." tags: - jekyll - frontend --- ```

    O que são variáveis globais?

    Existe 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: * `layout` : serve para definir qual arquivo dentro da pasta `_layouts` irá utilizar. * `permalink` : serve para definir como será criado o link - [veja mais sobre](#permalink). * `published` : para definir se o arquivo poderá ser gerado ou não, o padrão é `true`. * `category ou categories` : como o nome já diz, define uma categoria ou conjunto delas para o post. * `tags` : serve para definir um conjunto de tags para o post, acima temos um exemplo.

    Existem mais variáveis?

    Alé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/). #### Variáveis do site * `site.pages` : uma lista de todas as páginas do site. * `site.posts` : uma lista de todos os posts do site. * `site.categories.CATEGORIA` : uma lista de todos os posts daquela categoria. * `site.tags.TAG` : uma lista de todas os posts daquela tag. #### Variáveis da página * `page.content` : o conteúdo da página. * `page.title` : o título da página. * `page.url` : a url da página em questão. * `page.date` : a data da página, tendo a estrutura `YYYY-MM-DD HH:MM:SS +/-TTTT` * `page.tags` : mostra quais tags que a página pertence.

    Como usar as variáveis?

    Depois 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** ```html { { page.title } }

    { { post.title } }

    { { title } } ```

    Quais funções/comandos temos no Jekyll?

    Como 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** Podemos incluir arquivos utilizando o comando `{ % include % }`, segue abaixo o código do meu layout `default`. ```html { % include head.html % } { % include svg-icons.html % } { % include header-default.html % }
    { { content } }
    { % include footer.html % } ``` Podemos 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: ```html
    { % for tag in post.tags % } { { tag } } { % endfor % }
    ``` Temos 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. ```html { % if page.image % } { % else % } { % endif % } ```

    Como crio um post?

    Para 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.

    Como crio uma página?

    Basta 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/`.

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

    Uma 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: * `/assets/img/imagem.png` : url relativa * `http://meusite.com.br/blog/assets/img/imagem.png` : url absoluta Quando 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.

    O que eu tenho que subir para o servidor?

    Depende. 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.

    Como compilar o Sass?

    O 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: ```css --- --- @import "base" @import "functions" ```

    Como faço para mostrar código colorido?

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

    Como usar esse sistema de comentários?

    O 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: ```js var disqus_loaded = false; function load_disqus() { disqus_loaded = true; var disqus_shortname = 'willianjusten'; var disqus_title = '{{page.title}}'; var disqus_url = '{{page.url}}'; var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); var ldr = document.getElementById('disqus_loader'); }; window.onscroll = function(e) { if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) { //hit bottom of page if (disqus_loaded==false) load_disqus() } }; ``` Um 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. Enquanto 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!** Criar permalinks é a coisa mais fácil do mundo no Jekyll e isso é lindo demais =) Basta definir no `_config.yml` como você quer que seja o link, seguem exemplos abaixo: ```yaml # comportamento default permalink: /:categories/:year/:month/:day/:title.html # mostrando a categoria/titulo permalink: /:category/:title # mostrando somente o título permalink: /:title/ ``` Se quiser saber de mais alguns tipos, só olhar [aqui](http://jekyllrb.com/docs/permalinks/). ## Conclusão Boooom, 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 =) Não foi solucionada? Pergunta nos comentários e eu atualizarei constantemente com a resposta. ================================================ FILE: posts/por-que-ir-em-eventos-vale-a-pena.md ================================================ --- layout: post date: 2015-03-29T14:35:14.000Z title: Por que ir em eventos vale a pena? description: Alguns dos motivos que fazem os eventos serem tão sensacionais e que todos deveríamos ir. main-class: misc tags: - eventos - frontend categories: null --- ## Introdução Olá 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. Irei 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. ## Viagem Eu 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? ## Amigos antigos Dessa 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. Lá, 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!! =) ## Amigos novos Uma 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. Agradecimentos 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 =) ## Conhecimento É 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! ## Injeção de ânimo Como, 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. ## Conclusão Acho 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! ================================================ FILE: posts/por-que-usar-jekyll.md ================================================ --- layout: post date: 2015-01-05T23:18:29.000Z title: "Flame War: Por que usar Jekyll?" description: "Depois de várias dúvidas, aqui vai uma lista de razões para se utilizar o Jekyll para criação de Blogs de desenvolvimento. " main-class: jekyll tags: - jekyll --- Olá pessoal, hoje terá um post extra! Não vai se acostumando! E brincadeirinha, não vai rolar flame war aqui, assim espero =o Bom, 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. > Quero abrir aqui uma discussão sobre o furor gerado em cima do Jekyll. Gostaria 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. Bom, 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. Se 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. Por 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. Eu 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? Bom, vamos ver as opiniões, quero entender melhor isso de idolatrar Jekyll pra saber se fiz um julgamento errado. Antes 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. `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. `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. `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. `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. `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. `6)` Facilidade na hospedagem, por ser estático, ele pode inclusive ser hospedado no Github Pages (o que a maioria dos desenvolvedores fazem) `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). `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? `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. `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. `11)` Criação de urls amigáveis de modo prático, fácil e automático. Se 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. ================================================ FILE: posts/por-que-usar-svg.md ================================================ --- layout: post date: 2015-01-08T10:39:47.000Z title: "#1 - Por que usar SVG?" description: O SVG finalmente começa dar o ar das graças e você vai saber aqui o porquê disso. main-class: svg tags: - svg - frontend - trend - dicarapida categories: - O mundo mágico do SVG --- ## Meu histórico Muita 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. Essa 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). També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 =) Depois 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 é: ## Por que usar SVG? Bom, 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 ### Rico em Detalhes e Cores ![Coração feito de ícones coloridos](/assets/img/por-que-usar-svg/coloridos.jpg) Fonte: [Designmodo](http://designmodo.com/flat/) ### Interativo e Estilizável via CSS ![Ícone de uma lâmpada](/assets/img/por-que-usar-svg/animacao.gif) Fonte: [tutsplus](http://tutsplus.github.io/Styling-Iconic/styling/index.html) ### Responsivo ![Imagem de uma logo em vários tamanhos](/assets/img/por-que-usar-svg/responsivo.png) Fonte: [Codrops](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) ### Animações de alto nível ![Animação desenhando uns frascos](/assets/img/por-que-usar-svg/animacao-2.gif) Fonte: [Panizzon](http://panizzon.ind.br/) ### Perfeito para representação Gráfica ![Gráfico](/assets/img/por-que-usar-svg/grafico.png) Fonte: [D3 example](http://bl.ocks.org/Caged/6476579) ### Efeitos e Filtros ![Uma imagem com diferentes efeitos](/assets/img/por-que-usar-svg/filtros.png) Fonte: [Web Platform](https://webplatform.github.io/docs/svg/tutorials/smarter_svg_filters/) ### Mais qualidades? * [Boa Compatibilidade](http://caniuse.com/#search=svg) * Podem ser minificados (Gzip) * [Maior Acessibilidade](http://www.sitepoint.com/tips-accessible-svg/) * Elementos de DOM para serem editados separadamente * É tudo código!! =) ### Concluindo... Sabia 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! Deixo para vocês uma última imagem e um link falando sobre quais as tendências de 2015, advinha quem aparece para caramba lá :p ![SVG Trends](https://ihatetomatoes.net/wp-content/uploads/2014/12/img_assets_svg.jpg) [Design Trends de 2015](http://foundersgrid.com/design-trends-2015) ================================================ FILE: posts/porque-eu-evito-funcoes-anonimas.md ================================================ --- layout: post date: 2016-07-16T16:08:38.000Z title: Porque eu evito funções anônimas description: Funções anônimas podem esconder uma má prática. main-class: js tags: - js - tip categories: null --- ## Introdução Fala pessoal, vamos lá que esse será um post simplão, mas importante para evitar algumas más práticas em nosso código Javascript. Enquanto 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. ## Como criar funções em JS? Existem diversas formas de se criar funções em JS e algumas delas são: ```js var hey = function() { console.log('Hey'); } function hey() { console.log('Hey'); } obj.hey = function() { console.log('Hey'); } ``` Se 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ê? ## Funções anônimas são difíceis de debugar Vamos supor que eu tenha uma função que joga um erro qualquer quando executada: ```js setTimeout(function() { throw new Error('hey'); }, 200); ``` Quando executar essa função, o erro claramente é jogado no console, como podemos verificar na imagem abaixo: ![Imagem indicando "Uncaught Error: hey (anonymous function)"](/assets/img/js-anonima/anonima-erro.png) O 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. Agora escrevendo a mesma função, porém nomeada: ```js setTimeout(function Hey() { throw new Error('hey'); }, 200); ``` Olha como fica o retorno: ![Imagem indicando "Uncaught Error: hey (Hey function)"](/assets/img/js-anonima/nomeada-erro.png) Quando abrimos o erro, podemos ver claramente que o erro se encontra na função `Hey` e isso já facilitaria nossa debugagem. ## Funções anônimas não são reutilizáveis Digamos 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: ```js document.querySelector('.item').addEventListener('click', function(event) { this.classList.toggle('active'); }); ``` Você 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: ```js function toggleActive() { this.classList.toggle('active') } document.querySelector('.item').addEventListener('click', toggleActive) document.querySelector('.another-item').addEventListener('click', toggleActive) ``` ## Funções declaradas facilitam o desacoplamento Vamos 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`: ```js var fs = require('fs'); var myFile = '/tmp/test'; fs.readFile(myFile, 'utf8', function(err, txt) { if (err) return console.log(err); txt = txt + 'Mais algum texto!'; fs.writeFile(myFile, txt, function(err) { if(err) return console.log(err); console.log('Texto adicionado!'); }); }); ``` Ali 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. Se 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! Para melhorar isso, poderíamos primeiro nomear as funções, para já pelo menos saber de onde o erro vem: ```js var fs = require('fs'); var myFile = '/tmp/test'; fs.readFile(myFile, 'utf8', function appendText(err, txt) { if (err) return console.log(err); txt = txt + 'Mais algum texto!'; fs.writeFile(myFile, txt, function notifyUser(err) { if(err) return console.log(err); console.log('Texto adicionado!'); }); }); ``` Tendo 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? ```js var fs = require('fs'); function notifyUser(err) { if(err) return console.log(err); console.log('Texto adicionado!'); }; function appendText(err, txt) { if (err) return console.log(err); txt = txt + 'Mais algum texto!'; fs.writeFile(myFile, txt, notifyUser); } var myFile = '/tmp/test'; fs.readFile(myFile, 'utf8', appendText); ``` Olha 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. ## Outras coisinhas mais... As `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). Funçõ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? Programas 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. ## Conclusão Bom 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. ================================================ FILE: posts/pre-venda-curso-de-svg.md ================================================ --- layout: post date: 2016-04-21T21:15:10.000Z title: "Pre-venda: Curso de SVG" description: Se adiante e adquira um dos cursos mais completos de SVG totalmente em português. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Introdução Faaala 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/). Mas 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 Uma 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 =) Em breve eu vou estar colocando aqui um vídeo de divulgação do curso também, para quem quiser compartilhar ^^ Se 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**. Role 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. **A pré-venda foi finalizada, muito obrigado a todos!** O curso agora está disponível em seu preço normal e você pode [comprar por aqui](http://www.eventick.com.br/curso-de-svg) ## Video ## Objetivo do Curso O 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. Existirã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. ## Ementa - Introdução ao SVG - Introdução do Curso - História - O que é? - Por que usar? - Quando usar? - Como criar? - Onde baixar? - Como usar e suas vantagens/desvantagens? - Como imagem - Como background-img - Via iframe/object/embed - Como Data URIs - Inline SVG - A estrutura do SVG - Plano Cartesiano - ViewBox e ViewPort - preserveAspectRatio - Formas Básicas - Elemento Path - Groups, defs, use e symbol - Estilizando o SVG - Métodos para estilizar e Peso das Propriedades - Fill e Stroke - Colorindo ícones com mais de uma cor - Projeto #1 - Construindo um SVG responsivo e adaptativo - Tornando o SVG Fluido - Tornando o SVG adaptativo - Sistemas de Ícones em SVG - Fixando o uso de ícones com Symbol - Usando o Icomoon - Projeto #2 - Criando um boilerplate em Gulp para gerar sprites - Projeto #3 - Criando um loader com SVG e CSS Animations - Editando e preparando o visual do nosso loader - Usando Keyframes para animar - Animações SVG com SMIL - Entendendo o que é SMIL - Criando uma animação simples - Famoso Morph Path - Especificando um caminho para a animação - Manipulando SVG com JS - Utilizando JS para estilizar e criar novos elementos - Algumas bibliotecas aconselhadas - Criando animações com as propriedades de Stroke - Criando um loader animado usando propriedades do stroke - Fazendo o efeito de desenhar - Usando o scroll para controlar o desenho - Filtros SVG - Alguns tipos de filtros - Criando uma animação com filtros - Acessibilidade no SVG - Dicas e informações para deixar tudo mais acessivel - Performance - Criando e Exportando com Illustrator - Usando ferramentas para otimizar - Busque Conhecimento - Projeto Awesome-SVG e outros - Agradecimentos ## Certificado Todos os alunos que terminarem o curso irão receber um certificado de conclusão ## Repositório do Curso Todas 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á.

    Pré-venda Finalizada!

    As compras agora poderão ser feitas de duas formas: - Em dólar direto pela plataforma - Em real através do Eventick **Update:** o curso agora pode ser adquirido através da [Udemy](https://www.udemy.com/aprendendo-svg-do-inicio-ao-avancado/) ### Contato Qualquer dúvida ou curiosidade, é só mandar um email para willianjustenqui@gmail.com ou então falar comigo através de qualquer rede social. ================================================ FILE: posts/refatorando-componentes-react-para-es6.md ================================================ --- layout: post date: 2016-07-30T06:10:26.000Z title: Refatorando componentes React de ES5 para ES6 description: Aproveite a nova sintaxe e entenda a diferença entre os códigos. main-class: js tags: - react - js - tutorial categories: - Aprendendo ReactJS --- ## Introdução Fala 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. Sã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 =) Esse é 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. ### Importando o React Em ES5 seria o modelo normal do CommonJS: ```js var React = require('react'); var PropTypes = require('prop-types'); ``` Já em ES6 usando o sistema de [import de módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import): ```js import React, { PropTypes } from 'react'; ``` Se 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). ### Criando um componente e exportando Em ES5 nós criamos componentes utilizando o método `createReactClass` e depois nós os exportamos usando o `module.exports`. ```js var MeuComponente = createReactClass({ ... }); module.exports = MeuComponente; ``` Em ES6, você pode criar uma classe e extender de `React.Component` para ter as funcionalidades do React. ```js export default class MeuComponente extends React.Component { ... } ``` Repare 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. ```js class MeuComponente extends React.Component { ... } export default MeuComponente; ``` ### PropTypes e getDefaultProps ~~Em ES5, meu objeto de propTypes fica **dentro** da minha classe, assim como tenho um método para definir minhas propriedades default.~~ **update 17/05/2018** - após a versão 15.5 PropTypes foi colocado em uma biblioteca separada do React ```js var React = require('react'); var PropTypes = require('prop-types'); var MeuComponente = createReactClass({ propTypes: { title: PropTypes.string.isRequired }, getDefaultProps: function() { return { title: 'Heey', }; } }); ``` ~~Já em ES6, tanto a definição de `PropTypes` quanto o `defaultProps` vão para o lado de **fora**.~~ ```js import React from 'react'; import PropTypes from 'prop-types; export default class MeuComponente extends Component { ... } MeuComponente.propTypes = { title: PropTypes.string.isRequired, } MeuComponente.defaultProps = { title: 'Heey', }; ``` ### getInitialState Para definir estados iniciais ao meu componente, em ES5 eu preciso usar o método `getInitialState`. ```js var MeuComponente = createReactClass({ getInitialState: function() { return { title: this.props.title, }; }, }); ``` Como 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. ```js export default class MeuComponente extends Component { constructor(props) { super(props); this.state = { title: props.title, }; } } ``` ### Fazendo Bind dos métodos Esse 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..." O 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. Em ES5 temos: ```js var MeuComponente = createReactClass({ handleClick: function(event) { this.setState({ liked: !this.state.liked, }); } }); ``` Em ES6, precisaremos fazer o bind manual então: ```js export default class MeuComponente extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick(event) { this.setState({ liked: !this.state.liked, }); } } ``` Reparem 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. ### Shorthand Syntax Se 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. ```js var MeuComponente = createReactClass({ componentWillMount: function() { ... } }); module.exports = MeuComponente; ``` Em 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: ```js export default class Mycomponent extends React.Component { componentWillMount() { ... } } ``` ## Conclusão Bom 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 =) Lembrem-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. ================================================ FILE: posts/saude-deve-ser-a-prioridade.md ================================================ --- layout: post date: 2018-07-24T12:19:43.000Z title: Nem React, nem VueJs. Saúde deve ser uma prioridade description: Uma conversa séria de um dev que se arrepende de algumas escolhas. main-class: misc tags: - saude - lifestyle --- ## Introdução Entã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. Quando 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...) Hoje eu venho falar sobre uma coisa que nós como desenvolvedores praticamente não discutimos, que é a **saúde**. ### Devo focar em React? Angular? VueJS? Mas e a saúde? Essas 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. > Um dia o corpo cobra e às vezes o preço é caro demais. Já 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! ### Saúde mental e física! Há 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: - [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) - [Programadores e depressão por Paulo Pilotti](https://medium.com/brasil/programadores-e-depressao-30043d2972b5) - [Você é suficiente para você? por Isa Silveira](https://medium.com/@isabellasilveira/voc%C3%AA-%C3%A9-suficiente-pra-voc%C3%AA-809a0d35516b) Mas não é só da nossa cabeça que precisamos cuidar, é importante cuidarmos do resto do corpo também. E isso consiste em quê? #### Ir ao médico - Faça exames periódicos (check-ups). - Caso sinta qualquer coisa, não hesite em ir ao médico (não deixe as coisas para depois). #### Ter uma vida mais saudável - Faça uma alimentação adequada, se necessário, vá a um nutricionista. - Beba água! Qualquer coisa, [use um app para ajudar](https://www.ativosaude.com/saude/6-aplicativos-que-te-lembram-de-beber-agua/). - Faça exercícios regularmente (não precisa ser marombeiro, mas caminhadas regulares ou outro exercício que lhe traga prazer). - 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. - Evite trabalhar por muitas e muitas horas sem descanso. Pequenas pausas são necessárias. #### Para quem trabalha remoto - Procure uma cadeira confortável para você (verifique com um ortopedista qualquer coisa). - Evite ficar horas direto sentado, levante, pegue um ar e volte. - As vezes trabalhe em outro local que não sua casa, é importante ver pessoas (por mais que você ache que não). ## Conclusão Bom, 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. Agora, 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. Que 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. ================================================ FILE: posts/semantic-version.md ================================================ --- layout: post date: 2015-10-31T23:36:09.000Z title: Versionando seu projeto description: Como versionar corretamente o seu projeto e assim conseguir informar rapidamente que tipo de mudança ocorreu. main-class: dev tags: - projetos - semver categories: null --- ## Introdução E 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... ## O que é versionar e por que versionar? Antes 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. Outro 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. ## Usando o Semantic Version Para 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`: - `x` : fica para as famosas Major Versions, que seriam as versões principais fechadas. - `y`: fica para as Minor Versions, que seriam adições de pequenas melhorias. - `z`: fica para os patchs, que seriam correções de bugs. Entã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. ## Entendendo como versionar Digamos 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`. Depois 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`. Mais 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. Se 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`. ## Usando as tags do git para versionar Eu aqui falei só na teoria como nomear e versionar, mas como fazer isso na real? Usando o git é muito simples, basta usarmos as `tags`. O 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. Para criar uma tag basta: - `git tag 1.0.0` : isso criará uma `non-annontated` tag que vai referenciar ao commit atual. - `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. Para listar todas as tags criadas, basta usar `git tag`. Se quiser apagar alguma tag use o comando `git tag -d 1.0.0`. Lembre-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. Caso 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. ## Ferramentas para facilitar Uns 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 =) ## Conclusão Bom, 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. ================================================ FILE: posts/share-button-sem-dependencias.md ================================================ --- layout: post date: 2015-05-01T13:57:03.000Z title: Share Buttons sem dependências description: Ser social é muito importante, então nada melhor do que fazer com que o seu usuário consiga compartilhar mais fácil seu conteúdo. main-class: dev tags: - social - tutorial categories: null --- ## Introdução Enquanto eu escrevo vou ouvindo um dos músicos que eu mais gosto e sou influenciado, grande [Bob Dylan](https://open.spotify.com/artist/74ASZWbe4lXaubB36ztrGX). Faz 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: > Olá Willian. > 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". Mas 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. Além de ensinar como fazer, eu vou explicar um pouquinho sobre essa prática, quais vantagens e desvantagens e como corrigir essas desvantagens. ## Facilidade de compartilhar Com 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. É 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. ### Sites com share buttons são linkados sete vezes mais no twitter De 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. ## Problemas de performance O 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. Aqui abaixo coloco os links que as próprias redes sociais disponibilizam: * [Facebook](https://developers.facebook.com/docs/plugins/share-button) * [Twitter](https://publish.twitter.com/) Criando cada um desses botões e adicionando somentes eles em uma página, temos cerca de 41 requests, dentre arquivos `js`, `json`, `png`... ## Como corrigir isso? Cada 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. ### Twitter * URL: [https://twitter.com/intent/tweet](https://twitter.com/intent/tweet) * Parâmetros: `url`, `text`, `via`, `related`, `hashtags` * Ver mais em: [https://dev.twitter.com/docs/intents#tweet-intent](https://dev.twitter.com/web/tweet-button/web-intent) #### Modo de uso ```html Compartilhe no Twitter ``` Exemplo 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. ```html ``` ### Facebook * URL: [https://www.facebook.com/sharer/sharer.php](https://www.facebook.com/sharer/sharer.php) * Parâmetros: `u` #### Modo de uso ```html Compartilhe no Facebook ``` Exemplo de uso no meu blog: ```html ``` ## Detalhes ```js onclick="window.open(this.href, 'título da janela', 'width=490,height=530');return false;" ``` Se 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. ## Extra Meu 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. ## Conclusão Vimos 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. Com 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. Você 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! ================================================ FILE: posts/sistemas-de-icones-em-svg.md ================================================ --- layout: post date: 2015-03-06T22:33:23.000Z title: "#6 - Sistemas de Ícones em SVG" description: Como usar ícones em SVG e por que ele é bem melhor que outras alternativas? main-class: svg tags: - svg - icons - tutorial categories: - O mundo mágico do SVG --- ## Índice da série - [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) - [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) - [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) - [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) - [#5 - Atomic Design no SVG - g, use, defs, symbol](https://willianjusten.com.br/atomic-design-no-svg/) ## Introdução Como 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`.

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

    ## Por que usar SVG e não outros tipos? Bom, primeiro precisamos saber quais são as formas de se utilizar ícones na web: ### Image Sprites Seria um conjunto de imagens dentro de um mesmo arquivo, sendo cada imagem identificada pela sua posição `x` e `y` dentro do arquivo. **Vantagens** - Permite uso de imagens coloridas **Desvantagens** - Não é escalável - Não há opção de mudar cores - Peso em Kb considerável ### Font Icons Talvez 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`. **Vantagens** - Escalável - Permite modificar cor (somente uma cor por vez! Ainda é monocromático) **Desvantagens** - Maior número de requisições normalmente. - Enquanto não carrega a fonte, bug de aparecer um quadrado é bem comum. ![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) ### SVG icon Basicamente um ícone desenhado no illustrator e exportado para o formato SVG. > 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! Beleza 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 =) **Vantagens** - Escalável - Múltiplas Cores - Mais leve de todos (inline com gzip) - Acessibilidade - Melhor controle via CSS - Mais semântico **Desvantagens** - Certa incompatibilidade com IE8- (pode usar fallback! \o/) Bom, 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 =) ## Como fazer? Basicamente existem 3 etapas a serem feitas para se utilizar SVG icons. - Obter os ícones SVG seja através de um sistema de ícones ou os arquivos feitos por algum designer. - Adicionar o SVG inline na página em que será usada. - Chamar o ícone desejado. Como tudo na prática é melhor, vamos a ela. Vou utilizar o [IcoMoon](https://icomoon.io/) para obter meus ícones SVG. #### Passo 1.1 Clicar na opção `IcoMoon App`: ![Passo 1](/assets/img/svg-icons/passo-1.png) #### Passo 1.2 Escolher os ícones desejados ou importar de alguma fonte externa (sim, ele ainda aceita imports!) ![Passo 2](/assets/img/svg-icons/passo-2.png) #### Passo 1.3 Clicando 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. ![Passo 3](/assets/img/svg-icons/passo-3.png) Segue 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/) ![Arquivos](/assets/img/svg-icons/arquivos.png) #### Passo 2 e 3 Já 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. Abaixo segue um dos ícones separados na nossa `defs`: ```html paperplane ``` Se 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. Após definidos os ícones, basta chamá-los onde deseja, a partir do elemento `use`. ```html ``` A 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`. Segue abaixo o nosso exemplo, bastante fácil e prático.

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

    Espero 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! =) Se quiser mais links sobre ícones em SVG, veja na [awesome-svg](https://github.com/willianjusten/awesome-svg/blob/master/topics/Icons.md). Nos próximos posts irei ensinar como estilizar esse ícones, animá-los e fazer várias outras brincadeiras. Se curtiu, compartilha ae! =) ================================================ FILE: posts/social-meta-tags.md ================================================ --- layout: post date: 2015-02-09T21:33:48.000Z title: Social Meta Tags description: Aprenda como ser mais social, ter maior relevância nas redes sociais e atrair mais usuários. main-class: dev tags: - social - seo - tutorial categories: null --- ## Introdução Estou 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. Hoje 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). No 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 Segue o gráfico abaixo, indicando as origens de acessos do meu blog: ![Gráfico de Acessos do Blog por Origem](/assets/img/dica-rapida-2/canais.png) ## Mas e por que dessa tal de Meta Tag? Cada 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. ## Facebook A 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. Existem 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). Abaixo seguem algumas das tags principais, das quais inclusive utilizo no meu blog: ```html ``` Tendo 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: ![Imagem de um post no Facebook](/assets/img/dica-rapida-2/face-post.png) **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. ## Twitter Outra 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) Seguem as tags básicas: ```html ``` Para 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: ![Imagem de um post no twitter](/assets/img/dica-rapida-2/twitter-post.png) ## Google Plus Por ú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 Ele segue o padrão do [Schema.org](http://schema.org/) e seguem abaixo as tags: ```html ``` ## Conclusão Com 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 =) ================================================ FILE: posts/sou-bom-o-suficiente.md ================================================ --- layout: post date: 2016-12-30T01:12:28.000Z title: Será que sou bom o suficiente? description: Essa é uma pergunta bastante comum de nós desenvolvedores, e por que será isso? main-class: misc tags: - sindromedoimpostor - life categories: null --- ## Introdução E 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. E 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 =) ## Primeiro algumas perguntinhas... Só para ter uma ideia de como você se sente e se tem algumas similiaridades com isso, vamos lá: ### Opiniões sobre você - Você, em geral, acha o seu trabalho pior do que os outros acham? - Você fica em dúvida se deveria estar de fato no lugar que ocupa? - Você se sente preocupado com seu conhecimento e se vê sempre abaixo dos seus amigos ou colegas de trabalho? ### Atitudes perto de seus superiores - Você fica nervoso ou ansioso diante deles? - Você fica preocupado se em algum momento seu superior vai descobrir que você não é tão bom e te demitir? ### Seu processo de desenvolvimento - Você demora mais tempo tentando deixar tudo perfeito do que de fato finalizar as necessidades do projeto? - 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? Se 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. ## Síndrome do Impostor > 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". Quando 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. ![Gráfico mostrando os dois efeitos](/assets/img/sindrome-do-impostor/imposter.jpg) É comprovado que essa Síndrome é bastante comum em profissões que possuem muitas cobranças e análises, como jornalistas, escritores e claro, programadores! Há pouco tempo o Hubspot fez uma pesquisa sobre essa Síndrome na área de Desenvolvimento e encontrou resultados muito interessantes. ![Gráfico mostrando a frequência da Síndrome do Impostor em pessoas da área](/assets/img/sindrome-do-impostor/impostor-graph.png) Praticamente 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. É 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. ## E por que nós programadores nos sentimos assim? Bom, isso vária muito de pessoa para pessoa, mas existem algumas coisas comuns em nossa área: - Nossa "competição" não é só em nossa cidade, é com qualquer um que tenha computador e uma boa conexão a internet - 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 - Tudo se atualiza tão rápido que nunca conseguimos nos sentir 100% aptos aquilo que fazemos - Usuários podem ser muito burros, mas a culpa sempre será do programador - Mesmo depois de trabalhar, costumamos continuar usando computador, o que dá a sensação de estarmos trabalhando demais - Boa parte de nós somos introvertidos, então buscar por ajuda pode ser algo bem difícil E por aí vai, existem N razões que provocam essas sensações... ## E como lidar com isso? ### Veja a realidade como ela realmente é! ![Imagem que mostra que na realidade todos são muito parecidos](/assets/img/sindrome-do-impostor/reality.jpg) É 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. ### Diminua seu medo de errar Já 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. Eu 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. Isso 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. ### Diminua sua ansiedade A 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ão tenha medo de perguntar Muitas 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. O 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". ### Dê um desconto a você A á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? ### Procure por bons feedbacks A 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. ## Mais leitura Se você ficou curioso com o assunto e quer conhecer outros programadores que também relataram esse problema, seguem alguns links: - [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) - [I’m an Impostor by David Walsh](https://davidwalsh.name/impostor-syndrome) ## Conclusão Bom 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. Eu 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. Faç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. ================================================ FILE: posts/talk-uma-conversa-sobre-trabalho-remoto.md ================================================ --- layout: post date: 2020-04-20T15:34:33.000Z title: "Talk: Uma conversa sobre Trabalho Remoto" description: Será que remoto é para todo mundo? Quais os desafios? Quais os ganhos? Por onde começar? main-class: dev tags: - remoto - dicas categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Fala 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. Você pode acessar os [slides da palestra no seguinte link](https://docs.google.com/presentation/d/1Ra3g1zKOQ1_G_9lFLChjo3mm5d9TDAZpy6JCvLLaNcI/edit?usp=sharing) ## Vídeo Se 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. ## Perguntas e Respostas Como 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á: > 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? Pelo 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. Acho 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. Mas 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. > Boa noite, ainda não possuo inglês fluente, devo mesmo assim, deixar o perfil em inglês? Eu 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. Mas 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. > Quem é de outro ramo, dá para mudar? Sim, é 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. > O que é Síndrome do Impostor? Eu 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. 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". > As empresas aqui no Brasil pagam mais ou menos para o trabalho 100% remoto? Isso 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. ## Conclusão Espero 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. ================================================ FILE: posts/tecnicas-de-aprendizado.md ================================================ --- layout: post date: 2015-01-06T10:21:26.000Z title: Técnicas de aprendizado description: Se você tem costume de procrastinar, tem dificuldade de aprender algo rápido. Aprenda técnicas que te permitem aprender melhor e aumentar sua produtividade. main-class: misc tags: - estudo - produtividade --- ![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) Você 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. > **Procrastinação:** é o ato de adiar tarefas, realizando outras, menos importantes ou mais prazerosas, deixando as mais importantes para depois. Este 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!! ## Introdução No 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!** ### Técnica do Pomodoro A [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 =) #### Como funciona? 1. Escolha uma tarefa para ser completada 2. Inicie o Pomodoro (o tempo padrão é de 25 minutos) 3. Trabalhe somente nesta tarefa até que o tempo acabe 4. Descanse por um pequeno período de tempo (o tempo padrão é de 5 minutos) 5. Retorne ao Pomodoro 6. A cada 4 Pomodoros uma pausa maior deve ser feita (em geral são de 15-30 minutos) #### Links para começar * [Site oficial](http://pomodorotechnique.com/) - fala basicamente tudo sobre o método * [Tirinha genial explicando o método](http://mel-meow.com/uma-longa-noite-aprendendo/) - a tirinha que o Guilherme compartilhou * [Pomodoro One](https://itunes.apple.com/us/app/pomodoro-one/id907364780?mt=12) - Aplicativo para Mac com um timer * [Pomotodo](https://pomotodo.com/app/) - App online que mapeia os pomodoros e tarefas executadas (utilizo ele) * [Tomato Timer](http://tomato-timer.com/) - outro app online * [Tomighty](http://www.tomighty.org/) - App para Mac/Windows ### Getting Things Done (GTD) O 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. #### Como funciona? 1. `Etapa de Coleta`: use um caderno de anotações, um quadro de tarefas, qualquer coisa, simplesmente anote todas as tarefas que você precisa executar. 2. `Etapa de Processamento`: verifique as tarefas, veja quais são possíveis, quais não são e as elimine. 3. `Etapa de Organização`: organize as listas de tarefas e crie categorias para cada tipo de ação. 4. `Etapa de Reflexão`: Sempre revise constantemente as suas tarefas, limpe e atualize as listas, veja tarefas que para executar depois. 5. `Etapa de Execução`: simplesmente faça suas tarefas, utilize o sistema da melhor maneira possível. #### Links para começar * [Site oficial](http://gettingthingsdone.com/) - lá tem as etapas, links para livros e etc. * [Produzindo.net](http://www.produzindo.net/gtd-getting-things-done-parte-1-introducao/) - Um blog falando mais a fundo sobre o GTD ### Seinfeld Secret Method (Don't Break the Chain) Esse é 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". #### Como funciona? 1. Marque seus objetivos, não comece com mais que 3, você pode aumentar depois para 4, caso tenha certeza que irá conseguir. 2. Defina tarefas mínimas para cada objetivo, por exemplo, "correr 1km". 3. Defina suas regras e limites 4. Imprima um calendário e vá marcando o X a cada dia que fizer uma tarefa. #### Links para começar * [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 * [Writerstore.com](https://www.writersstore.com/dont-break-the-chain-jerry-seinfeld/) - um artigo falando um pouco mais do método * [jamesclear.com](https://jamesclear.com/stop-procrastinating-seinfeld-strategy) - mais um artigo falando sobre o método ### Seu próprio método As 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/). * [Write Code Every Day](http://ejohn.org/blog/write-code-every-day/) - John Resig diz como resolveu programar um pouco a cada dia. * [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 * [Jennifer Dewalt](http://blog.jenniferdewalt.com/) - essa programadora mostra a sua experiência de fazer 1 site por dia durante 180 dias! ### Conclusão Se 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!! ================================================ FILE: posts/theme-color-android-lollipop.md ================================================ --- layout: post date: 2015-02-10T23:08:04.000Z title: Theme Color Android Lollipop description: Como fazer a barra de notificações do android ficar com a cor do seu site. main-class: dev tags: - android - theme - tutorial categories: null --- Fala 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 =) Essa 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. Para quem não tem o Lollipop ainda e quiser saber como é mais ou menos, segue a imagem abaixo: ![Captura de tela de um celular android](/assets/img/theme-color/theme-color.jpg) Para fazer isso é bastante simples, basta adicionar uma meta tag no head do seu site. ```html ``` Bom é só isso, vamos tornar nossos sites cada vez mais com a nossa cara, pequenos detalhes fazem a diferença! ================================================ FILE: posts/trabalhando-com-a-tela-util-do-iphone.md ================================================ --- layout: post date: 2020-05-06T12:25:35.000Z title: Trabalhando com a tela útil do iPhone description: Como lidar com o notch no topo e a navegação sem botões na parte inferior do iPhone num Web App. main-class: dev tags: - iphone - webview --- ## Introdução Fala 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 Como 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. ## Atualização da barra do site Um 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. Aproveitei que estava com tempo livre e resolvi fazer. Se você nunca viu meu site no celular, segue abaixo um gif do antes/depois: ![Menubar antes/depois com mais e menos ícones e uma sidebar vindo da lateral](/assets/img/menubar-before-after.gif) ## Problema do iPhone X Antes 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: ![Tela do iphone X mostrando uma barrinha branca logo acima da barra dos ícones](/assets/img/iphone-barra-antes.jpeg) Antes 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! ## Resolvendo o problema da área útil Para 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`: ```html ``` Depois disso, nós precisamos respeitar as chamadas `safe areas` do iphone, abaixo segue uma imagem explicando: ![Imagem do iphone indicando as variáveis de safe-area-inset para cada extremidade](/assets/img/safe-areas.png) Cada 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`. Sabendo qual variável precisamos trabalhar, é só escrever o css da seguinte forma: ```css .menu-bar { padding-bottom: env(safe-area-inset-bottom); } ``` Logo após fazer isso, o meu site já estava corrigido! ![Tela do iphone agora mostrando que as barras não colidem mais entre si](/assets/img/iphone-barra-depois.jpeg) ## Conclusão Sei 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. ================================================ FILE: posts/trabalhando-com-git-hooks-de-forma-facil.md ================================================ --- layout: post date: 2016-07-10T15:37:37.000Z title: Trabalhando com Git Hooks de forma fácil description: Evite que código sujo ou não testado suba para o repositório remoto. main-class: dev tags: - git - tutorial categories: null --- ## Introdução Faaaala 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 Lá eu palestrei sobre dois assuntos bem legais e se você ainda não viu meus slides, seguem: - [CSS loves Math - Meetup CSS SP](https://willianjusten.com.br/meetup-css-sp) - [JS loves Music](https://willianjusten.com.br/frontinsampa-16) Enquanto 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 ## Git Hooks Git 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. Casos 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. Essas triggers podem ser ativadas através de commits, push para o repositório remoto, rebase, merges e etc. ## Como funciona Todo 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: ```bash $ tree -d -L 1 . ├── branches ├── hooks ├── info ├── logs ├── objects └── refs 6 directories ``` Como vamos trabalhar com Hooks, já é de se imaginar que devemos nos preocupar com a pasta `hooks`. Se listarmos os arquivos, teremos: ```bash $ ls applypatch-msg.sample pre-applypatch.sample pre-rebase.sample commit-msg.sample pre-commit.sample prepare-commit-msg.sample post-update.sample pre-push.sample update.sample ``` Se 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`. ```bash #!/bin/sh # # An example hook script to check the commit log message. # Called by "git commit" with one argument, the name of the file # that has the commit message. The hook should exit with non-zero # status after issuing an appropriate message if it wants to stop the # commit. The hook is allowed to edit the commit message file. # # To enable this hook, rename this file to "commit-msg". # Uncomment the below to add a Signed-off-by line to the message. # Doing this in a hook is a bad idea in general, but the prepare-commit-msg # hook is more suited to it. # # SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p') # grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1" # This example catches duplicate Signed-off-by lines. test "" = "$(grep '^Signed-off-by: ' "$1" | sort | uniq -c | sed -e '/^[ ]*1[ ]/d')" || { echo >&2 Duplicate Signed-off-by lines. exit 1 } ``` Poderíamos editar esse mesmo arquivo e colocar algo como: ```bash #!/bin/sh echo 'Boa! Continue trabalhando campeão!' ``` No momento de commitar algo, ele irá mostrar da seguinte forma: ![Mensagem de Boa! Continue trabalhando campeão logo após ter realizado um commit](/assets/img/git-hooks/commit-message.png) Demais 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 Ahhh, mas eu também não sei Python... Sem problemas, para isso temos algumas outras ferramentas para nos ajudar! ## Utilizando o Husky O [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 Primeiro você precisa instalar, o que é um simples: ```bash $ npm install husky --save-dev ``` Depois 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: ```json { "scripts": { "precommit": "npm run lint && npm test", "prepush": "npm run lint && npm test", "lint": "eslint ./src", "test": "..." } } ``` Ali 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. ![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) Se 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. ## Conclusão Bom 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 ================================================ FILE: posts/um-novo-projeto-um-novo-desafio.md ================================================ --- layout: post date: 2016-03-19T05:57:56.000Z title: Um novo projeto, um novo desafio description: Já que eu escrevo, por que não fazer vídeos também? Hoje começa mais um desafio pessoal meu, criar cursos sobre desenvolvimento web em geral. main-class: misc tags: - frontend - dev - cursos - jekyll categories: null --- ## Introdução Fala 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. Como 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. Mas 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. ## Feedbacks Assim 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. Pensando 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. ## Sobre o que falar e para quem? Bom, 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? Vejo 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. Sendo assim, o primeiro assunto já estava decidido! Vamos criar um site usando Jekyll do zero e colocar no ar usando o Github Pages! ## Cobrar ou não cobrar? Bom, 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ê... Diante 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í. Mas 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. ## Funcionamento **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/). Como 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 ## Como ajudar? Existem várias formas que você pode me ajudar. [Momento de Will mendigando] ### Compartilhe! Se 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**! ### Faça os cursos e comente Nã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. ### Dê sugestões Fale 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 ## Um abraço e que comecem os estudos!! Vamos lá galera, todo mundo acessando, compartilhando, curtindo, comentando e sendo feliz!!! [Link maravilhoso para os cursos!](https://willianjusten.com.br/cursos/) ================================================ FILE: posts/um-post-por-dia.md ================================================ --- layout: post date: 2015-01-05T13:21:09.000Z title: "#1postperday!" description: A ideia é postar pelo menos uma vez por dia, quanto mais conteúdo de web em PT-BR melhor! main-class: misc tags: - "#1postperday" - rss --- Olá 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! A 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/ Assim como o Fernando falou, a ideia é gerar e compartilhar conteúdo em pt-BR, que sabemos que ainda há bem pouco. Todos os posts serão compartilhados com a hashtag **#1postperday**, então se você quiser seguir, basta procurar por essa tag. Se você é desenvolvedor e se interessou pela ideia, não espera não, vai lá postar começar a postar!! ### Observação Recebi ótimos feedbacks de amigos e pessoas desconhecidas, agradeço bastante a todo mundo =) Mas 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. Eu 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 =) ![Imagem mostrando uma tela com xml para rss](/assets/img/one-post-per-day/feedly.png) Se 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. E 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): #### Gringos * [Echo JS](http://www.echojs.com/rss) - posts sobre JS o dia inteiro * [A List Apart](https://alistapart.com/main/feed/) - blog sobre desenvolvimento web * [Codrops](http://feeds2.feedburner.com/tympanus) - blog mais lindo sobre desenvolvimento web e design * [Creative JS](http://creativejs.com/feed/) - Blog sobre JS e um pouco de curiosidades * [CSS-Tricks](http://feeds.feedburner.com/CssTricks) - Blog sobre desenvolvimento frontend * [Smashing Magazine](http://rss1.smashingmagazine.com/feed/) - Blog sobre desenvolvimento web ================================================ FILE: posts/um-tema-para-todos-os-lugares-dracula-pro.md ================================================ --- layout: post date: 2020-05-08T10:17:19.000Z title: "Um tema para todos os lugares: Dracula PRO" description: Deixe seu editor, terminal e muito mais com seu tema favorito. main-class: dev tags: - vscode - dicas --- ## Introdução _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._ Já 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/). E 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. Sem mais delongas, vamos lá, enquanto escrevo esse post vou ouvindo uma [cantora australiana incrível](https://open.spotify.com/artist/355SqtHY4qKt2wIXrWku0c?si=6im3rYbcS7GJR0EfavE9ZA). ## Conhecendo o Dracula O [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. Desde 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! ## Dracula PRO Mesmo 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/). Para 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. Alé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 é: Além disso, ainda o pacote vem com um ebook sobre produtividade, um screencast sobre produtividade usando o Alfred, wallpapers e outras coisinhas mais. E 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. ## Conclusão Se 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. ================================================ FILE: posts/usando-netlify-cms-com-nextjs-vercel-e-github.md ================================================ --- layout: post date: 2021-10-06T15:52:58.000Z title: Usando Netlify CMS com NextJS, Vercel e GitHub description: Como utilizar um CMS super simples como criar Pull Requests no GitHub main-class: js tags: - cms - netlify - vercel - nextjs categories: - NextJS --- ## Introdução Fala 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! Enquanto 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. ## Netlify CMS Mas 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). E 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! =) O legal é que ele é simples de configurar e já te dá interfaces bem simples para poder utilizar. Seguem abaixo alguns screenshots da interface: * Interface mostrando a lista de posts ![Interface mostrando a lista de posts](/assets/img/netlify-cms-interface.png) * Interface do workflow com rascunhos, em review, ready ![Interface do workflow com rascunhos, em review](/assets/img/netlify-workflow.png) * Interface da criação de post com campos customizados ![Interface da criação de post com campos customizados](/assets/img/netlify-post.png) ## Curti esse bagulho, como faço? Entã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? ### Configurando os arquivos Para 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`. Lá 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/). ```html Content Manager ``` Depois 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: ```yaml backend: name: github repo: willianjusten/willianjusten.com.br base_url: https://willianjusten.com.br/ auth_endpoint: api/auth/ # Essa rota vai ser muito importante mais para frente media_folder: public/assets/img public_folder: /assets/img publish_mode: editorial_workflow # Isso permite ter aquele workflow com drafts e tudo slug: encoding: 'ascii' clean_accents: true collections: - name: posts label: posts folder: posts # A pasta onde ficarão os posts create: true # Permite criar um post novo slug: '{{slug}}' # Estrutura do nome arquivo, exemplo: title.md fields: # Os campos do seu frontmatter - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' } - { label: 'Date', name: 'date', widget: 'datetime', format: 'YYYY-MM-DD hh:mm:ss' } - { label: 'Post Image', name: 'image', widget: 'image', required: false } - { label: 'Title', name: 'title', widget: 'string' } - { label: 'Description', name: 'description', widget: 'string' } - { label: 'Body', name: 'body', widget: 'markdown' } ``` Lembrando 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. ### Configurando os arquivos da Autenticação Essa 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! A 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. Depois de instalado, você vai precisar criar uma pasta `api` dentro de `src/pages`. E nessa pasta, também iremos criar dois arquivos. Primeiro crie um arquivo `auth.js` com o seguinte conteúdo: ```js export { auth as default } from '@openlab/vercel-netlify-cms-github' ``` E o outro arquivo será o `callback.js` com o conteúdo: ```js export { callback as default } from '@openlab/vercel-netlify-cms-github' ``` E 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. ### Gerando as chaves no GitHub Com 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: - Em `Homapage URL` coloque a do seu site - Em `Authorization callback URL` coloque exatamente a rota que criamos `https://seusite/api/callback` - Após isso você receber 2 chaves que são `client_id` e `client_secret` Agora 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: - `OAUTH_CLIENT_ID` que é o `client_id` da sua aplicação do GitHub - `OAUTH_CLIENT_SECRET` que é o `client_secret` da sua aplicação do GitHub Feito 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! ## Conclusão Espero 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). ================================================ FILE: posts/usando-o-preact-no-nextjs-para-mais-performance.md ================================================ --- layout: post date: 2021-09-17T04:40:37.000Z title: Usando o Preact no NextJS para mais performance description: Diminua ainda mais o bundle do seu projeto NextJS usando o Preact main-class: js tags: - nextjs - performance categories: - NextJS --- ## Introdução Fala pessoal, continuando com os [posts sobre NextJS](https://willianjusten.com.br/series#nextjs), o de hoje será outro bem rápido, mas muito eficaz. Enquanto 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). ## Vidrado em performance Eu 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? Bastou 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` ```js module.exports = { webpack: (config, { dev, isServer }) => { // Replace React with Preact only in client production build if (!dev && !isServer) { Object.assign(config.resolve.alias, { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat' }) } return config } } ``` Depois de adicionar isso, também precisamos lembrar de instalar as dependências necessárias: ```bash yarn add preact preact-render-to-string ``` E aí é só rodar o `yarn build && yarn start` e você verá tudo funcionando! Vale 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. ## Mas e muda muito? Como 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. ### Utilizando React padrão ![Resultado do build com React, durando 24s e a app com 112Kb](/assets/img/blog-react.png) ### Utilizando Preact ![Resultado do build com React, durando 9s e a app com 73Kb](/assets/img/blog-preact.png) Como 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! ## Conclusão Como 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. ================================================ FILE: posts/usando-svg-sprites.md ================================================ --- layout: post date: 2015-05-24T18:25:53.000Z title: "#11 - Usando SVG Sprites" description: Já foi provado que o SVG substitui icon fonts, mas e Sprites? Aprenda a utilizar essa técnica com SVG de várias formas. main-class: svg tags: - svg - css - tutorial categories: - O mundo mágico do SVG --- ## Índice da série 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. ## Introdução Vou 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ã. Bom, 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. ## O que são Sprites? Antes 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). > 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 Além desses benefícios, acho muito mais fácil de organizar os ícones, afinal já sei onde todos eles estão, num mesmo arquivo. ## Escolhendo os ícones O 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/). Para o post eu utilizei o seguinte [conjunto de ícones](http://br.freepik.com/vetores-gratis/animais-vector-set-plana_715458.htm). ![Conjunto de animais](/assets/img/svg-sprites/sprites.png) ## Definindo posições Assim 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. ![Medidas dos ícones](/assets/img/svg-sprites/sprites-medidas.png) Tendo em vista que as propriedades da `viewBox` são "posicao x, posicao y, largura, altura". Nosso svg ficará assim: ```html ... ``` ### 1 - Técnica com views no SVG Para cada ícone precisaremos criar uma `view` bem simples, colocando cada ícone em sua posição. ```html ``` Se 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. Com 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). Tendo a imagem pronta, fica simples de usar, segue um exemplo: Imagem de um porquinho Imagem de uma vaca Imagem de uma raposa ```html Porquinho Vaquinha Raposinha ``` ### 2 - Técnica com a view definida na chamada da imagem Se você não quiser criar uma `view` dentro do arquivo SVG, pode definir diretamente na chamada, ficando da seguinte forma: Galinha ```html Galinha ``` ### 3 - Técnica utilizando :target Uma 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. ![Stack Sprites SVG](https://css-tricks.com/wp-content/uploads/2014/11/layers.gif) A técnica é bem simples, basta ocultar todos os elementos do SVG e só mostrar o que estiver com `:target` marcado. ```css g { display: none; } g:target { display: inline; } ``` Dessa forma não há necessidade de se criar views, bastando somente colocar `ids` em cada ícone. ```html ... ... ... ... ... ``` E para usar cada ícone, basta chamar a imagem seguida da `id`. Coelhinho ```html Coelhinho ``` ## Conclusão Bom, é 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 =) ================================================ FILE: posts/usando-um-agregador-de-conteudo.md ================================================ --- layout: post date: 2019-07-18T13:15:00.000Z title: Usando um agregador de conteúdo description: Como não perder nenhum post dos seus blogs favoritos. main-class: misc tags: - blogs - rss --- ## Introdução Esse é 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? A maioria vai dizer que abre o blog sempre, para num perder os posts novos. Mas convenhamos, é meio complicado ficar lembrando de abrir sempre né? E 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? ## Agregadores de conteúdo Esses 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! Um 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: ![Um screenshot de um input com "Willian Justen" digitado e então abaixo uma sugestão do blog.](/assets/img/feedly-add.png) Depois 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: ![Lista com vários blogs e vários posts](/assets/img/feedly-lista.png) ## Conclusão Como 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 Se você já usa um agregador, mas não é o feedly, coloca aí nos comentários qual é e sua experiência com ele. ================================================ FILE: posts/utilizando-css-counters.md ================================================ --- layout: post date: 2020-04-13T07:28:10.000Z title: Utilizando CSS Counters description: Vamos aprender a fazer o CSS contar! main-class: css tags: - css - dev categories: - Dicas de CSS --- ## Introdução Fala 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. Enquanto 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. Chega de papo furado e vamos direto ao assunto. ## O que são CSS Counters? São propriedades do CSS que permitem gerar um conteúdo numérico para elementos, baseados na localização deles no html. ### Como assim? Basicamente as propriedades são: - `counter-reset`: é usada para definir ou inicializar um ou mais contadores. - `counter-increment`: usada para especificar o valor de incremento para os contadores. - `counter()`: é uma função usada junto com o `content` para mostrar o valor do contador. ### Tá, mas como funciona na prática? São três passos bem simples. Vamos lá. Digamos que tenhamos o seguinte html: ```html

    Escolha um nome para o counter

    Incremente o counter

    Assinale o counter no seu elemento

    ``` Digamos 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: ```css .content { counter-reset: section; // pode ser qualquer nome desejado } ``` Depois eu preciso adicionar o incremento: ```css h2:before { counter-increment: section; } ``` O 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. E por último, basta eu inicializar a função do contador: ```css h2:before { counter-increment: section; content: counter(section); } ``` Aí adicionando um pouquinho de estilo, já podemos ter a nossa numeração dinâmica com CSS:

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

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

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

    ### Bem legal isso daí, mas e a compatibilidade? Pode ficar despreocupado! Isso funciona até no IE8, como você pode ver no [Can I use](https://caniuse.com/#feat=css-counters). ## Conclusão Como disse, era um post mega simples, mas que se você não conhecia, agora já conhece! E se você já conhecia, passe adiante! ================================================ FILE: posts/utilizando-svg-sprites-com-react.md ================================================ --- layout: post date: 2016-06-03T23:30:39.000Z title: Utilizando SVG Sprites com React description: Aprenda a utilizar os famosos ícones SVG dentro do React de forma bem fácil com Stateless Functions. main-class: js tags: - react - js - tutorial categories: - Aprendendo ReactJS --- ## Introdução Fala 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? Se 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á. Vou falando e ouvindo [um álbum de remixes do Ludovico Einaudi](https://open.spotify.com/album/5vvLGd70sOZSZddNnIejFv), bom demais esse som =D ## Sprites em SVG Já 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. A 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. Um exemplo de sprite svg seria: ```html ... ... ... ``` Se você quiser ver o código extendido, só clicar [neste link](https://willianjusten.com.br/assets/img/react-svg/sprite.svg). Se 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: ```html ``` No 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: ```html ``` Bom, agora que demos uma revisada em como se utilizar ícones SVG, vamos para a parte do React. ## Componentes Reutilizáveis Nã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). ## O que são Stateless Functions? As `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/). ![Gato com dúvida](https://warosu.org/data/fa/img/0063/58/1371640339134.png) No 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: ```jsx function HelloMessage(props) { return
    Hello {props.name}
    } ReactDOM.render(, document.getElementById('app')) ``` Reparem, 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`. Reescrevendo o código acima em ES6, ficaria assim: ```jsx const HelloMessage = props =>
    Hello {props.name}
    ReactDOM.render(, document.getElementById('app')) ``` Ali utilizo `const` e a `fat arrow` do ES6 para diminuir minha escrita e ficar ainda mais bonito meu JS. Essa 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. ## Legal, mas e como uso com SVG? É muito simples meu caro, se já sabemos como chamar nossos sprites, basta passar essa forma para dentro do React. Escrevendo em ES6 ficaria: ```jsx // Definimos a url onde se encontra o sprite const url = 'https://willianjusten.com.br/assets/img/react-svg/sprite.svg' // Aqui criamos um componente // que irá gerar nosso ícone SVG const Icon = props => ( ) // Aqui chamamos nossos ícones // passando a propriedade "icon" ReactDOM.render(
    , document.getElementById('app') ) ``` Definimos 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. - 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. - Depois disso, basta criar um componente e passar a propriedade `icon` com a id que eu desejo. Segue o exemplo funcional:

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

    Se 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. ## Conclusão Bom 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. Se 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/). ================================================ FILE: posts/valorize-suas-conquistas.md ================================================ --- layout: post date: 2023-01-18T08:00:40.000Z title: Valorize suas conquistas description: O poder que valorizar nossas conquistas tem sobre nós. main-class: misc tags: - vida - reflexão --- ## Introdução Nossa, 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. Já 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. Mas 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. ## Por que escrever sobre isso? A 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. ## Minha trajetória (pode pular se quiser) Nã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á). Fiz 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. Na é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. Depois 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. Eu 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! Depois 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/). Enfim, 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. ## Enxergue com melhores olhos A 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)**. Ao 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. > 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? Sei 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. ## Tenha suas metas, mas valorize a jornada Eu 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. Por 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. ## Amplie sua visão Ali 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. E 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. ## Conclusão Eu 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. Eu 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. ================================================ FILE: posts/varrendo-seu-site-atras-de-links-quebrados.md ================================================ --- layout: post date: 2018-03-21T10:52:41.000Z title: Varrendo seu site atrás de links quebrados description: Não perca a credibilidade do seu site com imagens ou links quebrados. main-class: dev tags: - performance - tools categories: - Performance Web --- ## Introdução Mais 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! Enquanto 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). ## Morte aos links mortos! Ops, pera... Todos 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! No 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... Foi 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. ## Htmlproofer O [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. Aqui abaixo fica o script simples que eu fiz com ele: ```bash #!/usr/bin/env bash set -e # halt script on error echo 'Testing links...' bundle exec jekyll build bundle exec htmlproofer ./_site --http-status-ignore "0,999" ``` Eu 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. ## Travis CI O 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. Eu criei um arquivo `.travis.yml` no meu repositório com o seguinte: ```yml language: ruby rvm: - 2.3.1 before_script: - chmod +x testlinks.sh script: ./testlinks.sh branches: - master - drafts env: global: - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer ``` O `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. Depois 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. ## Nightli.es Por ú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! ## Outras ferramentas Vocês podem falar: > Ahhh, mas eu num uso Ruby. Ruby é lento, Ruby é aquilo, Ruby num sei o que... Então tudo bem, existem várias ferramentas do gênero em várias linguagens e até mesmo para quem não sabe programar: - [Broken-link-checker em JS](https://github.com/stevenvachon/broken-link-checker) - [Um site para verificar os links para você](https://www.deadlinkchecker.com/) ## Conclusão É 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é? E ah, se você tem alguma dúvida ou sugestão de post, faça nos comentários daqui do blog, estou sempre atento! ================================================ FILE: posts/video-em-background-com-object-fit.md ================================================ --- layout: post date: 2016-06-13T16:01:32.000Z title: Video em Background com Object-fit description: Como criar os famosos heros com vídeos full em background usando o object-fit. main-class: css tags: - css - frontend categories: null --- ## Introdução Você 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í. Enquanto 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ê! ## Demo Se você quer pular tudo e só quer ver como a Demo ficou, só abrir [esse link aqui](https://labs.willianjusten.com.br/video-background/). ## Técnica com Object-fit Uma 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`! Com 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? Primeiro 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. ```html
    ``` As 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. Depois 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. ```css .wrapper { width: 100%; height: 100vh; overflow: hidden; } ``` E aí para o vídeo, para que ele ocupe toda a tela, vamos colocar: ```css .wrapper video { object-fit: cover; width: 100%; height: 100%; } ``` O `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. Feito 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 =) Se ainda não viu a [demo](https://labs.willianjusten.com.br/video-background/) ## Conclusão Post 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 ================================================ FILE: posts/video-iniciando-um-app-react-em-3-minutos.md ================================================ --- layout: post date: 2016-08-14T22:29:39.000Z title: "Vídeo: Iniciando um app React em 3 minutos" description: Iniciar um projeto React não precisa e nem deve ser muito trabalhoso. main-class: js tags: - react - js - video - tutorial categories: - Aprendendo ReactJS --- ## Introdução Olá pessoal, esse vai ser meu primeiro post com vídeo, olha que legal <3 A 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. Como 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/). ## Video
    ## Detalhes É importantante que você tenha o **Node >= 4** para que possa funcionar. Aconselho o Node >=6 para uma melhor performance. Quem 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: ```bash # instalar globalmente o gerador npm install -g create-react-app # criar nossa aplicação create-react-app nome-da-aplicacao # para rodar npm start ``` ## Info Se 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 =) ================================================ FILE: posts/vindo-morar-e-estudar-na-irlanda.md ================================================ --- layout: post date: 2017-01-08T21:51:20.000Z title: Vindo morar e estudar na Irlanda description: Algumas coisas que eu passei e você precisa saber se deseja vir morar e/ou estudar aqui também. main-class: misc tags: - trip - ireland - exchange categories: - Trabalhar no exterior, remoto, viagens, etc --- ## Introdução Faaaala 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. Eu 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 =) A 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. Vou separar esse post em algumas partes, pois acho que ficará mais simples de se localizar também. ## Índice - [Estudar Inglês](#estudar-ingles) - [Onde?](#onde) - [Cursos na Irlanda](#cursos-irlanda) - [Clima](#clima-irlanda) - [Cultura](#cultura-irlanda) - [Processo](#processo-na-irlanda) - [Quais tipos de visto existem?](#tipos-visto) - [Como tirar o visto de estudante?](#tirar-visto-estudante) - [Escolas](#escolas-irlanda) - [Moradia](#moradia-irlanda) - [Custo de Vida](#custos-irlanda) - [Gasto inicial para vir](#gasto-inicial-irlanda) - [Beleza da Ilha Esmeralda](#beleza-irlanda) - [Viajar da Irlanda](#viajar-da-irlanda) - [Curiosidades da Irlanda](#curiosidades-irlanda) - [Conclusão](#conclusao)

    Estudar Inglês

    Como 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. Atravé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. Sabendo 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. Tendo esse desejo de estudar em mente e condições de tentar morar fora um tempo, vem outra pergunta, onde?

    Onde?

    Existem 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: ### Reino Unido Bom, talvez um dos primeiros lugares quando se vem em mente é o lugar onde a língua nasceu certo? **Vantagens** O 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á. **Desvantagens** É 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á. ### Estados Unidos Talvez 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. **Vantagens** Devido 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. **Desvantagens** Lá é 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. ### Canadá Ah 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. **Vantagens** O 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. **Desvantagens** Dependendo de qual cidade fique, a distância entre outras cidades pode ser bastante longa e o inverno pode ser bem rigoroso. ### Malta Malta 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. **Vantagens** O 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. **Desvantagens** O 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. ### Australia / Nova Zelândia Países maravilhosos e com clima excelente, bem próximos do Brasil. Com pessoas muito amigáveis e um estilo de vida bastante aventureiro. **Vantagens** O 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á. **Desvantagens** Sã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. ### Irlanda A 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). **Vantagens** Os 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/ **Desvantagens** O 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...

    Cursos na Irlanda

    Mesmo dentro do curso de inglês, existem alguns tipos de cursos, eles são: ### General English (Inglês Geral) O 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. O 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. A duração mínima é 2 semanas e as aulas começam sempre às segundas-feiras. ### Business English Voltado 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. Como 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, O curso de Business English tem duração a partir de 4 semanas, e, em média, dura de 8 a 12 semanas. ### Preparação para Exames de proficiência #### Preparação para IELTS e TOEFL Para 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. Para 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. Em geral, o preparatório para o IELTS dura 10 semanas e começa em alguns dias específicos, dependendo sempre das regras das escolas. #### Preparação para exames Cambridge Curso 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. Este curso é oferecido nos seguintes níveis: - **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. - **CAE (Cambridge English: Advanced)** é uma prova de nível avançado para pessoas que usam o inglês para fins profissionais ou acadêmicos. - **CPE (Cambridge English: Proficiency)**, é a maior certificação de proficiência emitida pela Cambridge. Ele prova que o candidato é proficiente na língua inglesa

    Clima

    Bom, 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. O 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. Nos 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. Minha 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.

    Cultura

    O 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. ### Bandeira A 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.

    21st day! Irish Flags everywhere! #ireland🍀

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

    A 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. ### Geografia A 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. ![Mapa da Irlanda](/assets/img/morar-irlanda/ireland-map.gif) ### Cumprimentar pessoas Os 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. ### Cumprimento de horário À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. ### Boas maneiras As 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.

    Processo na Irlanda

    Bom, 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.

    Quais tipos de visto existem?

    **Stamp 0 – Estada temporária ou Permissão limitada (90 dias)** Esse é 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. **Stamp 1 – Visto de trabalho** O 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. **Stamp 1A – Visto de estágio** Visto 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. **Stamp 2 – Visto de estudante com permissão de trabalho** É 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. **Stamp 3 – Permanência sem permissão de trabalho** O 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. **Stamp 4 – Permanência** Esse visto garante a permanência em solo irlandês até uma data especificada, que pode ser sempre aumentada caso desejado.

    Como tirar o visto de estudante?

    Você 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: - Matrícula em uma escola - Seguro governamental obrigatório - Comprovante de acomodação (pode ser temporária) - Comprovante de 3000 euros - Comprovante de passagem de volta - Passaporte com validade de no mínimo 6 meses Em 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!). Você 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.

    Escolas

    É 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. Outro 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. Então não vai dar mole hein, pegue uma boa escola, por mais que tenha preços "tentadores" de outras escolas "mais simples". Aqui 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): - [Atlas Language School](http://atlaslanguageschool.com/) - [DCU](https://www.dcu.ie/) - [Delfin](https://www.delfinschool.com/en/dublin/) - [Emerald](https://www.eci.ie/default.aspx) - [IBAT](https://www.ibat.ie/) - [ISI](http://www.studyinireland.ie/) Lembrando 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.

    Moradia

    Se 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... Dublin é 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... Aqui 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. Portanto, 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-: - Dividir um apê bem localizado com outras 2/4 pessoas, dividindo quarto ~ **450 euros** - Dividir um apê bem localizado com outras 2/4 pessoas, quarto single ~ **650 euros** - Dividir uma casa mais distante com outras 2/4 pessoas, dividindo quarto ~ **350 euros** - Alugar um apê/flat sozinho ~ **800 euros** Ahhh 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 =) Existem 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. - [Daft.ie](http://www.daft.ie/) - [Rent.ie](http://www.rent.ie/) - [Classificados Dublin - Facebook](https://www.facebook.com/groups/ClassificadoDublin/) - [Classificados Dublin 2 - Facebook](https://www.facebook.com/groups/DublinClassificados/?ref=br_rs) - [The Ideal Flatmate - Facebook](https://www.facebook.com/groups/theidealflatmatedublin/) - [Dublin Rent a room/apartment - Facebook](https://www.facebook.com/groups/493501787468168/) - [Rent a Room in Dublin - Facebook](https://www.facebook.com/groups/1607597689487462/?ref=br_rs) Se 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.

    Custo de Vida

    Uma 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. É importante lembrar que o salário mínimo daqui é de € 9,15/h e com esse dinheiro, por exemplo você consegue comprar: - 2L de Leite : € 1,49 - 1 pacote de pão de forma: € 1,26 - 1 pacote de 15 slices de queijo: € 0.93 - 1 pacote de 30 slices de presunto: € 1,53 - 1 pacote de 1kg arroz: € 1,39 - 1 lata Dark Red Kidney Beans 400g: € 0,23 - 1kg carne moída: € 4,00 Ou 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. A Irlanda possui muitos mercados extremamente baratos, o que facilita demais a vida de quem não tem muito dinheiro. Alguns dos mercados são: - [Tesco](https://www.tesco.ie) - [Lidl](http://www.lidl.ie/en/index.htm) - [Aldi](https://www.aldi.com/) - [Polonez](http://www.polonez.ie/) E não é só comida que é barata aqui não, existem lojas que vendem roupas bem baratas, além de outros acessórios e bugigangas. - [Penneys](https://www.primark.com/en-ie/homepage) - conhecida como Primark em outros países, eles vendem roupas e outras coisas extremamente baratas. - [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. - [Dealz](https://www.dealz.ie/) - lojinha de 1,99 que tem tudo. - [EuroGiant](http://www.eurogeneral.ie/) - outra lojinha de 1,99 cheia de coisas.

    Gasto Inicial para vir

    Uma 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: - Escola (inclui 1 semana acomodação, seguro obrigatório): ~2400 euros - Passagem aérea ida/volta: ~800 euros - Dinheiro de comprovação: 3000 euros (mas o mínimo recomendado é 4000 euros) Esses 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: - GNIB: 300 euros - Depósito + Aluguel primeiro mês: ~700 euros (pode retirar do dinheiro de comprovação) - Roupa de cama / coisas da primeira casa: ~80 euros - Casaco/Segunda Pele/Cachecol/Bota: ~100 euros - Plano de Celular: 20 euros (operadora Three.ie) - Livro Escola: ~50 euros - Comida do primeiro mês: ~150 euros (comendo em casa e não esbanjando)

    Beleza da Ilha Esmeralda

    A 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!

    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

    Aqui 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. Alé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.

    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

    Se 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.

    Viajar da Irlanda

    E 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

    Curiosidades da Irlanda

    - **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. - **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. - **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. - 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. - Eles falam ‘sorry’ o tempo todo, mesmo quando o ‘sorry’ nao faz o menor sentido ou quando o errado é você. - Elas usam roupas muito curtas, muito mesmo. Piriguete brasileira é fichinha perto da irlandesa. Isso sem falar que elas são laranjas de tanta maquiagem... - 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. - 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.

    Conclusão

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

    {props.currentPage} de {props.numPages}

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

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