Showing preview only (1,778K chars total). Download the full file or copy to clipboard to get everything.
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 <willianjustenqui@gmail.com>",
"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
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- código para o desenho -->
</svg>
```
### 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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="PwmEag" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/PwmEag/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<rect x="50" y="30" width="300" height="200" fill="#0562dc"></rect>
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="YPVYOO" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/YPVYOO/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<circle cx="75" cy="75" r="50" fill="#0562dc" />
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="bNWaZN" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/bNWaZN/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<ellipse cx="100" cy="60" rx="100" ry="50" fill="#0562DC" />
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="pvPpmE" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/pvPpmE/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<line x1="20" y1="10" x2="180" y2="60" stroke="#0562DC" stroke-width="4"/>
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="NPjXZG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/NPjXZG/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#0562DC" stroke-width="4" />
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="bNWaXd" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/bNWaXd/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```xml
<svg>
<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#0562DC" stroke="#000" stroke-width="4"/>
</svg>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="dPWdbQ" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/dPWdbQ/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="qEmxNJ" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="http://codepen.io/willianjusten/pen/qEmxNJ/">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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:
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.
## Ansiedade mais de 8000 e mudança na estrutura
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:
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">A cor roxa simboliza os talentos que aparentam serem bons, mas nao possuem um github ativo e relevante.<br><br>Entendem a importancia? <a href="https://t.co/ZY2OTnZjWp">pic.twitter.com/ZY2OTnZjWp</a></p>— Bernard De Luna (@bernarddeluna) <a href="https://twitter.com/bernarddeluna/status/893178227002355713">August 3, 2017</a></blockquote>
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:
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.
## 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!
### 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/).
### 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.
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Indo dormir 3h da manhã, mas tendo a certeza que tenho amigos dispostos a me ajudar sempre, isso já valeu o evento para mim <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a></p>— Willian Justen (@Willian_justen) <a href="https://twitter.com/Willian_justen/status/769051603043282945">August 26, 2016</a></blockquote>
## 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.
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">final da palestra do <a href="https://twitter.com/Willian_justen">@Willian_justen</a> foi excelente 😁 <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a> <a href="https://t.co/aDLggwbhUd">pic.twitter.com/aDLggwbhUd</a></p>— yuri (@ybrntt) <a href="https://twitter.com/ybrntt/status/769259830305550340">August 26, 2016</a></blockquote>
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
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">música e JavaScript na <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a> com o <a href="https://twitter.com/Willian_justen">@Willian_justen</a>. tá lindo demais! <a href="https://t.co/NKakPXcdIm">pic.twitter.com/NKakPXcdIm</a></p>— diéssica (@diessicode) <a href="https://twitter.com/diessicode/status/769244358231126017">August 26, 2016</a></blockquote>
<blockquote class="twitter-tweet" data-lang="en"><p lang="es" dir="ltr">Entre lo que más me gustó hoy en <a href="https://twitter.com/hashtag/BrazilJS?src=hash">#BrazilJS</a> está la charla de música con JS de <a href="https://twitter.com/Willian_justen">@Willian_justen</a> , estuvo muy interesante!</p>— Werik (@erikfloresq) <a href="https://twitter.com/erikfloresq/status/769344861812195329">August 27, 2016</a></blockquote>
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Amei a palestra do <a href="https://twitter.com/Willian_justen">@Willian_justen</a>!!!<br>Vontade de largar tudo e começar a mexer com trem de audioviz NOW! *_*</p>— Camila Carrera (@cscarrera) <a href="https://twitter.com/cscarrera/status/769246121633976320">August 26, 2016</a></blockquote>
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
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
<iframe width="560" height="450" src="https://www.youtube.com/embed/cPocZosKxQg" frameborder="0" allowfullscreen></iframe>
================================================
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
<iframe width="560" height="315" src="https://www.youtube.com/embed/H5XBjyoU1E0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## 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
<input id="night-mode" class="lamp" type="checkbox" aria-label="night-mode" />
```
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="vOpvMR" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/vOpvMR">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="doJwEJ" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/doJwEJ">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="YXYdoa" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/YXYdoa">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="xGpMKr" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/xGpMKr">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="eNyxYz" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/eNyxYz">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
### A[href*='trecho']
Os links que possuírem pelo menos esse trecho serão estilizados.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="PqEVoX" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/PqEVoX">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
### A[href^='inicio']
Links iniciados com o trecho serão estilizados.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="WvdPNV" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/WvdPNV">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
### A[src$='final']
Só trechos com o final igual irão receber o estilo.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="qdpgEP" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/qdpgEP">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## A:not(B)
Quando você quer selecionar todos os elementos, exceto um elemento em particular.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="PqEVqV" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/PqEVqV">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="bdazdP" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/bdazdP">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="NqXoGQ" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/NqXoGQ">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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...).
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="BNJMjE" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/BNJMjE">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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 <s>falar besteiras</s> 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.
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. <br/>
> Essa variável tá escrita errada, faltou um 'a' ali. <br/>
> 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.
## 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.
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:
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:
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:
Com essa opção selecionada, cada vez que você salvar o código, irá ver uma lista da seguinte forma:
## 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!
## 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.
### 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%!!!
### Passo 4 - Dando nome aos bois
Já tendo o nosso código otimizado, podemos nomear os elementos dos quais queremos estilizar e animar.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="KpQdGo" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/KpQdGo">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p><blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Dear <a href="https://twitter.com/firefox">@firefox</a>, Please fix that 100-years-old SVG `transform-origin` bug <a href="https://t.co/IO9Qy0gipD">https://t.co/IO9Qy0gipD</a> Sincerely, Everyone animating SVG w/ CSS</p>— Sara Soueidan (@SaraSoueidan) <a href="https://twitter.com/SaraSoueidan/status/543789877767061504">December 13, 2014</a></blockquote></p>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
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
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 <s>sai daqui</s>, 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:
- `<animate>`: permite animar atributos e propriedades num determinado período de tempo.
- `<animateTransform>`: usado para animar a transformação dos atributos num período de tempo.
- `<animateMotion`: para mover um elemento ao longo de um path.
- `<set>`: 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
<animate
id="myAnim"
attributeName=" "
from=" "
to=" "
dur=" "
begin=" "
fill=" "
...
/>
```
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
<rect id="myRect" ... /> <animate xlink:href="#myRect" ... />
```
#### Aninhando dentro do elemento
```html
<rect id="myRect" ...>
<animate ... />
</rect>
```
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
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="BNOJjg" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/BNOJjg">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
```html
<svg width="500" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
begin="click"
fill="freeze"
/>
</svg>
```
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`:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="vOzpGV" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/vOzpGV">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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"
```
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="bdxaWN" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/bdxaWN">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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.
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="mJGpMg" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/mJGpMg">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="RPYxLd" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/RPYxLd">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="rVZppG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/rVZppG">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="BNOJON" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/BNOJON">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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
E os posts também ocupavam uma área relativamente grande, com a data num destaque muito grande.
### 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
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
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:
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
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
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:
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.
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.
## 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 <s>mas eu não volto não =p</s>
================================================
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 `<g>`
O `<g>` 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 `<g>` 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 `<g>` agrupa todos os seus descendentes em um só grupo, mesmo que exista outro elemento `<g>` interno a ele. É comum possuir uma `id` para dar nome a todo um grupo e qualquer estilo que for aplicado ao elemento `<g>` 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 `<paths>` e `<circle>`.
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.
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
<svg width="1144.12px" height="400px" viewBox="0 0 572.06 200">
<style>
svg{background-color:white;}
#wing{fill:#81CCAA;}
#body{fill:#B8E4C2;}
#pupil{fill:#1F2600;}
#beak{fill:#F69C0D;}
.eye-ball{fill:#F6FDC4;}
</style>
<g id="bird">
<g id="body">
<path d="M48.42,78.11c0-17.45,14.14-31.58,31.59-31.58s31.59,14.14,31.59,31.58c0,17.44-14.14,31.59-31.59,31.59
S48.42,95.56,48.42,78.11"/>
<path d="M109.19,69.88c0,0-8.5-27.33-42.51-18.53c-34.02,8.81-20.65,91.11,45.25,84.73
c40.39-3.65,48.59-24.6,48.59-24.6S124.68,106.02,109.19,69.88"/>
<path id="wing" d="M105.78,75.09c4.56,0,8.84,1.13,12.62,3.11c0,0,0.01-0.01,0.01-0.01l36.23,12.38c0,0-13.78,30.81-41.96,38.09
c-1.51,0.39-2.82,0.59-3.99,0.62c-0.96,0.1-1.92,0.16-2.9,0.16c-15.01,0-27.17-12.17-27.17-27.17
C78.61,87.26,90.78,75.09,105.78,75.09"/>
</g>
<g id="head">
<path id="beak" d="M50.43,68.52c0,0-8.81,2.58-10.93,4.86l9.12,9.87C48.61,83.24,48.76,74.28,50.43,68.52"/>
<path class="eye-ball" d="M60.53,71.68c0-6.33,5.13-11.46,11.46-11.46c6.33,0,11.46,5.13,11.46,11.46c0,6.33-5.13,11.46-11.46,11.46
C65.66,83.14,60.53,78.01,60.53,71.68"/>
<path id="pupil" d="M64.45,71.68c0-4.16,3.38-7.53,7.54-7.53c4.16,0,7.53,3.37,7.53,7.53c0,4.16-3.37,7.53-7.53,7.53
C67.82,79.22,64.45,75.84,64.45,71.68"/>
<path class="eye-ball" d="M72.39,74.39c0-2.73,2.22-4.95,4.95-4.95c2.73,0,4.95,2.21,4.95,4.95c0,2.74-2.22,4.95-4.95,4.95
C74.6,79.34,72.39,77.13,72.39,74.39"/>
</g>
</g>
</svg>
```
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 `<g>` tem mais uma importante característica: ele pode ser o seu próprio `<title>` 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</title>
<desc>A imagem de um pequeno e fofo pássaro verde com o bico laranja.</desc>
<!-- ... -->
</g>
```
## Reutilizando Elementos com o `<use>`
**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 `<use>` 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 `<g>`.
O elemento `<use>` 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
<use x="100" y="100" xlink:href="#bird" />
```
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
<use x="100" y="100" xlink:href="pasta-do-arquivo/animals.svg#bird" />
```
Porém, referenciar SVG externo no `<use>` não funciona no IE <s>grandes novidades, browser de bosta</s>. 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 `<use>` 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
<use xlink:href="#bird" transform="translate(100, 100)" />
```
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 `<use>` 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 `<use>` 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 `<use>`, o elemento `<defs>`.
## Reutilizando Elementos guardados com o `<defs>`
O elemento `<defs>` pode ser usado para guardar conteúdo que não será diretamente mostrado. Em outras palavras, o elemento `<defs>` é 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 `<defs>` 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 `<defs>`, 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
<svg>
<defs>
<linearGradient id="gradient">
<stop offset="0%" style="stop-color: deepPink"></stop>
<stop offset="100%" style="stop-color: #009966"></stop>
</linearGradient>
</defs>
<rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>
</svg>
```
Definindo o gradiente linear dentro do elemento `<defs>` 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 `<use>`:
* 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 `<defs>`. Não só o objeto original não está renderizado, como quando você quiser reutilizar um elemento dentro do `<defs>`, 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
<svg width="500.79px" height="200px" viewBox="0 0 500.79 200">
<style type="text/css">
#leaves{fill:#8CC63F;}
#bark{fill:#A27729;}
</style>
<g id="tree">
<path id="bark" d="M91.33,165.51c0,0,4.18-27.65,1.73-35.82l-18.55-25.03l3.01-2.74l17.45,19.87l1.91-37.6h4.44l1.83,24.53
l15.26-16.35l3.27,4.36l-16.07,19.34c0,0-2.72,0-1.09,19.34c1.63,19.34,3,29.7,3,29.7L91.33,165.51z"/>
<g id="leaves">
<path class="leaf" d="M96.97,79.07c0,0-14.92,4.34-23.52-14.05c0,0,19.4-7.98,24.37,11.9c0,0-9.68-3.57-13.07-6.73
C84.75,70.2,91.82,77.99,96.97,79.07z"/>
<path class="leaf" d="M74.07,100.91c0,0-15.94-1.51-17.2-22.39c0,0,21.62-0.27,18.83,20.66c0,0-7.92-7.1-9.97-11.41
C65.73,87.77,69.55,97.92,74.07,100.91z"/>
<!-- ... -->
</g>
</g>
</svg>
```
E teremos uma árvore igual a desenhada abaixo:
Se quisermos colocar esse grupo `#tree` em um elemento `<defs>`, a árvore não será mais renderizada.
```html
<svg width="500.79px" height="200px" viewBox="0 0 500.79 200">
<style type="text/css">
#leaves{fill:#8CC63F;}
#bark{fill:#A27729;}
</style>
<defs>
<g id="tree">
<!-- ... -->
</g>
</defs>
</svg>
```
Agora a árvore serve como template. Nós podemos usá-la utilizando o elemento `<use>`, 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
<use xlink:href="#tree" x="50" y="100" />
<use xlink:href="#tree" x="200" y="100" />
<use xlink:href="#tree" x="350" y="100" />
```
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 `<defs>` para reutilizar o elemento, você pode aplicar diferentes estilos e cores de preenchimento para cada árvore individualmente. Portanto, o `<defs>` é ó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 `<symbol>`
O elemento `<symbol>` é similar ao elemento `<g>`, já que possibilita uma maneira de agrupar elementos. Porém, ele difere do grupo em duas coisas:
* O elemento `<symbol>` não é renderizado. Ele é similar ao `<defs>` 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 `<symbol>` é mais indicado para definir elementos reutilizáveis. E também serve como template para ser instanciado pelo elemento `<use>`. 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 `<g>`, `<use>`, `<defs>` e `<symbol>`? 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!! =)
### 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 `<circle>`, `<path>`, `<rect>`.
#### 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 `<defs>` ou `<symbol>`,
#### Páginas
> São as instâncias dos templates, já possuindo sua aparência definida e informações reais. Seria o nosso `<use>` chamando um template do `<defs>` 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
---
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! <s>passei a acreditar que ele existe</s>. 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
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
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 <s>vai ter que me engolir</s>.
### 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 <s>apressadinho =p</s>, 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
<section class="vh100">
<h1>Great Music Quotes</h1>
</section>
<section class="vh100">
<blockquote cite="Friedrich Nietzsche">
<h3>"Without music, life would be a mistake."</h3>
<p>Friedrich Nietzsche</p>
</blockquote>
</section>
<section class="vh100">
<blockquote cite="John Green">
<h1>"Some people have lives; some people have music."</h1>
<p>John Green</p>
</blockquote>
</section>
<section class="vh100">
<blockquote cite="Victor Hugo">
<h4>
"Music expresses that which cannot be said and on which it is impossible
to be silent."
</h4>
<p>Victor Hugo</p>
</blockquote>
</section>
<section class="vh100">
<h1>Where words leave off, music begins.</h1>
</section>
```
## 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:
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:
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
<script type="text/javascript" src="js/vunit.js"></script>
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
<section class="vh100">
<blockquote cite="Friedrich Nietzsche">
<h3>"Without music, life would be a mistake."</h3>
<p>Friedrich Nietzsche</p>
</blockquote>
</section>
```
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:
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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/SycgKYTKS5Q" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
## 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:
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Que maravilhoso isso mano. Seria legal se você e outros devs brasileiros se sentisse a vontade pra fazer um também. Ia rolar mais identificação ainda.<br>Serio ajudou muito ja esse post</p>— Rafael Camillo (@camillodev) <a href="https://twitter.com/camillodev/status/1080279481028366337?ref_src=twsrc%5Etfw">January 2, 2019</a></blockquote>
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:
<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Como sempre digo, ir aprendendo conforme necessidade ou conforme surge interesse é muito melhor do que estudar milhares de coisas ao mesmo tempo.</p>— felipe.d.ts (@felipefialho_) <a href="https://twitter.com/felipefialho_/status/1080475270023393280?ref_src=twsrc%5Etfw">January 2, 2019</a></blockquote>
## 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.
### 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 =)
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="dPLByM" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/dPLByM">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
#### 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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="vEMwbG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/vEMwbG">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
### 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:
<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="JoVQWG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/willianjusten/pen/JoVQWG">
</a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## 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.
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.
### $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:
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:
### $(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()`.
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.
### $$(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 `<img>` na página atual e através de um loop mostrar o valor da `src` de cada elemento.
### $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 `<p>` de uma página:
E o seguinte código mostra todos os elementos `<p>` que possuem `<a>` internamente.
### 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:
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 esp
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
SYMBOL INDEX (29 symbols across 15 files)
FILE: next.config.js
method rewrites (line 14) | async rewrites() {
method redirects (line 29) | async redirects() {
FILE: src/components/Analytics/index.js
function Analytics (line 4) | function Analytics() {
FILE: src/components/Search/index.js
method stats (line 18) | stats(nbHits, timeSpentMS) {
FILE: src/lib/api.js
function getPostBySlug (line 10) | function getPostBySlug(slug) {
function getAllPosts (line 30) | function getAllPosts() {
FILE: src/lib/buildAlgoliaIndexes.js
function transformPostsToSearchObjects (line 4) | function transformPostsToSearchObjects(posts) {
function buildAlgoliaIndexes (line 23) | async function buildAlgoliaIndexes(posts) {
FILE: src/lib/constants.js
constant BLOG_TITLE (line 1) | const BLOG_TITLE = 'Willian Justen'
constant BLOG_SUBTITLE (line 3) | const BLOG_SUBTITLE =
constant BLOG_DESCRIPTION (line 6) | const BLOG_DESCRIPTION = [BLOG_TITLE, BLOG_SUBTITLE].join(' | ')
constant BLOG_AUTHOR (line 8) | const BLOG_AUTHOR = 'Willian Justen'
constant BLOG_AUTHOR_LINK (line 10) | const BLOG_AUTHOR_LINK = 'https://twitter.com/Willian_Justen'
constant BLOG_URL (line 12) | const BLOG_URL = 'https://willianjusten.com.br'
constant BLOG_AUTHOR_POSITION (line 14) | const BLOG_AUTHOR_POSITION = 'Software Engineer'
constant BLOG_AUTHOR_DESCRIPTION (line 16) | const BLOG_AUTHOR_DESCRIPTION =
FILE: src/lib/generateRSS.js
function generateRssItem (line 4) | async function generateRssItem(post) {
function generateRss (line 19) | async function generateRss(posts) {
FILE: src/lib/generateSitemap.js
function generateSitemap (line 11) | async function generateSitemap(posts) {
FILE: src/lib/gtag.js
constant GA_TRACKING_ID (line 1) | const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING
FILE: src/lib/markdownToHtml.js
function markdownToHtml (line 7) | async function markdownToHtml(markdown) {
FILE: src/pages/[slug].js
function getStaticProps (line 11) | async function getStaticProps({ params }) {
function getStaticPaths (line 33) | async function getStaticPaths() {
FILE: src/pages/_app.js
function App (line 14) | function App({ Component, pageProps }) {
FILE: src/pages/_document.js
class MyDocument (line 4) | class MyDocument extends Document {
method getInitialProps (line 5) | static async getInitialProps(ctx) {
method render (line 30) | render() {
FILE: src/pages/index.js
function getStaticProps (line 13) | async function getStaticProps() {
FILE: src/pages/series.js
function getStaticProps (line 75) | async function getStaticProps() {
Condensed preview — 262 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,781K chars).
[
{
"path": ".babelrc",
"chars": 702,
"preview": "{\n \"presets\": [\"next/babel\"],\n \"plugins\": [\n [\n \"babel-plugin-styled-components\",\n {\n \"ssr\": true,"
},
{
"path": ".editorconfig",
"chars": 190,
"preview": "# Editorconfig: https://editorconfig.org/\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true"
},
{
"path": ".eslintrc",
"chars": 24,
"preview": "{\n \"extends\": \"next\"\n}\n"
},
{
"path": ".gitignore",
"chars": 406,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".nvmrc",
"chars": 6,
"preview": "lts/*\n"
},
{
"path": ".prettierrc",
"chars": 113,
"preview": "{\n \"trailingComma\": \"none\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n"
},
{
"path": "Readme.md",
"chars": 243,
"preview": "# Willian Justen - Blog\n\nPersonal website/blog.\n\nCurrently using:\n\n- [NextJS](https://nextjs.org/)\n- [Vercel](https://ww"
},
{
"path": "jsconfig.json",
"chars": 52,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \"src\"\n }\n}\n"
},
{
"path": "next-seo.config.js",
"chars": 288,
"preview": "const DefaultSEO = {\n openGraph: {\n type: 'website',\n locale: 'en_US',\n url: 'https://willianjusten.com.br',\n "
},
{
"path": "next.config.js",
"chars": 2068,
"preview": "module.exports = {\n webpack: (config, { dev, isServer }) => {\n // Replace React with Preact only in client productio"
},
{
"path": "package.json",
"chars": 1811,
"preview": "{\n \"name\": \"willianjusten-blog\",\n \"private\": true,\n \"description\": \"My personal blog on willianjusten.com.br\",\n \"ver"
},
{
"path": "posts/3-meses-de-globocom.md",
"chars": 12883,
"preview": "---\nlayout: post\ndate: 2015-06-28T20:36:52.000Z\ntitle: 3 meses de globo.com\ndescription: Um pouco do que passei desde o "
},
{
"path": "posts/65-dicas-para-ser-um-programador-melhor.md",
"chars": 11772,
"preview": "---\nlayout: post\ndate: 2017-06-27T16:14:42.000Z\ntitle: 65 dicas para ser um programador melhor\ndescription: Algumas dica"
},
{
"path": "posts/a-estrutura-do-svg.md",
"chars": 12079,
"preview": "---\nlayout: post\ndate: 2015-01-20T15:01:39.000Z\ntitle: \"#4 - A estrutura do SVG\"\ndescription: Saiba como o SVG funciona "
},
{
"path": "posts/a-historia-por-tras-do-meu-curso-de-react-avancado.md",
"chars": 10671,
"preview": "---\nlayout: post\ndate: 2020-06-30T08:36:52.000Z\ntitle: A história por trás do meu curso de React Avançado\ndescription: A"
},
{
"path": "posts/a-importancia-do-github-para-desenvolvedores.md",
"chars": 8510,
"preview": "---\nlayout: post\ndate: 2017-08-04T15:04:36.000Z\ntitle: A importância do Github para Desenvolvedores\ndescription: Alguns "
},
{
"path": "posts/achievement-concluido-braziljs.md",
"chars": 10321,
"preview": "---\nlayout: post\ndate: 2016-08-29T16:35:49.000Z\ntitle: Achievement concluído - BrazilJS\ndescription: Tudo que me acontec"
},
{
"path": "posts/adicionando-icone-de-github-nos-projetos-opensource.md",
"chars": 1490,
"preview": "---\nlayout: post\ndate: 2021-02-21T08:55:59.000Z\ntitle: Adicionando ícone de GitHub nos projetos opensource\ndescription: "
},
{
"path": "posts/adicionando-night-mode-no-seu-site.md",
"chars": 5984,
"preview": "---\nlayout: post\ndate: 2018-03-27T03:35:52.000Z\ntitle: Adicionando Night Mode no seu site\ndescription: Aprenda como cria"
},
{
"path": "posts/alguns-seletores-css-importantes-para-aprender.md",
"chars": 11387,
"preview": "---\nlayout: post\ndate: 2015-06-30T00:22:47.000Z\ntitle: Alguns seletores css importantes para aprender\ndescription: Porqu"
},
{
"path": "posts/analisando-seu-codigo-js-com-linter.md",
"chars": 6964,
"preview": "---\nlayout: post\ndate: 2015-12-05T00:43:23.000Z\ntitle: Analisando seu código JS com um linter\ndescription: Valide seu có"
},
{
"path": "posts/animacoes-em-svg-com-css.md",
"chars": 8279,
"preview": "---\nlayout: post\ndate: 2015-07-01T07:22:29.000Z\ntitle: \"#12 - Animações em SVG com CSS\"\ndescription: Aprenda como criar "
},
{
"path": "posts/animando-svg-com-smil.md",
"chars": 12838,
"preview": "---\nlayout: post\ndate: 2015-07-22T00:55:02.000Z\ntitle: \"#13 - Animando SVG com SMIL\"\ndescription: Aprenda a criar animaç"
},
{
"path": "posts/ano-novo-blog-novo.md",
"chars": 11897,
"preview": "---\nlayout: post\ndate: 2016-01-01T16:00:59.000Z\ntitle: Ano novo, blog novo\ndescription: Nada melhor que começar o ano co"
},
{
"path": "posts/atomic-design-no-svg.md",
"chars": 18120,
"preview": "---\nlayout: post\ndate: 2015-01-22T12:00:00.000Z\ntitle: \"#5 - Atomic Design no SVG - g, use, defs, symbol\"\ndescription: N"
},
{
"path": "posts/atualizacoes.md",
"chars": 2375,
"preview": "---\nlayout: post\ndate: 2015-01-11T20:34:00.000Z\ntitle: Atualizações\ndescription: O blog cresceu um pouquinho e algumas m"
},
{
"path": "posts/background-fixo-com-css.md",
"chars": 7014,
"preview": "---\nlayout: post\ndate: 2015-07-24T03:50:02.000Z\ntitle: Background fixo com CSS\ndescription: Como atrair usuários usando "
},
{
"path": "posts/build-incremental-gatsby-netlify.md",
"chars": 3731,
"preview": "---\nlayout: post\ndate: 2020-04-24T15:34:33.000Z\ntitle: Como habilitar builds incrementais do Gatsby no Netlify\ndescripti"
},
{
"path": "posts/burnout-e-o-tempo.md",
"chars": 9869,
"preview": "---\nlayout: post\ndate: 2023-09-08T08:00:40.000Z\ntitle: Burnout dura mais que você imagina!\ndescription: A gente pensa qu"
},
{
"path": "posts/chamada-curso-git-e-github-na-vida-real.md",
"chars": 4003,
"preview": "---\nlayout: post\ndate: 2018-01-03T20:22:28.000Z\ntitle: Chamada Curso Git e Github na Vida Real\ndescription: Vamos domina"
},
{
"path": "posts/coisas-que-eu-nao-sei-em-ti.md",
"chars": 7129,
"preview": "---\nlayout: post\ndate: 2019-01-02T06:02:08.000Z\ntitle: Coisas que eu não sei em TI\ndescription: Eu faço bastante coisa, "
},
{
"path": "posts/colorindo-em-svg.md",
"chars": 6486,
"preview": "---\nlayout: post\ndate: 2015-04-03T18:59:38.000Z\ntitle: \"#9 - Colorindo em SVG\"\ndescription: Vamos voltar a ser crianças "
},
{
"path": "posts/comandos-uteis-do-chrome-devtools.md",
"chars": 11095,
"preview": "---\nlayout: post\ndate: 2017-01-25T00:30:59.000Z\ntitle: Comandos úteis do Chrome DevTools\ndescription: Aumente sua produt"
},
{
"path": "posts/comecando-com-react.md",
"chars": 6084,
"preview": "---\nlayout: post\ndate: 2015-07-10T22:04:05.000Z\ntitle: \"#1 - Começando com ReactJS\"\ndescription: Tentando entender o que"
},
{
"path": "posts/como-colocar-seu-site-no-ar-de-graca.md",
"chars": 5479,
"preview": "---\nlayout: post\ndate: 2018-04-02T01:30:42.000Z\ntitle: Como colocar seu site no ar de graca\ndescription: Calma, não é cl"
},
{
"path": "posts/como-configurar-o-google-analytics-no-nextjs-em-2021.md",
"chars": 6374,
"preview": "---\nlayout: post\ndate: 2021-09-15T13:40:01.000Z\ntitle: Como configurar o Google Analytics no NextJS em 2021\ndescription:"
},
{
"path": "posts/como-configuro-meu-editor-e-desktop-para-gravar-codigo.md",
"chars": 2104,
"preview": "---\nlayout: post\ndate: 2021-03-06T14:30:49.000Z\ntitle: Como configuro meu editor e desktop para gravar código\ndescriptio"
},
{
"path": "posts/como-criar-e-publicar-um-pacote-de-extensoes-do-vscode.md",
"chars": 8286,
"preview": "---\nlayout: post\ndate: 2020-07-08T14:26:49.000Z\ntitle: Como criar e publicar um pacote de extensões do VSCode\ndescriptio"
},
{
"path": "posts/como-criar-footer-fixo.md",
"chars": 9419,
"preview": "---\nlayout: post\ndate: 2016-06-01T17:43:06.000Z\ntitle: Como criar footer fixo\ndescription: Aprenda a criar um footer fix"
},
{
"path": "posts/como-criar-secoes-fullscreen-com-css.md",
"chars": 5674,
"preview": "---\nlayout: post\ndate: 2015-07-19T16:44:01.000Z\ntitle: Como criar seções fullscreen com CSS\ndescription: Vários sites fa"
},
{
"path": "posts/como-criar-um-curso-online.md",
"chars": 16873,
"preview": "---\nlayout: post\ndate: 2018-10-29T05:55:18.000Z\ntitle: Como criar um Curso Online\ndescription: Algumas dicas de como div"
},
{
"path": "posts/como-criar-um-spinner-loader-com-css-puro-e-uma-div.md",
"chars": 2212,
"preview": "---\nlayout: post\ndate: 2018-06-04T13:00:00.000Z\ntitle: Como criar um loader com CSS puro e uma div\ndescription: Todos nó"
},
{
"path": "posts/como-deixar-a-imagem-da-webcam-redonda-no-obs.md",
"chars": 1767,
"preview": "---\nlayout: post\ndate: 2021-03-06T14:15:30.000Z\ntitle: Como deixar a imagem da webcam redonda no OBS\ndescription: Como u"
},
{
"path": "posts/como-fazer-seu-site-funcionar-offline-com-pwa.md",
"chars": 16829,
"preview": "---\nlayout: post\ndate: 2018-03-26T06:20:50.000Z\ntitle: Como fazer seu site funcionar offline com PWA\ndescription: O pass"
},
{
"path": "posts/como-melhorar-meu-seo.md",
"chars": 6114,
"preview": "---\nlayout: post\ndate: 2015-01-09T23:21:53.000Z\ntitle: Como melhorar meu SEO?\ndescription: Algumas dicas para fazer com "
},
{
"path": "posts/como-mostrar-trechos-de-codigo-num-blog-com-nextjs.md",
"chars": 2896,
"preview": "---\nlayout: post\ndate: 2021-09-16T14:16:42.000Z\ntitle: Como mostrar trechos de código num blog com NextJS\ndescription: A"
},
{
"path": "posts/como-se-manter-atualizado-no-frontend.md",
"chars": 17652,
"preview": "---\nlayout: post\ndate: 2016-09-03T18:06:13.000Z\ntitle: Como se manter atualizado no Frontend\ndescription: O mundo do Fro"
},
{
"path": "posts/como-se-tornar-um-desenvolvedor-front-end.md",
"chars": 21737,
"preview": "---\nlayout: post\ndate: 2015-02-24T18:46:24.000Z\ntitle: Como se tornar um desenvolvedor Front End\ndescription: Aprenda os"
},
{
"path": "posts/como-ter-um-blog-ajuda-a-conseguir-oportunidades.md",
"chars": 9981,
"preview": "---\nlayout: post\ndate: 2021-06-30T04:02:12.000Z\ntitle: Como ter um Blog ajuda a conseguir melhores oportunidades\ndescrip"
},
{
"path": "posts/como-um-patinho-me-ajudou-a-ser-um-programador-melhor.md",
"chars": 4486,
"preview": "---\nlayout: post\ndate: 2019-09-06T13:06:02.000Z\ntitle: Como um patinho me ajudou a ser um programador melhor\ndescription"
},
{
"path": "posts/como-usar-e-se-comportar-melhor-em-chats.md",
"chars": 3418,
"preview": "---\nlayout: post\ndate: 2021-04-13T13:50:09.000Z\ntitle: Como usar e se comportar melhor em chats\ndescription: 10 dicas pa"
},
{
"path": "posts/como-usar-o-google-analytics-events-tracker.md",
"chars": 9268,
"preview": "---\nlayout: post\ndate: 2019-07-23T09:50:10.000Z\ntitle: Como usar o Google Analytics Events Tracker?\ndescription: Qual a "
},
{
"path": "posts/como-usar-o-reactjs.md",
"chars": 11563,
"preview": "---\nlayout: post\ndate: 2015-07-14T15:16:16.000Z\ntitle: \"#2 - Como usar o ReactJS\"\ndescription: As diferentes formas de s"
},
{
"path": "posts/como-usar-svg.md",
"chars": 5858,
"preview": "---\nlayout: post\ndate: 2015-01-13T04:20:24.000Z\ntitle: \"#2 - Como usar SVG\"\ndescription: Aqui irei explicar as diferente"
},
{
"path": "posts/configurando-2-contas-de-git-no-mesmo-computador.md",
"chars": 6912,
"preview": "---\nlayout: post\ndate: 2021-09-14T13:31:30.000Z\ntitle: Configurando 2 contas de Git no mesmo computador\ndescription: Apr"
},
{
"path": "posts/configurando-o-macbook-m1-para-desenvolvimento-web.md",
"chars": 7870,
"preview": "---\nlayout: post\ndate: 2021-09-13T12:46:46.000Z\ntitle: Configurando o Macbook M1 para Desenvolvimento Web\ndescription: A"
},
{
"path": "posts/configurando-o-webpack-para-rodar-react-e-es6.md",
"chars": 8609,
"preview": "---\nlayout: post\ndate: 2016-06-19T06:00:46.000Z\ntitle: Configurando o Webpack para rodar React e ES6\ndescription: Aprend"
},
{
"path": "posts/convertendo-um-class-based-component-para-react-hooks.md",
"chars": 9218,
"preview": "---\nlayout: post\ndate: 2019-03-10T10:29:00.000Z\ntitle: Convertendo um Class Based Component para React Hooks\ndescription"
},
{
"path": "posts/criando-animacao-ondas-css-svg.md",
"chars": 1422,
"preview": "---\nlayout: post\ndate: 2020-04-30T21:38:15.000Z\ntitle: Criando uma animação de ondas com CSS e SVG\ndescription: Aprenda "
},
{
"path": "posts/criando-apresentacoes-e-hospedando-no-github.md",
"chars": 12980,
"preview": "---\nlayout: post\ndate: 2015-10-04T21:36:35.000Z\ntitle: Criando apresentações e hospedando no github\ndescription: Aprenda"
},
{
"path": "posts/criando-botao-animado-com-css-e-svg.md",
"chars": 9518,
"preview": "---\nlayout: post\ndate: 2017-08-14T21:14:48.000Z\ntitle: Criando botao animado com CSS e SVG\ndescription: Aprenda a criar "
},
{
"path": "posts/criando-componente-de-tipografia-com-styled-components.md",
"chars": 3438,
"preview": "---\nlayout: post\ndate: 2021-03-06T13:50:06.000Z\ntitle: Criando componente de Tipografia com styled-components\ndescriptio"
},
{
"path": "posts/criando-componentes-react-com-testes-lyef-flag.md",
"chars": 14231,
"preview": "---\nlayout: post\ndate: 2017-08-22T20:36:07.000Z\ntitle: Criando Componentes React com Testes - Lyef-flag\ndescription: Com"
},
{
"path": "posts/criando-componentes-usando-so-es6.md",
"chars": 9296,
"preview": "---\nlayout: post\ndate: 2017-07-07T13:09:11.000Z\ntitle: Criando componentes usando só ES6\ndescription: Muita gente usa Re"
},
{
"path": "posts/criando-e-exportando-svg-para-web.md",
"chars": 14813,
"preview": "---\nlayout: post\ndate: 2016-02-06T15:29:04.000Z\ntitle: \"#16 - Criando e Exportando SVG para Web\"\ndescription: Aprenda co"
},
{
"path": "posts/criando-efeito-parallax-no-header.md",
"chars": 6174,
"preview": "---\nlayout: post\ndate: 2016-04-16T13:39:03.000Z\ntitle: Criando efeito parallax no header\ndescription: Aprenda a fazer es"
},
{
"path": "posts/criando-icone-menu-hamburguer-animado-com-css-puro.md",
"chars": 4379,
"preview": "---\nlayout: post\ndate: 2018-05-31T04:18:14.000Z\ntitle: Criando ícone menu hamburguer animado com CSS puro\ndescription: N"
},
{
"path": "posts/criando-imagens-bonitas-de-codigo.md",
"chars": 1362,
"preview": "---\nlayout: post\ndate: 2021-02-18T15:20:55.000Z\ntitle: Criando imagens bonitas de código\ndescription: Já viu blocos de c"
},
{
"path": "posts/criando-menu-fullscreen-animado-com-css-puro.md",
"chars": 3338,
"preview": "---\nlayout: post\ndate: 2018-06-01T04:09:38.000Z\ntitle: Criando Menu Fullscreen animado com CSS puro\ndescription: Nesse p"
},
{
"path": "posts/criando-o-efeito-da-chuva-do-matrix-com-javascript-puro.md",
"chars": 18244,
"preview": "---\nlayout: post\ndate: 2021-12-20T14:16:50.000Z\ntitle: Criando o efeito da chuva do Matrix com JavaScript puro\ndescripti"
},
{
"path": "posts/criando-reading-progress-com-css-variables.md",
"chars": 6676,
"preview": "---\nlayout: post\ndate: 2017-08-05T16:02:18.000Z\ntitle: Criando Reading Progress com CSS Variables\ndescription: Uma forma"
},
{
"path": "posts/criando-svg-responsivo.md",
"chars": 8144,
"preview": "---\nlayout: post\ndate: 2015-04-04T18:18:49.000Z\ntitle: \"#10 - Criando um SVG responsivo e adaptativo\"\ndescription: Hoje "
},
{
"path": "posts/criando-textos-responsivos-com-css.md",
"chars": 1962,
"preview": "---\nlayout: post\ndate: 2020-04-28T05:38:15.000Z\ntitle: Criando Textos Responsivos com CSS\ndescription: Aprenda a deixar "
},
{
"path": "posts/criando-toda-a-estrutura-de-um-site-usando-o-strapi-cms.md",
"chars": 2159,
"preview": "---\nlayout: post\ndate: 2021-03-06T14:57:17.000Z\ntitle: Criando toda a estrutura de um site usando o Strapi CMS\ndescripti"
},
{
"path": "posts/criando-um-background-com-gradient-animado.md",
"chars": 1298,
"preview": "---\nlayout: post\ndate: 2020-04-23T15:04:15.000Z\ntitle: Criando um background com gradiente animado com CSS Puro\ndescript"
},
{
"path": "posts/criando-um-codepen-simples-em-poucas-linhas.md",
"chars": 8512,
"preview": "---\nlayout: post\ndate: 2018-05-28T06:20:42.000Z\ntitle: Criando um Codepen simples em poucas linhas\ndescription: Aprenda "
},
{
"path": "posts/criando-um-loader-animado-em-svg.md",
"chars": 3013,
"preview": "---\nlayout: post\ndate: 2017-06-15T22:59:34.000Z\ntitle: Criando um loader animado em SVG\ndescription: Aprenda a criar um "
},
{
"path": "posts/criando-um-menu-off-canvas-com-css3.md",
"chars": 8073,
"preview": "---\nlayout: post\ndate: 2015-11-01T15:01:02.000Z\ntitle: Criando um menu Off Canvas com CSS3\ndescription: Aprenda a criar "
},
{
"path": "posts/criando-um-react-custom-hook-com-testes.md",
"chars": 1956,
"preview": "---\nlayout: post\ndate: 2020-04-09T12:08:32.000Z\ntitle: Criando um React Custom Hook com Testes\ndescription: Aprenda como"
},
{
"path": "posts/criando-um-switch-button-com-css.md",
"chars": 6906,
"preview": "---\nlayout: post\ndate: 2015-12-06T22:42:25.000Z\ntitle: Criando um switch button com CSS\ndescription: Aprenda a criar os "
},
{
"path": "posts/criando-um-tooltip-animado-com-css-clip-path.md",
"chars": 1603,
"preview": "---\nlayout: post\ndate: 2020-05-07T13:19:46.000Z\ntitle: \"Criando um tooltip animado com CSS clip-path \"\ndescription: Apre"
},
{
"path": "posts/criando-uma-animacao-de-card-com-hover.md",
"chars": 1534,
"preview": "---\nlayout: post\ndate: 2020-05-14T06:44:15.000Z\ntitle: Criando uma animacao de Card com Hover\ndescription: Aprenda a faz"
},
{
"path": "posts/criando-uma-animacao-de-digitacao-com-css.md",
"chars": 1699,
"preview": "---\nlayout: post\ndate: 2020-04-21T09:04:15.000Z\ntitle: Criando uma animação de digitação com CSS\ndescription: Como fazer"
},
{
"path": "posts/criando-uma-animacao-de-reveal-block-com-css.md",
"chars": 1312,
"preview": "---\nlayout: post\ndate: 2020-04-22T09:04:15.000Z\ntitle: Criando uma animação de Reveal Block com CSS\ndescription: Como fa"
},
{
"path": "posts/criando-uma-lib-js-com-testes-do-zero.md",
"chars": 5196,
"preview": "---\nlayout: post\ndate: 2019-03-06T07:23:39.000Z\ntitle: Criando uma lib JS com testes do Zero\ndescription: Uma mini-série"
},
{
"path": "posts/customizando-o-disqus.md",
"chars": 4489,
"preview": "---\nlayout: post\ndate: 2018-03-28T07:49:06.000Z\ntitle: Customizando o Disqus\ndescription: Como adaptar esse sistema de c"
},
{
"path": "posts/debugando-e-agilizando-testes-na-react-testing-library.md",
"chars": 1517,
"preview": "---\nlayout: post\ndate: 2021-02-18T15:09:30.000Z\ntitle: Debugando e agilizando testes na React Testing Library\ndescriptio"
},
{
"path": "posts/devo-fazer-faculdade.md",
"chars": 9392,
"preview": "---\nlayout: post\ndate: 2015-02-07T12:47:02.000Z\ntitle: Devo fazer faculdade?\ndescription: Essa dúvida sempre acontece, p"
},
{
"path": "posts/devs-brasileiros-gringos-trabalhar-exterior.md",
"chars": 11042,
"preview": "---\nlayout: post\ndate: 2017-12-01T17:34:06.000Z\ntitle: Devs Brasileiros, Gringos e trabalhar no exterior\ndescription: Se"
},
{
"path": "posts/dez-anos-de-blog.md",
"chars": 6632,
"preview": "---\nlayout: post\ndate: 2024-12-26T08:00:40.000Z\ntitle: Dez anos de blog e mais alguns de carreira\ndescription: Alguns ap"
},
{
"path": "posts/dica-de-css-scroll-snap.md",
"chars": 7599,
"preview": "---\nlayout: post\ndate: 2019-07-17T10:39:23.000Z\ntitle: \"Dica de CSS: Scroll Snap\"\ndescription: Criando fullpage scroll c"
},
{
"path": "posts/dica-rapida-1.md",
"chars": 4677,
"preview": "---\nlayout: post\ndate: 2015-01-07T23:31:05.000Z\ntitle: \"Dica rápida #1\"\ndescription: Detalhes fazem a diferença, vamos f"
},
{
"path": "posts/diga-nao-ao-medium-tenha-sua-propria-plataforma.md",
"chars": 5343,
"preview": "---\nlayout: post\ndate: 2019-07-30T14:11:25.000Z\ntitle: \"Diga não ao Medium: tenha sua própria plataforma\"\ndescription: A"
},
{
"path": "posts/dominio-proprio-no-github-pages.md",
"chars": 3901,
"preview": "---\nlayout: post\ndate: 2015-01-29T06:16:36.000Z\ntitle: Como ter Domínio Proprio no Github Pages\ndescription: O passo a p"
},
{
"path": "posts/efeito-de-desenhar-com-svg.md",
"chars": 10514,
"preview": "---\nlayout: post\ndate: 2015-10-05T21:41:21.000Z\ntitle: \"#15 - Criando o efeito de desenhar com SVG\"\ndescription: Um tuto"
},
{
"path": "posts/entendendo-especificidade-em-css.md",
"chars": 6238,
"preview": "---\nlayout: post\ndate: 2020-04-06T05:43:00.000Z\ntitle: Entendendo especificidade em CSS\ndescription: O CSS não é difícil"
},
{
"path": "posts/entendendo-testes-de-software.md",
"chars": 19272,
"preview": "---\nlayout: post\ndate: 2015-12-12T13:49:42.000Z\ntitle: Entendendo Testes de Software\ndescription: Para que servem os tes"
},
{
"path": "posts/erros-comuns-com-o-react-testing-library.md",
"chars": 17927,
"preview": "---\r\nlayout: post\r\ndate: 2020-05-11 10:44:51\r\nimage: /assets/img/testing-library-mistakes.jpg\r\ntitle: Erros comuns com o"
},
{
"path": "posts/esta-tudo-bem-nao-fazer-nada.md",
"chars": 3213,
"preview": "---\nlayout: post\ndate: 2023-08-07T08:00:40.000Z\ntitle: Está tudo bem não fazer nada\ndescription: Vivemos numa corrida se"
},
{
"path": "posts/estilizando-svg-com-css-parte-1.md",
"chars": 5589,
"preview": "---\nlayout: post\ndate: 2015-03-07T17:58:45.000Z\ntitle: \"#7 - Estilizando SVG com CSS - Parte 1\"\ndescription: Aprenda as "
},
{
"path": "posts/estilizando-svg-com-css-parte-2.md",
"chars": 7575,
"preview": "---\nlayout: post\ndate: 2015-03-08T15:58:00.000Z\ntitle: \"#8 - Estilizando SVG com CSS - Parte 2\"\ndescription: Aprenda qua"
},
{
"path": "posts/exemplos-de-sites-com-parallax.md",
"chars": 4739,
"preview": "---\nlayout: post\ndate: 2016-05-08T13:16:24.000Z\ntitle: Exemplos de sites com Parallax\ndescription: Se inspire com alguns"
},
{
"path": "posts/falando-sobre-rscss.md",
"chars": 16056,
"preview": "---\nlayout: post\ndate: 2016-02-07T20:48:16.000Z\ntitle: Falando sobre RSCSS\ndescription: Escrevendo CSS sem perder a sani"
},
{
"path": "posts/fazendo-o-browser-falar-por-voce-web-speech-api.md",
"chars": 2898,
"preview": "---\nlayout: post\ndate: 2021-02-21T08:18:25.000Z\ntitle: Fazendo o browser falar por você - Web Speech API\ndescription: Ne"
},
{
"path": "posts/feito-e-melhor-que-perfeito.md",
"chars": 7246,
"preview": "---\nlayout: post\ndate: 2023-07-11T15:27:13.000Z\ntitle: Feito é melhor que perfeito\ndescription: Já se sentiu tão travado"
},
{
"path": "posts/filtros-css.md",
"chars": 11028,
"preview": "---\nlayout: post\ndate: 2015-07-26T20:30:23.000Z\ntitle: Filtros CSS\ndescription: Transforme o seu browser no seu próprio "
},
{
"path": "posts/formatando-datas-com-js-puro.md",
"chars": 2465,
"preview": "---\nlayout: post\ndate: 2021-02-18T15:49:00.000Z\ntitle: Formatando datas com JS puro\ndescription: Nem sempre precisamos d"
},
{
"path": "posts/formatando-numero-em-dinheiro-com-js-puro.md",
"chars": 2095,
"preview": "---\nlayout: post\ndate: 2021-02-18T15:35:11.000Z\ntitle: Formatando número em dinheiro com JS puro\ndescription: Evite usar"
},
{
"path": "posts/fundamentos-javascript-antes-de-aprender-react.md",
"chars": 26516,
"preview": "---\nlayout: post\ndate: 2019-01-04T04:26:13.000Z\ntitle: Fundamentos JavaScript antes de aprender React\ndescription: Na ne"
},
{
"path": "posts/gatsby-e-nextjs-performance-e-developer-experience.md",
"chars": 7893,
"preview": "---\nlayout: post\ndate: 2021-07-06T15:27:07.000Z\ntitle: \"Gatsby e NextJS: Performance e Developer Experience\"\ndescription"
},
{
"path": "posts/guia-como-contribuir-em-open-source.md",
"chars": 25036,
"preview": "---\nlayout: post\ndate: 2018-02-08T21:01:03.000Z\ntitle: \"Guia: Como contribuir em Open Source\"\ndescription: Quer contribu"
},
{
"path": "posts/habemus-react-hooks.md",
"chars": 25647,
"preview": "---\nlayout: post\ndate: 2019-02-08T05:37:19.000Z\ntitle: Habemus React Hooks\ndescription: Uma das features mais interessan"
},
{
"path": "posts/happy-halloween-caca-ao-tesouro.md",
"chars": 2643,
"preview": "---\nlayout: post\ndate: 2020-10-31T02:47:09.000Z\ntitle: Happy Halloween! Caça ao tesouro!\ndescription: Tenha a chance de "
},
{
"path": "posts/https-no-github-pages-com-custom-domain.md",
"chars": 6372,
"preview": "---\nlayout: post\ndate: 2016-06-11T19:07:32.000Z\ntitle: HTTPS no Github Pages com Custom Domain\ndescription: Aprenda a co"
},
{
"path": "posts/introducao-ao-strapi-headless-cms.md",
"chars": 6548,
"preview": "---\nlayout: post\ndate: 2020-06-17T10:56:41.000Z\ntitle: Introdução ao Strapi - Headless CMS\ndescription: O que é um Headl"
},
{
"path": "posts/js-com-tdd-na-pratica-e-novidades.md",
"chars": 11522,
"preview": "---\nlayout: post\ndate: 2016-09-10T15:53:11.000Z\ntitle: Curso JS com TDD na Prática e Novidades\ndescription: Aprenda uma "
},
{
"path": "posts/juntando-arrays-e-objetos-com-spread-syntax-no-javascript.md",
"chars": 2192,
"preview": "---\nlayout: post\ndate: 2021-02-21T07:12:03.000Z\ntitle: Juntando arrays e objetos com Spread syntax no JavaScript\ndescrip"
},
{
"path": "posts/lancamento-curso-de-git-e-github-na-vida-real.md",
"chars": 2847,
"preview": "---\nlayout: post\ndate: 2018-02-05T01:23:11.000Z\ntitle: Lançamento Curso de Git e Github na Vida Real\ndescription: Um cur"
},
{
"path": "posts/links-da-semana-1.md",
"chars": 4034,
"preview": "---\nlayout: post\ndate: 2015-02-01T20:37:40.000Z\ntitle: \"Links da semana #1\"\ndescription: \"Links da semana #1 - Links sob"
},
{
"path": "posts/links-da-semana-2.md",
"chars": 4223,
"preview": "---\nlayout: post\ndate: 2015-02-08T15:49:52.000Z\ntitle: \"Links da semana #2\"\ndescription: \"Links da semana #2 - Links sob"
},
{
"path": "posts/links-da-semana-3.md",
"chars": 3717,
"preview": "---\nlayout: post\ndate: 2015-03-14T20:22:20.000Z\ntitle: \"Links da semana #3\"\ndescription: \"Links da semana #3 - Links sob"
},
{
"path": "posts/links-da-semana-4.md",
"chars": 3760,
"preview": "---\nlayout: post\ndate: 2015-10-11T22:19:17.000Z\ntitle: \"Links da semana #4\"\ndescription: \"Links da semana #4 - Links sob"
},
{
"path": "posts/links-da-semana-5.md",
"chars": 5075,
"preview": "---\nlayout: post\ndate: 2015-10-18T21:19:17.000Z\ntitle: \"Links da semana #5\"\ndescription: \"Links da semana #5 - Links sob"
},
{
"path": "posts/links-da-semana-6.md",
"chars": 2781,
"preview": "---\nlayout: post\ndate: 2015-10-25T21:19:17.000Z\ntitle: \"Links da semana #6\"\ndescription: \"Links da semana #6 - Links sob"
},
{
"path": "posts/lista-de-dicas-de-seo-para-devs.md",
"chars": 6325,
"preview": "---\nlayout: post\ndate: 2019-08-20T14:36:57.000Z\ntitle: Lista de dicas de SEO para Devs\ndescription: Algumas dicas que po"
},
{
"path": "posts/lyef-criando-componentes-desacoplados-em-reactjs.md",
"chars": 11310,
"preview": "---\nlayout: post\ndate: 2017-08-19T18:31:42.000Z\ntitle: Lyef - Criando componentes desacoplados em ReactJS\ndescription: U"
},
{
"path": "posts/mais-de-10-mil-alunos-na-udemy.md",
"chars": 16503,
"preview": "---\nlayout: post\ndate: 2017-08-17T20:02:17.000Z\ntitle: Mais de 10 mil alunos na Udemy\ndescription: Um pouco sobre esse n"
},
{
"path": "posts/making-of-blog-novo-gatsby-js.md",
"chars": 16162,
"preview": "---\nlayout: post\ndate: 2019-07-13T13:43:12.000Z\ntitle: Making of - Criando meu Blog Novo com GatsbyJS\ndescription: Coisa"
},
{
"path": "posts/making-of-parte-1.md",
"chars": 10432,
"preview": "---\nlayout: post\ndate: 2015-01-03T07:54:23.000Z\ntitle: Making of - Parte 1\ndescription: Quais ferramentas foram utilizad"
},
{
"path": "posts/making-of-parte-2.md",
"chars": 13007,
"preview": "---\nlayout: post\ndate: 2015-01-05T00:21:31.000Z\ntitle: Making of Parte 2\ndescription: Aqui vou mostrar o passo a passo d"
},
{
"path": "posts/manipulando-svg-com-js.md",
"chars": 9287,
"preview": "---\nlayout: post\ndate: 2015-09-12T00:14:39.000Z\ntitle: \"#14 - Manipulando SVG com JS\"\ndescription: Veja como manipular S"
},
{
"path": "posts/mantendo-seu-projeto-atualizado-com-dependabot-e-github-actions.md",
"chars": 6560,
"preview": "---\nlayout: post\ndate: 2020-08-08T08:46:44.000Z\ntitle: Mantendo seu projeto atualizado com Dependabot e Github Actions\nd"
},
{
"path": "posts/mask-e-clip-com-css-e-svg.md",
"chars": 10567,
"preview": "---\nlayout: post\ndate: 2018-01-24T21:31:00.000Z\ntitle: Mask e Clip com CSS e SVG\ndescription: Dois efeitos simples que p"
},
{
"path": "posts/medindo-performance-do-seu-site-com-lighthouse.md",
"chars": 7035,
"preview": "---\nlayout: post\ndate: 2018-03-16T14:42:05.000Z\ntitle: Medindo a performance do seu site com Lighthouse\ndescription: Uma"
},
{
"path": "posts/menu-sticky-e-smooth-scroll-com-css-puro.md",
"chars": 7094,
"preview": "---\nlayout: post\ndate: 2018-05-30T04:37:00.000Z\ntitle: \"Menu Sticky e Smooth Scroll com CSS puro \"\ndescription: Aprenda "
},
{
"path": "posts/meu-ano-de-2015.md",
"chars": 12020,
"preview": "---\nlayout: post\ndate: 2015-12-29T20:35:04.000Z\ntitle: Meu ano de 2015\ndescription: Foi um ano ruim? Definitivamente NÃO"
},
{
"path": "posts/meu-ano-de-2016.md",
"chars": 12867,
"preview": "---\nlayout: post\ndate: 2016-12-23T01:21:04.000Z\ntitle: Meu ano de 2016\ndescription: Um ano super cheio, com vários event"
},
{
"path": "posts/meu-ano-de-2017.md",
"chars": 22512,
"preview": "---\nlayout: post\ndate: 2017-12-22T17:02:58.000Z\ntitle: Meu ano de 2017\ndescription: Muitos países e cidades visitadas, n"
},
{
"path": "posts/meu-ano-de-2018.md",
"chars": 9928,
"preview": "---\nlayout: post\ndate: 2018-12-27T04:46:00.000Z\ntitle: Meu ano de 2018\ndescription: Cursos novos, canal no Youtube, foco"
},
{
"path": "posts/meu-ano-de-2019.md",
"chars": 13594,
"preview": "---\nlayout: post\ndate: 2019-12-27T15:30:11.000Z\ntitle: Meu ano de 2019\ndescription: Um ano movimentado na Toptal, blog n"
},
{
"path": "posts/meu-ano-de-2020.md",
"chars": 11471,
"preview": "---\nlayout: post\ndate: 2020-12-28T02:53:47.000Z\ntitle: Meu ano de 2020\ndescription: Um ano complicado, mas com boas vitó"
},
{
"path": "posts/meu-ano-de-2021.md",
"chars": 16978,
"preview": "---\nlayout: post\ndate: 2021-12-21T08:00:40.000Z\ntitle: Meu ano de 2021\ndescription: Ano passado já foi complicado para m"
},
{
"path": "posts/meu-ano-de-2023.md",
"chars": 9336,
"preview": "---\nlayout: post\ndate: 2023-12-26T08:00:40.000Z\ntitle: Meu ano de 2023\ndescription: Retornando os posts de retrospectiva"
},
{
"path": "posts/meu-ano-de-2024.md",
"chars": 12177,
"preview": "---\nlayout: post\ndate: 2024-12-26T08:00:40.000Z\ntitle: Meu ano de 2024\ndescription: Mudança para São Paulo, viagens, tra"
},
{
"path": "posts/meu-dia-a-dia-como-dev-frontend.md",
"chars": 5077,
"preview": "---\nlayout: post\ndate: 2015-01-15T20:17:11.000Z\ntitle: Meu dia a dia como dev frontend\ndescription: Um pouco do meu dia "
},
{
"path": "posts/meu-processo-para-a-toptal.md",
"chars": 12429,
"preview": "---\nlayout: post\ndate: 2017-07-21T20:20:15.000Z\ntitle: Meu processo para a Toptal\ndescription: Algumas coisas que aconte"
},
{
"path": "posts/meu-setup.md",
"chars": 9898,
"preview": "---\nlayout: post\ndate: 2018-10-19T07:03:08.000Z\ntitle: Meu Setup\ndescription: Quais ferramentas eu tenho, que programas "
},
{
"path": "posts/meus-15-dias-no-chile.md",
"chars": 21131,
"preview": "---\nlayout: post\ndate: 2019-07-25T10:17:49.000Z\ntitle: Meus 15 dias no Chile\ndescription: Meu roteiro, lugares que me ho"
},
{
"path": "posts/meus-20-dias-no-peru.md",
"chars": 28298,
"preview": "---\nlayout: post\ndate: 2018-05-14T08:11:28.000Z\ntitle: Meus 20 dias no Peru\ndescription: Um pouco do roteiro que fiz, lu"
},
{
"path": "posts/meus-50-dias-na-espanha.md",
"chars": 26396,
"preview": "---\nlayout: post\ndate: 2018-03-13T21:01:03.000Z\ntitle: Meus 50 dias na Espanha\ndescription: \"Um pouco sobre como me loco"
},
{
"path": "posts/meus-plugins-favoritos-do-sublime-text.md",
"chars": 8062,
"preview": "---\nlayout: post\ndate: 2016-03-21T21:48:36.000Z\ntitle: Meus plugins favoritos do Sublime Text\ndescription: Confesso que "
},
{
"path": "posts/migrei-meu-blog-do-gatsby-para-o-nextjs.md",
"chars": 12319,
"preview": "---\nlayout: post\ndate: 2021-07-04T04:46:26.000Z\ntitle: Migrei meu blog do Gatsby para o NextJS\ndescription: Um pouco da "
},
{
"path": "posts/migrei-para-o-vscode-e-estou-feliz.md",
"chars": 8985,
"preview": "---\nlayout: post\ndate: 2017-07-27T22:08:41.000Z\ntitle: Migrei para o Visual Studio Code e estou feliz!\ndescription: Um p"
},
{
"path": "posts/minha-trajetoria-ate-ser-desenvolvedor.md",
"chars": 15352,
"preview": "---\nlayout: post\ndate: 2017-06-21T22:49:40.000Z\ntitle: Minha trajetoria até me tornar Desenvolvedor\ndescription: Uma peq"
},
{
"path": "posts/minhas-experiencias-com-trabalho-remoto-em-ti.md",
"chars": 30108,
"preview": "---\nlayout: post\ndate: 2018-11-19T06:13:33.000Z\ntitle: Minhas experiências com Trabalho Remoto em TI\ndescription: Após m"
},
{
"path": "posts/mini-curso-gratuito-de-typescript.md",
"chars": 4911,
"preview": "---\nlayout: post\ndate: 2020-05-18T13:31:55.000Z\ntitle: Mini Curso gratuito de TypeScript\ndescription: Aprenda o que é Ty"
},
{
"path": "posts/mostrando-ultimos-posts-e-videos-no-github-profile.md",
"chars": 5480,
"preview": "---\nlayout: post\ndate: 2020-08-10T11:44:05.000Z\ntitle: Mostrando últimos posts e vídeos no Github Profile\ndescription: C"
},
{
"path": "posts/mudando-sua-vida-atraves-de-projetos-paralelos.md",
"chars": 11707,
"preview": "---\nlayout: post\ndate: 2016-05-19T17:39:52.000Z\ntitle: Mudando sua vida através de projetos paralelos\ndescription: Fica "
},
{
"path": "posts/mude.md",
"chars": 5714,
"preview": "---\nlayout: post\ndate: 2023-08-14T08:00:40.000Z\ntitle: Mude!\ndescription: Mude, mas comece devagar, porque a direção é m"
},
{
"path": "posts/mulheres-na-tecnologia.md",
"chars": 3940,
"preview": "---\nlayout: post\ndate: 2020-05-27T15:47:47.000Z\ntitle: Mulheres na tecnologia\ndescription: Nossa área é predominante mas"
},
{
"path": "posts/nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa.md",
"chars": 12235,
"preview": "---\nlayout: post\ndate: 2020-08-05T02:59:30.000Z\ntitle: NextJS, Gatsby ou Create React App? Entendendo os conceitos de SS"
},
{
"path": "posts/novidades-do-react-16.md",
"chars": 13776,
"preview": "---\nlayout: post\ndate: 2017-09-28T20:59:22.000Z\ntitle: Novidades do React 16\ndescription: Veja o que tem de novo com o n"
},
{
"path": "posts/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows.md",
"chars": 3288,
"preview": "---\nlayout: post\ndate: 2020-02-10T14:05:15.000Z\ntitle: \"Novo Curso: Criando um ambiente de Desenvolvimento no Windows\"\nd"
},
{
"path": "posts/novo-curso-de-git-e-github-para-iniciantes.md",
"chars": 4962,
"preview": "---\nlayout: post\ndate: 2016-04-03T14:21:20.000Z\ntitle: Novo curso de Git e Github para iniciantes\ndescription: Aprenda c"
},
{
"path": "posts/novo-projeto-awesome-audioviz.md",
"chars": 6284,
"preview": "---\nlayout: post\ndate: 2016-03-27T03:24:29.000Z\ntitle: Novo projeto Awesome Audio Viz\ndescription: Quem já acessou esse "
},
{
"path": "posts/o-basico-da-api-do-reactjs.md",
"chars": 13272,
"preview": "---\nlayout: post\ndate: 2015-07-17T03:18:37.000Z\ntitle: \"#3 - O básico da API do ReactJS\"\ndescription: Aprenda um pouco m"
},
{
"path": "posts/o-que-ninguem-diz-para-iniciantes.md",
"chars": 6846,
"preview": "---\nlayout: post\ndate: 2016-03-26T13:38:25.000Z\ntitle: O que ninguém diz para os iniciantes\ndescription: Análise de uma "
},
{
"path": "posts/o-que-preciso-saber-para-trabalhar-no-exterior.md",
"chars": 14416,
"preview": "---\nlayout: post\ndate: 2017-12-03T17:55:35.000Z\ntitle: O que preciso saber para trabalhar no exterior?\ndescription: Algu"
},
{
"path": "posts/onde-baixar-svg.md",
"chars": 3893,
"preview": "---\nlayout: post\ndate: 2015-01-16T16:51:33.000Z\ntitle: \"#3 - Onde baixar SVG?\"\ndescription: Eu sou programador e não des"
},
{
"path": "posts/organizando-seu-css-com-itcss.md",
"chars": 8633,
"preview": "---\nlayout: post\ndate: 2016-02-09T16:08:54.000Z\ntitle: Organizando seu CSS com ITCSS\ndescription: Organizar CSS em larga"
},
{
"path": "posts/perfomance-web-critical-css-e-jekyll.md",
"chars": 6622,
"preview": "---\nlayout: post\ndate: 2018-03-21T07:55:37.000Z\ntitle: \"Perfomance Web: Critical CSS e Jekyll\"\ndescription: A web é lent"
},
{
"path": "posts/performance-web-evite-escrever-html-demais.md",
"chars": 6314,
"preview": "---\nlayout: post\ndate: 2018-05-29T11:10:42.000Z\ntitle: \"Performance Web: Evite escrever HTML demais\"\ndescription: Calma,"
},
{
"path": "posts/performance-web-usando-fontes-do-sistema.md",
"chars": 4190,
"preview": "---\nlayout: post\ndate: 2018-03-19T10:41:16.000Z\ntitle: \"Performance Web: Usando fontes do sistema \"\ndescription: Como al"
},
{
"path": "posts/perguntas-e-respostas-jekyll.md",
"chars": 13489,
"preview": "---\nlayout: post\ndate: 2015-01-21T08:15:41.000Z\ntitle: Perguntas e Respostas - Jekyll\ndescription: Algumas dúvidas comun"
},
{
"path": "posts/por-que-ir-em-eventos-vale-a-pena.md",
"chars": 3408,
"preview": "---\nlayout: post\ndate: 2015-03-29T14:35:14.000Z\ntitle: Por que ir em eventos vale a pena?\ndescription: Alguns dos motivo"
},
{
"path": "posts/por-que-usar-jekyll.md",
"chars": 5268,
"preview": "---\nlayout: post\ndate: 2015-01-05T23:18:29.000Z\ntitle: \"Flame War: Por que usar Jekyll?\"\ndescription: \"Depois de várias "
},
{
"path": "posts/por-que-usar-svg.md",
"chars": 3597,
"preview": "---\nlayout: post\ndate: 2015-01-08T10:39:47.000Z\ntitle: \"#1 - Por que usar SVG?\"\ndescription: O SVG finalmente começa dar"
},
{
"path": "posts/porque-eu-evito-funcoes-anonimas.md",
"chars": 6014,
"preview": "---\nlayout: post\ndate: 2016-07-16T16:08:38.000Z\ntitle: Porque eu evito funções anônimas\ndescription: Funções anônimas po"
},
{
"path": "posts/pre-venda-curso-de-svg.md",
"chars": 5334,
"preview": "---\nlayout: post\ndate: 2016-04-21T21:15:10.000Z\ntitle: \"Pre-venda: Curso de SVG\"\ndescription: Se adiante e adquira um do"
},
{
"path": "posts/refatorando-componentes-react-para-es6.md",
"chars": 6837,
"preview": "---\nlayout: post\ndate: 2016-07-30T06:10:26.000Z\ntitle: Refatorando componentes React de ES5 para ES6\ndescription: Aprove"
},
{
"path": "posts/saude-deve-ser-a-prioridade.md",
"chars": 4512,
"preview": "---\nlayout: post\ndate: 2018-07-24T12:19:43.000Z\ntitle: Nem React, nem VueJs. Saúde deve ser uma prioridade\ndescription: "
},
{
"path": "posts/semantic-version.md",
"chars": 5011,
"preview": "---\nlayout: post\ndate: 2015-10-31T23:36:09.000Z\ntitle: Versionando seu projeto\ndescription: Como versionar corretamente "
},
{
"path": "posts/share-button-sem-dependencias.md",
"chars": 6496,
"preview": "---\nlayout: post\ndate: 2015-05-01T13:57:03.000Z\ntitle: Share Buttons sem dependências\ndescription: Ser social é muito im"
},
{
"path": "posts/sistemas-de-icones-em-svg.md",
"chars": 8534,
"preview": "---\nlayout: post\ndate: 2015-03-06T22:33:23.000Z\ntitle: \"#6 - Sistemas de Ícones em SVG\"\ndescription: Como usar ícones em"
},
{
"path": "posts/social-meta-tags.md",
"chars": 5451,
"preview": "---\nlayout: post\ndate: 2015-02-09T21:33:48.000Z\ntitle: Social Meta Tags\ndescription: Aprenda como ser mais social, ter m"
},
{
"path": "posts/sou-bom-o-suficiente.md",
"chars": 9659,
"preview": "---\nlayout: post\ndate: 2016-12-30T01:12:28.000Z\ntitle: Será que sou bom o suficiente?\ndescription: Essa é uma pergunta b"
},
{
"path": "posts/talk-uma-conversa-sobre-trabalho-remoto.md",
"chars": 4367,
"preview": "---\nlayout: post\ndate: 2020-04-20T15:34:33.000Z\ntitle: \"Talk: Uma conversa sobre Trabalho Remoto\"\ndescription: Será que "
},
{
"path": "posts/tecnicas-de-aprendizado.md",
"chars": 8254,
"preview": "---\nlayout: post\ndate: 2015-01-06T10:21:26.000Z\ntitle: Técnicas de aprendizado\ndescription: Se você tem costume de procr"
},
{
"path": "posts/theme-color-android-lollipop.md",
"chars": 1333,
"preview": "---\nlayout: post\ndate: 2015-02-10T23:08:04.000Z\ntitle: Theme Color Android Lollipop\ndescription: Como fazer a barra de n"
},
{
"path": "posts/trabalhando-com-a-tela-util-do-iphone.md",
"chars": 3595,
"preview": "---\nlayout: post\ndate: 2020-05-06T12:25:35.000Z\ntitle: Trabalhando com a tela útil do iPhone\ndescription: Como lidar com"
},
{
"path": "posts/trabalhando-com-git-hooks-de-forma-facil.md",
"chars": 5779,
"preview": "---\nlayout: post\ndate: 2016-07-10T15:37:37.000Z\ntitle: Trabalhando com Git Hooks de forma fácil\ndescription: Evite que c"
},
{
"path": "posts/um-novo-projeto-um-novo-desafio.md",
"chars": 6372,
"preview": "---\nlayout: post\ndate: 2016-03-19T05:57:56.000Z\ntitle: Um novo projeto, um novo desafio\ndescription: Já que eu escrevo, "
},
{
"path": "posts/um-post-por-dia.md",
"chars": 2795,
"preview": "---\nlayout: post\ndate: 2015-01-05T13:21:09.000Z\ntitle: \"#1postperday!\"\ndescription: A ideia é postar pelo menos uma vez "
},
{
"path": "posts/um-tema-para-todos-os-lugares-dracula-pro.md",
"chars": 2954,
"preview": "---\nlayout: post\ndate: 2020-05-08T10:17:19.000Z\ntitle: \"Um tema para todos os lugares: Dracula PRO\"\ndescription: Deixe s"
},
{
"path": "posts/usando-netlify-cms-com-nextjs-vercel-e-github.md",
"chars": 7468,
"preview": "---\nlayout: post\ndate: 2021-10-06T15:52:58.000Z\ntitle: Usando Netlify CMS com NextJS, Vercel e GitHub\ndescription: Como "
},
{
"path": "posts/usando-o-preact-no-nextjs-para-mais-performance.md",
"chars": 3070,
"preview": "---\nlayout: post\ndate: 2021-09-17T04:40:37.000Z\ntitle: Usando o Preact no NextJS para mais performance\ndescription: Dimi"
},
{
"path": "posts/usando-svg-sprites.md",
"chars": 6071,
"preview": "---\nlayout: post\ndate: 2015-05-24T18:25:53.000Z\ntitle: \"#11 - Usando SVG Sprites\"\ndescription: Já foi provado que o SVG "
},
{
"path": "posts/usando-um-agregador-de-conteudo.md",
"chars": 1948,
"preview": "---\nlayout: post\ndate: 2019-07-18T13:15:00.000Z\ntitle: Usando um agregador de conteúdo\ndescription: Como não perder nenh"
},
{
"path": "posts/utilizando-css-counters.md",
"chars": 4816,
"preview": "---\nlayout: post\ndate: 2020-04-13T07:28:10.000Z\ntitle: Utilizando CSS Counters\ndescription: Vamos aprender a fazer o CSS"
},
{
"path": "posts/utilizando-svg-sprites-com-react.md",
"chars": 7396,
"preview": "---\nlayout: post\ndate: 2016-06-03T23:30:39.000Z\ntitle: Utilizando SVG Sprites com React\ndescription: Aprenda a utilizar "
}
]
// ... and 62 more files (download for full content)
About this extraction
This page contains the full source code of the willianjusten/willianjusten.com.br GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 262 files (1.6 MB), approximately 439.4k tokens, and a symbol index with 29 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.