{"@context":"https://schema.org","@type":"Blog","name":"Cristiano Gonçalves","url":"https://www.cristiano.dev/blog","description":"Aqui você encontra todos os 40 artigos que escrevi enquanto aprendia sobre desenvolvimento web, engenharia de software, carreira e liderança.","publisher":{"@type":"Organization","name":"Cristiano Gonçalves","logo":{"@type":"ImageObject","url":"https://www.cristiano.dev/_next/image?url=%2Fcristiano.jpg&w=256&q=75","width":80,"height":106}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://www.cristiano.dev"},"author":{"@type":"Person","name":"Cristiano Gonçalves","url":"https://www.cristiano.dev/about"},"blogPost":[{"@type":"BlogPosting","headline":"Entendendo renderização no browser: Como o DOM é gerado?","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1287,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-09-26-processo-renderizacao-no-browser-como-o-dom-e-gerado","datePublished":"Fri Oct 11 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Fri Oct 11 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNos artigos anteriores nós aprendemos sobre o DOM e sobre o CSSOM, se você ainda tem dúvidas sobre essas duas palavrinhas recomendo fazer a leitura dos dois posts abaixo:\n\n- [Entendendo renderização no browser: DOM](https://www.cristiano.dev/blog/2024-09-17-processo-renderizacao-no-browser)\n- [Entendendo renderização no browser: CSSOM](https://www.cristiano.dev/blog/2024-09-26-processo-renderizacao-no-browser-cssom)\n\nRecapitulando, o DOM é uma estrutura que o navegador utiliza para renderizar a nossa página. Porém, os dados da internet não são trafegados em forma de DOM, logo precisa existir um processo antes do DOM ficar pronto para o navegador consumir.\n\nNesse momento você pode estar se perguntando como os dados trafegam na internet?\n\nSempre que acessamos um site acontece uma troca em um padrão que chamamos de cliente x servidor.\n\nNessa troca o cliente (seu navegador) pede para acessar o site `www.cristiano.dev` para o servidor, que respondem com todo o conteúdo do site solicitado, mas esse conteúdo vem em forma de bytes e de uma forma que está distante do html/css/js que conhecemos.\n\n![Modelo cliente x servidor](/assets/img/client-server.png)\n\nO que o browser vai receber do servidor é uma sequência de bytes.\n\nPara esse pequeno trecho de html disponibilizado pelo servidor:\n\n```\n\n\n \n Um título\n \n \n Um link\n

Um cabeçalho

\n \n\n```\n\nO navegador receberia em bytes mais ou menos assim:\n\n```\n3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E\n```\n\nPorém, o navegador não consegue renderizar uma página apenas com essa informação. Para que o nosso layout seja montado, o navegador vai executar alguns passos antes de ter o DOM.\n\nEsses passo são:\n\n- Conversão\n- Tokenização\n- Lexing\n\n## Conversão: Bytes para caracteres\n\n![Bytes para caracteres](/assets/img/bytes-char.png)\n\nNessa etapa o navegador lê os dados brutos da rede ou de um disco e os converte para caracteres com base na codificação(encoding) especificada no arquivo, por exemplo, UTF-8.\n\nBasicamente é a etapa em que o navegador transforma bytes para o código no formato que escrevemos no nosso dia a dia.\n\n## Tokenização: Caracteres para tokens\n\n![Caracteres para tokens](/assets/img/char-tokens.png)\n\nNessa etapa o navegador converte strings de caracteres em pequenas unidades chamadas tokens. Todo início, final de tag e conteúdo são contabilizados, além disso, cada token possui um conjunto de regras específicos.\n\nPor exemplo, a tag `` possui atributos diferentes da tag ``\n\nSem essa etapa teremos apenas um monte de texto sem significado para o navegador e no fim desse processo o nosso html base seria tokenizado assim:\n\n- `` ➔ **Token**: `DOCTYPE`, **Valor**: `html`\n- `` ➔ **Token**: `StartTag`, **Nome**: `html`\n- `` ➔ **Token**: `StartTag`, **Nome**: `head`\n- `` ➔ **Token**: `StartTag`, **Nome**: `title`\n- `Exemplo de título` ➔ **Token**: `Character`, **Dados**: `Exemplo de título`\n- `` ➔ **Token**: `EndTag`, **Nome**: `title`\n- `
` ➔ **Token**: `StartTag`, **Nome**: `p`\n- `Olá, mundo!` ➔ **Token**: `Character`, **Dados**: `Olá, mundo!`\n- `
` ➔ **Token**: `EndTag`, **Nome**: `p`\n\n![Tokenização](/assets/img/tokens.png)\n\n> Um token é uma palavra ou símbolo individual em um texto. A \"tokenização\" é o processo de dividir um texto em palavras, frases ou símbolos menores.\n\n## Lexing: Tokens para nodes\n\n![Lexing](/assets/img/tokens-node.png)\n\nA etapa de lexing(análise léxica) é responsável por converter os tokens em objetos, mas isso ainda não é o DOM. Nesse momento o navegador está gerando partes isoladas do DOM, onde cada tag será transformada em um objeto com atributos que tragam informações relacionadas a atributos, tags pai, tags filhas, etc.\n\nO resultado após o lexing da nossa tag seria algo assim:\n\n```\n{\n \"type\": \"Element\",\n \"tagName\": \"p\",\n \"attributes\": [],\n \"children\": [\n {\n \"type\": \"Text\",\n \"content\": \"Olá, mundo!\"\n }\n ]\n}\n\n```\n\n## Construção do DOM: Nodes para DOM\n\n![DOM](/assets/img/dom-tree.png)\n\nFinalmente chegamos na etapa de construção do DOM!\n\nNesse momento o navegador vai considerar as relações entre as tags html e vai juntar os nodes em uma estrutura de dados em árvore que represente essas relações de forma hierárquica. Por exemplo: o objeto html é pai do objeto body, o body é pai do objeto paragraph, até que toda a representação do documento seja criada.\n\nAo fim da construção o nosso html de exemplo se torna uma árvore de objetos como esta:\n\n```\n{\n \"type\": \"Document\",\n \"children\": [\n {\n \"type\": \"Element\",\n \"tagName\": \"html\",\n \"children\": [\n {\n \"type\": \"Element\",\n \"tagName\": \"head\",\n \"children\": [\n {\n \"type\": \"Element\",\n \"tagName\": \"title\",\n \"children\": [\n {\n \"type\": \"Text\",\n \"content\": \"Exemplo de título\"\n }\n ]\n }\n ]\n },\n {\n \"type\": \"Element\",\n \"tagName\": \"body\",\n \"children\": [\n {\n \"type\": \"Element\",\n \"tagName\": \"p\",\n \"children\": [\n {\n \"type\": \"Text\",\n \"content\": \"Olá, mundo!\"\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n\n```\n\n## Recapitulando\n\nO processo para construção do DOM é complexo e acontece nas seguintes etapas:\n\n- Conversão: O html é recebido pelo navegador e convertido de bytes para caracteres.\n- Tokenização: Os caracteres são transformados em tokens que representam as partes do html (tags, atributos, textos).\n- Lexing: Os tokens são organizados em nós de objetos\n- DOM: Os objetos são organizados em uma estrutura de dados do tipo árvore de forma hierárquica.\n\nPara o CSSOM também acontece um processo semelhante, composto por conversão, tokenização e lexing.\n\n### Conclusão\n\nVocê deve estar se perguntando onde você vai aplicar esse conhecimento ao longo do seu dia a dia desenvolvendo...\n\nÉ verdade que esse tipo de informação não vai ser requisitada com frequência, mas é importante entender como os navegadores, a principal ferramenta de trabalho de frontends, funcionam na sua essência.\n\nEsse conhecimento também vai ser muito valioso para entender os próximos temas que iremos abordar por aqui: Paint, repaint, flow e reflow.\n\n### Muito obrigado!!\n\nObrigado por ter chegado até aqui!\n\nEspero que tenha aprendido algo novo ao longo dessa leitura.\n\nAté a próxima!\n\n### Referências\n\n[Constructing the Object Model](https://web.dev/articles/critical-rendering-path/constructing-the-object-model?hl=pt-br#document_object_model_dom)\n\n[Desconstruindo a Web: Renderização De Páginas](https://blog.matheuscastiglioni.com.br/desconstruindo-a-web-renderizacao-de-paginas/)\n"},{"@type":"BlogPosting","headline":"Entendendo renderização no browser: CSSOM","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":887,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-09-26-processo-renderizacao-no-browser-cssom","datePublished":"Thu Sep 26 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Thu Sep 26 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nHey, esse artigo faz parte de uma série sobre renderização no browser. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:\n\n- [Entendendo renderização no browser: DOM](https://www.cristiano.dev/blog/2024-09-17-processo-renderizacao-no-browser)\n\nNo último artigo, exploramos como o HTML é processado pelo navegador através da DOM (Document Object Model), que define a estrutura da página web. Porém, uma página web não é feita apenas de HTML e algo que muitos ainda não sabem é que o CSS também possui sua própria representação em forma de objeto, chamada CSSOM (CSS Object Model).\n\nO navegador utiliza a CSSOM em conjunto com a DOM para construir a página, combinando estrutura (HTML) e estilos (CSS), resultando em uma apresentação visual harmoniosa.\n\nNeste artigo, vamos aprofundar nosso conhecimento sobre a CSSOM, entendendo sua estrutura, importância e como ela pode ser manipulada.\n\n### O que é o CSSOM?\n\nAssim como a DOM, o CSSOM é uma estrutura de dados hierárquica, mas sua função é representar o CSS de um documento web.\n\nO CSSOM é gerado pelos navegadores após o carregamento e processamento dos arquivos de estilo. Embora seja construído separadamente da DOM, ambos trabalham em conjunto para que o navegador possa montar a página com a estrutura correta (DOM) e aplicar os estilos apropriados (CSSOM).\n\nA principal função do CSSOM é fornecer ao navegador um \"mapa\" detalhado dos estilos que devem ser aplicados a cada elemento da página.\n\nVeja abaixo uma representação visual do CSSOM:\n\n![Representação da árvore CSSOM](/assets/img/cssom-tree.png)\n\nNo código essa representação ficaria assim:\n\n```css\nbody {\n font-size: 16px;\n}\n\ndiv {\n width: 200px;\n height: 100px;\n background: blue;\n}\n\na {\n color: red;\n text-decoration: none;\n}\n\nh1 {\n font-weight: bold;\n}\n```\n\nE a árvore DOM referente ao CSSOM que vimos anteriormente é representada da seguinte forma:\n\n![Representação da árvore DOM](/assets/img/dom-tree-2.png)\n\n#### Manipulando o CSSOM\n\nOs navegadores nos fornecem um conjunto de APIs que permitem a manipulação do CSS utilizando javascript. Ela é semelhante a API do DOM, mas para CSS ao invés de HTML.\n\nCom o uso dessa API nós conseguimos ler e manipular o CSS de uma página de forma dinâmica.\n\nA maneira mais simples de você manipular estilos é por meio da propriedade style presente no document.\n\nPara acessar e manipular um elemento do CSSOM pela primeira vez, abra o console do navegador e execute o seguinte código:\n\n```js\ndocument.body.style.background = \"gray\";\nconsole.log(document.body.style.background); // gray\n```\n\nApós executar o trecho de código acima recomendo que inspecione os elementos da página e analisem o body. Notem que agora o nosso body tem um estilo inline e vai estar mais ou menos dessa forma:\n\n```html\n\n```\n\nIsso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.\nA mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.\n\n```js\nconsole.log(document.body.style.background); // '''\n```\n\n> Conseguimos adicionar ou alterar qualquer propriedade CSS da nossa página seguindo sempre o padrão elemento.style.nomeDaProprieda.\n\nOutra forma de manipular os estilos inline são por meio de alguns métodos presentes no style.\n\n- setProperty: com esse método você consegue adicionar ou altera o valor de uma propriedade inline.\n\n```js\ndocument.body.style.setProperty(\"background\", \"red\");\n\n// Agora execute o próximo comando\n\ndocument.body.style.setProperty(\"background\", \"blue\");\n```\n\n- getPropertyValue: com esse método você consegue acessar o valor de uma propriedade inline.\n\n```js\ndocument.body.style.getPropertyValue(\"background\"); // blue\n```\n\n- removeProperty: com esse método você consegue remover uma propriedade inline.\n\n```js\ndocument.body.style.removeProperty(\"background\");\n```\n\n> O getComputedStyle funciona apenas para leitura. Você conseguirá acessar a informação sobre estilo de qualquer elemento ou pseudo elemento, mas não conseguirá fazer alterações.\n\n#### E os estilos que não são inlines?\n\nEscrever estilos inline não é algo muito comum, por isso também conseguimos acessar os estilos computados, aquele que definimos na nossa folha de estilo. Para isso podemos acessar e manipular diretamente nossa folha de estilos.\n\nExecute o trecho de código abaixo no console do seu navegador:\n\n```js\ndocument.styleSheets;\n```\n\nCom ele você vai ter acesso a todas as folhas de estilos declaradas no head do seu html.\n\nEssas folhas de estilos são retornada em formato de lista(parece, mas não é um array) e você pode acessar por meio do índice.\n\n```js\ndocument.styleSheets[1];\n```\n\nDaqui em diante recomendo executar os testes em outro local, pois esse blog é feito com tailwind css e a manipulação da folha de estilo fica mais complicada.\n\nAcesse essa [página](https://crisgon.github.io/30Days30Sites/email/index.html) e execute os comando no console dela.\n\n```js\ndocument.styleSheets[0].cssRules;\n```\n\nAo executar o código acima você terá acesso a todos o css presentes na folha de estilo. Seguindo a mesma lógica anterior você pode acessar os elementos por meio de índice.\n\n```js\ndocument.styleSheets[0].cssRules[3];\n```\n\nNo código acima eu estou acessando a declaração de estilo do body da página.\n\n```js\ndocument.styleSheets[0].cssRules[3].style.background = \"red\";\n```\n\nAcessando a propriedade style conseguimos adicionar ou alterar qualquer propriedade CSS, mas sem escrever estilos inlines.\n\nRecomendo que brinque um pouco mais com essa api mudando os índices e alterando o CSS de diversos elementos.\n\n### Conclusão\n\nAssim como o DOM o CSSOM é uma representação em forma de arvore utilizada pelos navegadores para o processo de renderização.\n\nPodemos acessar todo o CSS da página e manipulá-lo livremente utilizando javascript. Saber executar esse tipo de operação é essencial para compreender ferramentas de CSS como styled componentes, linária etc.\n\nO conhecimento de base é o mais importante, mas é constantemente negligenciado.\nNo contexto do desenvolvimento web, conhecer html, css, javascript e como o navegador funciona é essencial. Com essa base sólida, você vai conseguir aprender qualquer tecnologia que derive desses fundamentos.\n\n### Muito obrigado!!\n\nObrigado por ter chegado até aqui!\n\nEspero que tenha aprendido algo novo ao longo dessa leitura.\n\nAté a próxima!\n\n### Referências\n\n[CSS Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model)\n\n[Constructing the Object Model](https://web.dev/articles/critical-rendering-path/constructing-the-object-model?hl=pt-br#document_object_model_dom)\n\n[CSSOM — Modelo de Objeto CSS]()\n\n[An Introduction and Guide to the CSS Object Model (CSSOM)](https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/?ref=dailydev)\n"},{"@type":"BlogPosting","headline":"Entendendo renderização no browser: DOM","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":802,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-09-17-processo-renderizacao-no-browser","datePublished":"Tue Sep 17 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Sep 17 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nConhecer bem a ferramenta com a qual trabalhamos é um passo importante\npara evoluir em nossa carreira. Já imaginou um eletricista que não entenda\ncomo a corrente elétrica funciona? E já pensou em um desenvolvedor front-end que não compreenda\ncomo os navegadores funcionam? Pois é, isso é algo muito comum. Pouquíssimos desenvolvedores front-end\nentendem o processo que o navegador segue para montar uma página. E, apesar de ser um processo simples,\nele é muito importante e, infelizmente, ignorado.\n\nHoje vamos começar uma jornada para entender o processo realizado pelos navegadores cada vez que criamos uma tag HTML, manipulamos algo com JavaScript ou mudamos uma cor com CSS.\n\n### O que é renderização?\n\nQuando construímos uma casa, passamos por diversas etapas.\nPrimeiro, fazemos a fundação, depois construímos as paredes, adicionamos o telhado, fazemos o acabamento (reboco, piso etc.) e, por fim,\nadicionamos os móveis e eletrodomésticos.\nA construção de um site segue um processo semelhante. Primeiro, criamos a fundação (HTML), depois adicionamos o acabamento (CSS) e, por fim, a interatividade (JavaScript).\nEm outras palavras, a renderização é o processo pelo qual o navegador transforma o código em algo visual e interativo para o usuário.\n\n### O processo de renderização\n\nA renderização de uma página web é um processo complexo, por isso o navegador divide essa renderização em pequenas atividades, como construção do DOM e do CSSOM, paint, repaint, flow e reflow.\n\n**São muitos conceitos, porém hoje iremos focar nosso estudo no DOM.**\n\n#### DOM\n\nO DOM (Document Objet Model) é uma representação em forma de estrutura de dados utilizada para representar hierarquicamente um documento html. A palavra hierarquicamente é importante, pois o DOM tem o visual de uma árvore, onde cada elemento é um nó que pode ter filhos que também podem ter filhos. Exatamente como na imagem abaixo:\n\n![Representação da árvore DOM](/assets/img/dom-tree.png)\n\nNo código essa representação ficaria assim:\n\n```html\n\n\n \n Um título\n \n \n Um link\n
Um cabeçalho
\n \n\n```\n\n> Os navegadores utilizam essa representação, seguindo os padrões W3C [DOM](https://dom.spec.whatwg.org/) e [WHATWG DOM](https://dom.spec.whatwg.org/), como um guia para identificar quais elementos devem ser renderizados na tela e qual a hierarquia eles devem seguir.\n\n#### Estrutura do DOM\n\nO DOM é composto por diversos objetos, são eles: document, nodes, elements, attributes e texto.\n\n- Document(documento): Essa é a raiz da nossa árvore, a tag ``\n- Node(nó): Cada parte da nossa árvore é um nó. O document é um nó, um elemento é um nó e os filhos desse elemento também é um nó.\n- Element(elemento): O nó do tipo elemento representa uma tag. A tag `
` é um nó do tipo elemento.\n- Attribute(atributo): Esse objeto representa o atributo de cada elemento. Class é o atributo da nossa tag div `
`.\n- Text(texto): Geralmente esse é o último nível da árvore. O texto que vai ser exibido em tela.\n\n> Todos os objetos que compõem o DOM podem ser manipulados utilizando javascript através da api DOM disponível em todos os navegadores modernos.\n\n#### Manipulando o DOM\n\nNo desenvolvimento moderno, com ferramentas como React, Vue ou Angular, a necessidade de manipular diretamente o DOM tem se tornado cada vez mais rara.\n\nIsso ocorre porque cada atualização no DOM é um processo custoso em termos de desempenho. Tecnologias como React foram criadas justamente para otimizar essas operações, permitindo a manipulação eficiente da interface sem sacrificar a performance. No entanto, há cenários específicos em que a manipulação direta do DOM ainda será necessária, e quando esse momento chegar, é importante estar preparado(a).\n\nPara acessar e manipular um elemento do DOM pela primeira vez, abra o console do navegador e execute o seguinte código:\n\n```js\nconst elemento = document.getElementById(\"estruturadodom\");\nelemento.textContent = \"Manipulando o DOM\";\n```\n\n1. Na primeira linha buscamos um elemento que tem o id `estruturadodom`, cada seção do meu blog tem o titulo como id.\n\n2. Na segunda linha alteramos a propriedade textContent do nosso elemento.\n\nEsse trecho foi para exemplificar, por isso a simplicidade. Grande parte das iterações que você encontra ao longo da internet acontecem por meio de alterações e atualizações do DOM.\n\nRecomendo acessar os sites que você já tem costume e começar a analisar as iterações que acontecem e se possível tente replicá-las. Esse é um ótimo exercício para aumentar sua fluência\nem manipulação de DOM.\n\n### Conclusão\n\nO DOM é uma representação em forma de arvore utilizada pelos navegadores para o processo de renderização.\n\nPodemos acessar elementos dessa árvore e manipulá-los livremente utilizando javascript. Saber executar esse tipo de operação é essencial para compreender frameworks e bibliotecas como react, angular e vue.\n\nO conhecimento de base é o mais importante, mas é constantemente negligenciado.\nNo contexto do desenvolvimento web, conhecer html, css, javascript e como o navegador funciona é essencial. Com essa base sólida, você vai conseguir aprender qualquer tecnologia que derive desses fundamentos.\n\n### Muito obrigado!!\n\nObrigado por ter chegado até aqui!\n\nEspero que tenha aprendido algo novo ao longo dessa leitura.\n\nAté a próxima!\n\n### Referências\n\n[MDN - O que é o DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction)\n\n[Alura - O que é o DOM](https://www.alura.com.br/artigos/o-que-e-o-dom)\n\n[Hostinger - O que é o DOM](https://www.hostinger.com.br/tutoriais/dom-o-que-e)\n"},{"@type":"BlogPosting","headline":"O poder da URL como state","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1338,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-08-20-url-como-estado-da-aplicacao","datePublished":"Tue Aug 20 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Aug 20 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nCom o passar dos anos, as aplicações web se tornaram cada vez mais interativas, e controlar o estado delas virou algo essencial. Frameworks como React, Vue e Angular ganharam popularidade porque facilitam a gestão de estados complexos. Um simples useState, por exemplo, já nos dá total controle sobre o estado da aplicação. Mas hoje, não vou falar sobre useState ou qualquer outra solução que venha de um framework. Quero focar em um dos principais pilares da web, que sempre esteve presente em todas as mudanças e continuará sendo essencial no futuro: a URL!\n\n_Para exemplificar o uso da URL como state de uma aplicação irei abordar exemplos utilizando o react, porém a ideia central pode ser aplicada com qualquer outro framework/lib ou usando apenas JS_.\n\n### Sem mais delonga, vamos ao que interessa!\n\nVocê acabou de receber uma tarefa em que é necessário construir uma página com os seguintes requisitos:\n\n- A pagina deve exibir uma listagem\n- A pagina deve ter um filtro de busca que filtra os dados da tela\n- A pagina deve ter um filtro de stock que filtra os dados da tela\n- A pagina deve ter um filtro de status que filtra os dados da tela\n\n![Listagem com filtros](/assets/img/lista-de-produtos.png)\n\nAo analisar a imagem e os requisitos da tarefa, identificamos a necessidade de pelo menos três estados apenas para controlar o que será exibido na tela. São eles:\n\n- Estado para stock\n- Estado para categoria\n- Estado para busca\n\nAté aqui nenhum problema... Podemos simplesmente definir 3 useStates e vida que segue:\n\n```tsx\n\nexport function HomePage() {\n const [stock, setStock] = useState();\n const [category, setCategory] = useState();\n const [search, setSearch] = useState();\n\n ...\n}\n\n```\n\nSua tarefa foi finalizada, porém surgiu a necessidade de persistir os dados ao atualizar a página. Para resolver esse problema, você decide salvar as informações dos filtros no localStorage, garantindo a persistência dos dados mesmo quando a página for atualizada.\n\n```tsx\nexport function HomePage() {\n const [stock, setStock] = useState(getAndParseFromLocalStorage(\"stock\"));\n const [category, setCategory] = useState(getAndParseFromLocalStorage(\"category\"));\n const [search, setSearch] = useState(getAndParseFromLocalStorage(\"search\"));\n\n function getAndParseFromLocalStorage(key: string) {\n const data = localStorage.getItem(key);\n\n if(!data) return null;\n\n return JSON.parse(data);\n }\n ...\n}\n```\n\nAlgumas semanas se passaram e, além de persistir os dados ao atualizar a tela, o cliente reportou que, ao aplicar o filtro e enviar o link da tela para seus colegas de trabalho, o filtro precisa ser refeito. Isso é ruim, pois seria muito mais prático compartilhar exatamente a mesma visão que ele teve ao aplicar os filtros, como acontece quando ele pesquisa no Google e envia o link para alguém.\n\n> [Uma pesquisa no google por vídeos com duração de 4-20 minutos sobre o que é uma URL](https://www.google.com/search?q=o+que+%C3%A9+uma+url&sca_esv=fb518e85c273ed51&sca_upv=1&tbs=dur:m&tbm=vid&sxsrf=ADLYWIKMFKUsyMV9rclKYheZyfEap7N6mA:1723198462234&tbas=0&source=lnt&sa=X&ved=2ahUKEwjD99_B1ueHAxUspJUCHdlVARQQpwV6BAgCEA0&biw=1920&bih=962&dpr=2)\n>\n> Ao acessar essa URL acima você vai ter acesso a mesma pesquisa que eu ou que qualquer outra pessoa.\n\nVocê já deve ter entendido que para resolver esse e os outros problemas citados anteriormentes podemos usar o poder da URL.\n\n### Persistindo dados na URL\n\nAntes de prosseguir é importante entender sobre a composição de uma URL.\n`https://www.youtube.com/results?search_query=dance+music`\n\nAo analisar a url acima, podemos dividi-la em 6 partes, sendo elas:\n\n- Protocolo (`https://`)\n- Subdomínio: (`www`)\n- Domínio: (`youtube`)\n- Top-Level Domain: (`com`)\n- Caminho do recurso: (`results`)\n- Query String: (`search_query=dance+music`)\n\nNesse cenário, o que mais nos interessa é a query string, a parte final da URL.\nUma query string é um conjunto de `chave=valor` separado por um `=`. O trecho de query string é separado do resto da url por um `?` e podemos ter várias query strings separadas por um `&`.\n\nAlguns exemplos de ulr com query string:\n\n- `https://www.youtube.com/results?search_query=dance+music`\n- `https://www.facebook.com/games/instantgames/category?category=248343760122557&sort_type=new_releases`\n- `https://github.com/vercel/next.js/issues?page=2&q=arrow+function`\n\n![URL explicada](/assets/img/url.png)\n\nPara saber mais sobre a estrutura de uma URL recomendo a leitura do artigo [Anatomia de uma URL](https://ibrahimcesar.cloud/blog/anatomia-de-uma-url/).\n\n#### Como usar a URL como state?\n\nNas URLs acima você pode ter notado algumas informações interessantes, como categoria selecionada ou número da página. Podemos facilmente recuperar e atualizar essas informações em nossa aplicação.\n\nPensando no nosso problema inicial, nossa URL poderia ficar dessa forma:\n`https://www.meusite.com/pagina-da-produtos?stock=2&category=beauty&search=lipstick`\n\n- stock=2\n- category=beauty\n- search=lipstick\n\nE o nosso código ficaria assim:\n\n```tsx\nimport { useSearchParams } from 'react-router-dom';\n\nexport function HomePage() {\n const [searchParams, setSearchParams] = useSearchParams();\n\n function submitForm(e) {\n e.preventDefault();\n const search = e.currentTarget['search']?.value;\n const category = e.currentTarget['category']?.value;\n const stock = e.currentTarget['stock']?.value;\n\n setSearchParams({ search, category, stock });\n }\n\n ....\n}\n```\n\nPor fim, nossa listagem precisa capturar as informações da URL. Podemos fazer isso usando o `searchParams`, que é retornado pelo`useSearchParams()`. Ao recuperar essas informações e aplicar os filtros, nosso código ficará assim:\n\n```tsx\nimport { useSearchParams } from 'react-router-dom';\n\nexport function Home() {\n const [data, setData] = React.useState([]);\n const [searchParams] = useSearchParams();\n function filterData(data) {\n let filterValues = {};\n\n // Populando filterValues com os parâmetros de busca\n searchParams.forEach((v, k) => {\n filterValues[k] = v;\n });\n\n // Se não houver nenhum filtro, retorna a lista completa\n if (Object.keys(filterValues).length === 0) {\n return data;\n }\n\n return data.filter((item) => {\n let isMatch = true;\n\n // Verificação dos filtros\n if (filterValues.category && item.category !== filterValues.category) {\n isMatch = false;\n }\n\n if (filterValues.stock && item.stock !== Number(filterValues.stock)) {\n isMatch = false;\n }\n\n if (\n filterValues['search'] &&\n !item.description\n .toLowerCase()\n .includes(filterValues['search'].toLowerCase())\n ) {\n isMatch = false;\n }\n\n return isMatch;\n });\n }\n```\n\nPara entender mais sobre o funcionamento você pode ver e editar o código que acabamos de construir no stackblitz. Importante ressaltar que para funcionar você deve abrir o projeto em uma nova aba.\n\n\n\n### URL State não é bala de prata!\n\nComo qualquer tecnologia, é importante analisar cuidadosamente antes de utilizar o URL State.\n\nAqui estão alguns casos em que o URL State pode ser útil:\n\n- Cenários em que precisamos manter a persistência de filtros ou estados entre o histórico de navegação.\n- Situações em que compartilhar a URL com filtros ou estados aplicados é uma exigência.\n- Cenários em que é necessário um bom SEO e onde diversos estados de uma aplicação precisam ser indexáveis.\n\nPor outro lado, existem cenários em que o uso do URL State pode não ser a melhor alternativa. Alguns exemplos são:\n\n- Quando o estado é muito grande e complexo. As URLs são ótimas para informações simples, mas se você precisa armazenar um estado complexo, com vários níveis de aninhamento, a URL não é a melhor opção.\n- Quando o estado contém dados sensíveis. Nesses casos, para garantir a segurança e a privacidade, não é aconselhável expor essas informações na URL.\n\nAlém desses pontos, é importante ter cuidado com o uso excessivo do URL State. Dependendo de como a URL é manipulada, pode haver impacto no desempenho da aplicação, especialmente se o estado for muito grande ou precisar ser processado frequentemente. Em alguns casos, cada alteração na URL pode causar a rerenderização de toda a cadeia de componentes, como no React, por exemplo.\n\nNa maioria dos casos, você não precisará usar a URL como state. Analise cuidadosamente cada cenário antes de adicionar estado às suas URLs, pois, apesar dos benefícios, há desvantagens a serem consideradas, além do custo de manutenção.\n\n### Muito obrigado!!\n\nObrigado por ter chegado até aqui!\n\nEspero que tenha aprendido algo novo ao longo dessa leitura.\n\nAté a próxima!\n"},{"@type":"BlogPosting","headline":"Sua vida não é só trabalho!","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1021,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-07-08-sua-vida-nao-e-so-trabalho","datePublished":"Mon Jul 08 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Mon Jul 08 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nEu não costumo postar conteúdos não técnicos neste blog...\n\nMeu objetivo principal é escrever sobre programação e minha carreira. Porém, ao ler o blog do [Willian Justen](https://willianjusten.com.br/), percebi que nem tudo que envolve minha carreira é sobre tecnologia. Então, decidi compartilhar um pouco sobre o período em que fiquei desempregado e como isso me afetou.\n\nO texto é apenas um desabafo, um lembrete para mim mesmo e, com certeza, um conselho que meu eu do passado gostaria de ter recebido.\n\n![Homem triste](/assets/img/sad-guy.jpg)\n\n### Um breve contexto\n\nNos últimos 10 anos da minha vida, sempre tive algo para chamar de trabalho, alguns remunerados e outros não. Começou na faculdade, quando eu participava da [Tecno System](https://tecnosystemej.com.br/), uma empresa júnior de SI. Lá eu passava boa parte dos meus dias, me ocupava e sentia que tinha um propósito. Chegando ao fim da minha graduação, antes mesmo de me formar, eu já tinha iniciado no mercado de trabalho e de 2018 até 2023 eu sempre trabalhei e nunca tive a experiência de ficar 1 dia sequer desempregado.\n\nTudo isso mudou em 31/05. Diante das dificuldades que o mercado de tecnologia vinha enfrentando, acabei sendo afetado e, pela primeira vez, me vi desempregado. Até aí, tudo bem; estava tranquilo, confiante de que conseguiria outro emprego e até decidi tirar um tempo para descansar. Mas então as coisas começaram a desandar...\n\n### Caindo a ficha\n\nOs primeiros dias desempregados foram tranquilos e eu pensava: \"vou ter bastante tempo pra descansar e fazer tudo que gosto\". Mas os dias foram passando, tudo ficou monótono e eu percebi que eu tinha muito tempo e pouca coisa pra fazer.\n\nEu não tinha vontade de ler, jogar, assistir, fazer uma atividade física etc. **Eu só queria levantar da cama, sentar na frente do meu PC e trabalhar.**\n\nPassei dias assim, em uma crise existencial. Me sentindo mal e me culpando por passar os dias \"improdutivo\".\n\nSem saber o que fazer e sem coragem para conversar com meus amigos sobre o assunto por vergonha de não ter um emprego.\n\nDepois de muitos dias triste e reflexivo, eu percebi que sem meu emprego eu não conseguia manter um rotina saudável. Percebi que sem meu emprego eu \"não era nada\".\n\nPercebi o quanto isso era problemático!\n\n### Sua vida não é só trabalho\n\nQuase todos os dias, pelo menos 33% do nosso tempo é dedicado ao trabalho, e para pessoas que trabalham de forma remota, isso significa ficar sentado em frente a uma tela, longe dos raios solares e das interações presenciais. Quando falamos de pessoas que trabalham com programação, geralmente esse tempo é ainda maior, pois muitas vezes programar se torna um hobby e o lazer também acontece na frente do computador, provavelmente no mesmo ambiente da jornada de trabalho diária.\n\nEu estava exatamente nessa situação... Mas depois de muita reflexão, entendi que precisava cuidar mais de mim e fazer coisas que me tirassem da bolha na qual estava imerso todos os dias, durante e depois do trabalho.\n\n### Tenha momentos de lazer que não estejam diretamente ligados ao seu trabalho\n\nGrande parte do meu lazer se resumia a atividades diretamente ligadas ao computador, minha ferramenta de trabalho.\n\nQuando não estava trabalhando, eu estava:\n\nEstudando programação\nAssistindo vídeos no YouTube\nLendo mangás online\nJogando videogame\nPercebe como grande parte do meu lazer estava diretamente ligada à minha atividade principal do dia? Ficar sentado em frente ao computador...\nIsso estava se tornando um grande problema, então decidi tentar me desligar do mundo virtual e pra isso eu:\n\n- Peguei minha paixão por animes e mangás e a transformei em algo palpável. Comecei a colecionar mangás físicos para fazer leituras periódicas e isso me levou a gravar pequenos vídeos resumindo minhas leituras. Também comecei a colecionar action figures dos meus personagens favoritos. Voltei a assistir animes, mas longe do computador, reservando um momento para ligar a televisão e curtir um bom episódio.\n\n- Comecei a fazer aulas de teclado, o que tem sido muito bom. Mesmo sabendo tocar muito pouco, a sensação de aprender algo novo é surreal.\n\n- Iniciei aulas de natação para enfrentar um trauma, e com certeza essa foi uma das melhores coisas que fiz em 2024.\n\n- Comprei uma bicicleta e passei a pedalar durante as noites, sem pretensão de me tornar alguém que pedala 30 ou 40 km. Pedalo para exercitar meu corpo, mas principalmente porque é muito bom ver pessoas na rua, observar a vida acontecendo e sentir o vento no rosto.\n\n- Também comecei a fazer pilates para cuidar da minha coluna :)\n\n### Você precisa estar bem pra trabalhar bem\n\nTenho preenchido minha vida com muitas coisas, mas não sou o melhor nadador, não leio tanto quanto gostaria, não sou o melhor ciclista e nem evoluí tanto tocando teclado como imaginei. Mas tudo isso são apenas detalhes... O mais importante tem sido aproveitar o momento e fazer coisas diferentes que me deixam feliz.\n\nPara mim, era muito comum parar de trabalhar e passar horas na frente do computador sem fazer nada, mas com a necessidade de estar lá sem nenhuma explicação. Atualmente, eu passo dias sem ligar o computador nos meus momentos de lazer; ligo apenas quando é necessário, e isso tem me feito muito bem, pois tenho conseguido balancear minha vida pessoal e profissional.\n\n> Sua vida não é só trabalho e ele não te define.\n\nO trabalho faz parte da sua vida e está ali para cumprir um papel importante, mas não pode ser o astro principal. Não me entendam mal, sei que existem momentos em que vamos precisar abrir mão do lazer para alcançar alguns objetivos, mas isso não deve ser a regra, e sim a exceção.\n\nVocê precisa estar bem mentalmente para conseguir dar o seu melhor e ser impactante no seu trabalho, e você só vai conseguir esse feito tendo uma vida além do trabalho. Pelo menos comigo tem sido assim! ;)\n\n### Muito obrigado!!\n\nObrigado por ter chegado até aqui!\n\nEu comecei a escrever este artigo no dia 23 de agosto de 2023 e só consegui finalizar e ter coragem de publicar quase um ano depois.\n\nNão escrevi com o intuito de dar lição de moral ou dizer como você deve viver sua vida. Escrevi pensando no que poderia ter ajudado o Cristiano de dois anos atrás, mas, se este texto te ajudou de alguma forma, fico extremamente feliz!\n\nAté a próxima!\n"},{"@type":"BlogPosting","headline":"Padrões React: Hooks","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2051,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2024-01-25-react-patterns-hooks","datePublished":"Thu Jan 25 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Thu Jan 25 2024 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nFala, galera! Esse artigo faz parte de uma série focada em padrões do React. Recomendo dar uma conferida nos últimos posts:\n\n- [Container & presentational](https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational).\n- [Higher-Order Components](https://www.cristiano.dev/blog/2023-08-30-react-patterns-hocs-components-de-ordem-superior).\n- [Render Props](https://www.cristiano.dev/blog/2023-09-14-react-patterns-render-props)\n\nNesse artigo iremos falar sobre o padrão do React que pode ser utilizado para resolver todos os problemas que são resolvidos com\nos padrões que vimos nos artigos passados.\n\nEsse padrão é conhecido como hook pattern.\nSe você teve contato com react nos últimos 5 anos com certeza deve conhecer os famosos hooks, mas se esse assunto for uma novidade pra você, vamos a um breve resumo.\n\n### O que são os hooks?\n\nOs react hooks são funções especiais, sempre nomeadas com o prefixo \"use\", que são utilizadas pelo react para adicionar interatividade a componentes funcionais. Mas esse não é a única utilidade dos hooks, com eles podemos:\n\n- gerenciar estado e ciclo de vida dos componentes com uma api simplificada.\n- reutilizar a lógica com estado sem alterar a hierarquia dos componentes.\n- extrair lógica de componentes e testá-las de forma independente.\n\nE muito mais!! Se quiser um pouco mais de detalhes sobre alguns hooks específicos, recomendo conferir minha série de artigos focadas em [react hooks](https://cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate).\n\n### Hook pattern\n\nOk... até agora falamos resumidamente sobre os hooks e sobre alguns benefícios, porém não falamos do \"padrão hooks\".\n\nQuando falamos em hooks a primeira coisa que as pessoas pensam são useState e useEffect. Se o assunto for custom hooks o pensamento é o de escrever hooks genéricos que vão ficar na pastinha hooks esquecidos para serem utilizados em situações pontuais, como hooks de manipulação de DOM, por exemplo.\n\nUma forma muito comum de utilizar custom hooks é para escrever código que vai ser compartilhado em diversos contextos. Um bom exemplo seria um hook responsável por verificar se o navegador está online ou offline.\n\n#### Essa seria a implementação do hook:\n\n```jsx\nimport { useEffect, useState } from \"react\";\n\nexport function useHasInternetConnection() {\n const [isOnline, setIsOnline] = useState(true);\n\n useEffect(() => {\n function handleStatusChange() {\n setIsOnline(navigator?.onLine);\n }\n\n window.addEventListener(\"online\", handleStatusChange);\n\n window.addEventListener(\"offline\", handleStatusChange);\n\n return () => {\n window.removeEventListener(\"online\", handleStatusChange);\n window.removeEventListener(\"offline\", handleStatusChange);\n };\n }, [isOnline]);\n\n return {\n isOnline,\n };\n}\n```\n\n#### E esse seria o uso do hook\n\n```jsx\nfunction App() {\n const { isOnline } = useHasInternetConnection();\n return
Você está {isOnline ? \"online\" : \"offline\"}
;\n}\n```\n\n### Indo além\n\n> Podemos sair do uso óbvio e ir além quando falamos de hooks. Basta você lembrar que hooks são funções e, conforme vimos no artigo [Padrões React: Render Props](https://www.cristiano.dev/blog/2023-09-14-react-patterns-render-props), funções javascript são de primeira classe. Ou seja, podemos retornar funções e receber funções como argumentos, logo, é possível compor hooks que recebem funções e/ou retornam funções.\n\nVocê pode utilizar custom hooks para extrair lógica de negócio de seus componentes e separar responsabilidades, mesmo que esse lógica não seja reaproveitada em N lugares.\n\nPor exemplo, o código abaixo representa um todo list com as funcionalidades e adicionar, remover e completar tarefas. É uma lógica simples, mas imagine que ela é mais complexa, existem chamadas na api e tratamentos de erros para cada uma das ações.\n\n```jsx\nimport { useState, useMemo } from \"react\";\nimport \"./App.css\";\n\nfunction App() {\n const [todo, setTodo] = useState(\"\");\n const [list, setList] = useState([]);\n\n function addTodo() {\n if (!todo) return;\n\n const newTodo = {\n value: todo,\n id: crypto.randomUUID(),\n completed: false,\n };\n setList(oldState => [...oldState, newTodo]);\n setTodo(\"\");\n // chamada na api\n // tratamentos de erros\n }\n\n function removeTodo(id) {\n setList(oldState => oldState.filter(t => t.id !== id));\n // chamada na api\n // tratamentos de erros\n }\n\n function toggleTodo(id, checked) {\n setList(oldState =>\n oldState.map(t => {\n if (t.id === id) return { ...t, completed: checked };\n return t;\n }),\n );\n // chamada na api\n // tratamentos de erros\n }\n\n return (\n <>\n
Todo
\n
\n setTodo(e.target.value)} />\n \n
\n {list.map(item => (\n
\n toggleTodo(item.id, e.target.checked)}\n />\n \n {item.value}\n
\n \n \n ))}\n \n
\n \n );\n}\n```\n\n#### Ao usar custom hooks teremos o seguinte resultado:\n\nEm um arquivo teremos toda nossa lógica de negócios e estados concentrados em um custom hook:\n\n```jsx\nimport { useState } from \"react\";\n\nexport function useTodo() {\n const [todo, setTodo] = useState(\"\");\n const [list, setList] = useState([]);\n\n function addTodo() {\n if (!todo) return;\n\n const newTodo = {\n value: todo,\n id: crypto.randomUUID(),\n completed: false,\n };\n setList(oldState => [...oldState, newTodo]);\n setTodo(\"\");\n // chamada na api\n }\n\n function removeTodo(id) {\n setList(oldState => oldState.filter(t => t.id !== id));\n // chamada na api\n }\n\n function toggleTodo(id, checked) {\n setList(oldState =>\n oldState.map(t => {\n if (t.id === id) return { ...t, completed: checked };\n return t;\n }),\n );\n // chamada na api\n }\n\n return {\n todo,\n list,\n addTodo,\n removeTodo,\n toggleTodo,\n hanldleTodo: setTodo,\n };\n}\n```\n\nE no arquivo de UI teremos o seguinte código:\n\n```jsx\nimport \"./App.css\";\nimport { useTodo } from \"./useTodo\";\n\nfunction App() {\n const { todo, list, addTodo, removeTodo, toggleTodo, hanldleTodo } =\n useTodo();\n\n return (\n <>\n
Todo
\n
\n hanldleTodo(e.target.value)} />\n \n
\n {list.map(item => (\n
\n toggleTodo(item.id, e.target.checked)}\n />\n \n {item.value}\n
\n \n \n ))}\n \n \n \n );\n}\n```\n\nDessa forma teremos uma separação muito clara entre lógica de negócios e camada de apresentação. Também conseguimos escrever um teste que valide apenas a regra de negócio e um teste que valide nossa UI de forma independentes.\n\nAlgumas vantagens ao utilizar hooks patterns:\n\n✅ Possibilidade de construir componentes com lógica e estados sem utilizar classes.\n\n✅ Simplificação dos componentes, pois é possível construir um componente que só é responsável por renderizar UI.\n\n✅ Compartilhar e reutilizar lógica não visual entre componentes sem utilizar Render Props ou HOCs\n\n✅ Com hooks não precisamos utilizar o padrão [Container & Presentational](https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational) para separar lógica de negócio da apresentação\n\n✅ Hooks tornam o código mais conciso e legível, especialmente para componentes mais complexos, pois a lógica de negócio pode ser abstraída em custom hooks que serão testados de forma independentes.\n\n### Quando utilizar?\n\nA ideia de separar lógica de negócio em custom hooks não é algo que eu costumo ver sendo compartilhado com frequência, pois, ao pesquisar por esse tema vejo várias pessoas utilizando [Container & Presentational](https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational) para separar lógica da apresentação.\n\nEu descobri a possibilidade de utilizar custom hooks para separar lógica de negócios da apresentação enquanto navegava no site do [Kent C. Dodds](https://kentcdodds.com/) , desde então, sempre que sinto que meu componente possui muitos estados, funções e lógica de negócio de modo geral, tento fazer uma separação entre apresentação e lógica usando custom hooks.\n\nGeralmente meus componente ficam dessa forma:\n\n```jsx\n📁src/\n|-- 📁components/\n|-- 📁modules/\n| |-- 📁cart/\n| | |-- 📄Cart.tsx\n| | |-- 📄Cart.css\n| | |-- 📄useCart.ts\n| |-- 📁checkout/\n| | |-- 📄Checkout.tsx\n| | |-- 📄Checkout.css\n| | |-- 📄useCheckout.ts\n|-- 📁services/\n| |-- 📄api.js\n```\n\nFazer esse tipo de separação me ajuda a manter o código organizado e conciso. Outro ganho que sinto ao utilizar custom hooks para extrair regras de negócio é que durante esse processo eu sempre me questiono se o meu hook tem muita responsabilidade ou se ele deveria se tornar N outros hooks.\n\nAlém disso, utilizar custom hooks me dá a possibilidade de escrever testes focados apenas em regra de negócio ou apenas focado em UI fazendo mocks dos meus custom hooks.\n\n### Caso queira ver o código final em ação\n\n\n\n### Isso é tudo, pessoal!\n\nFico feliz que você chegou até aqui e espero que tenha aprendido algo novo ao longo dessa leitura. Em breve irei trazer mais artigos sobre o universo frontend. Até mais!\n\n### Referências\n\n- [Hooks Pattern](https://javascriptpatterns.vercel.app/patterns/react-patterns/hooks-pattern)\n- [Documentação do react](https://legacy.reactjs.org/docs/render-props.html)\n"},{"@type":"BlogPosting","headline":"Padrões React: Render Props","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1554,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2023-09-14-react-patterns-render-props","datePublished":"Thu Sep 14 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Thu Sep 14 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nFala, galera! Esse artigo faz parte de uma série focada em padrões do React. Recomendo dar uma conferida nos últimos posts:\n\n- [Container & presentational](https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational).\n- [Higher-Order Components](https://www.cristiano.dev/blog/2023-08-30-react-patterns-hocs-components-de-ordem-superior).\n\nHoje iremos falar sobre o padrão render props, mais um padrão que faz uso das características das [funções de primeira classe do javascript](https://diegomariano.com/funcoes-de-primeira-classe-javascript/).\n\nSegundo a [documentação do react](https://pt-br.legacy.reactjs.org/docs/render-props.html):\n\n> O termo “render prop” se refere a uma técnica de compartilhar código entre componentes React passando uma prop cujo valor é uma função.\n\n#### O que isso quer dizer?\n\nDe forma bem simplificada, uma render prop é uma função que irá ser responsável por renderizar um componente qualquer. Dessa forma é possível compartilhar estados e funções entre componentes de maneira facilitada.\n\nEssa é um exemplo de uma render prop:\n\n```jsx\n
Hello {name}
} />\n```\n\nPara fazer mais sentido, vamos aplicar render props em um exemplo mais detalhado.\n\n#### O problema\n\nVocê possui um componente que é responsável por capturar as coordenadas de latitude e longitude do usuário. O código abaixo faz exatamente isso.\n\n```jsx\nfunction Geolocation() {\n const [coords, setCoords] = useState({ lat: null, long: null });\n\n function getCoords() {\n if (window.navigator && window.navigator.geolocation) {\n window.navigator.geolocation.getCurrentPosition(position => {\n setCoords({\n lat: position.coords.latitude,\n long: position.coords.longitude,\n });\n });\n }\n }\n\n return (\n
\n
Coordenadas
\n \n
\n {coords.lat} {coords.long}\n
\n
\n );\n}\n```\n\nO resultado do código acima é o seguinte:\n\n![Print do resultado do component que captura a localização do usuário](/assets/img/render-props-example-1.png)\n\nImagine o cenário em que você precisa construir dois cards, um que pega a coordenada do usuário assim que a tela carrega e outro que pega a coordenada apenas quando o usuário clica no botão. Como você resolveria isso?\n\nUma forma bem simples de resolver esse problema é replicar a lógica nos dois cards.\n\n```jsx\nfunction CardWithGeolocationWhenPageLoad() {\n const [coords, setCoords] = useState({ lat: null, long: null });\n\n useEffect(() => {\n getCoords();\n }, []);\n function getCoords() {\n if (window.navigator && window.navigator.geolocation) {\n window.navigator.geolocation.getCurrentPosition(position => {\n setCoords({\n lat: position.coords.latitude,\n long: position.coords.longitude,\n });\n });\n }\n }\n\n return (\n
\n
Coordenadas quando a página carregar
\n
\n {coords.lat} {coords.long}\n
\n
\n );\n}\n```\n\n```jsx\nfunction CardWithGeolocationWhenButtonIsClicked() {\n const [coords, setCoords] = useState({ lat: null, long: null });\n\n function getCoords() {\n if (window.navigator && window.navigator.geolocation) {\n window.navigator.geolocation.getCurrentPosition(position => {\n setCoords({\n lat: position.coords.latitude,\n long: position.coords.longitude,\n });\n });\n }\n }\n\n return (\n
\n
Coordenadas quando o botão for clicado
\n \n
\n {coords.lat} {coords.long}\n
\n
\n );\n}\n```\n\nProblema resolvido, certo?\nImagine que agora nossos cards precisam fazer uma chamada para uma api informando quais coordenadas foram capturadas e qual o horário da captura.\n\nAi você pensa: **\"Só ir nos dois cards e adicionar essa lógica\"**. Mas e se mais uma lógica surgir? E se surgir um terceiro card que também precisa dessa lógica? A verdade é que vai chegar um momento que será insustentável manter todo esse código.\nE é ai que o render props brilha! Pois com ele vamos conseguir concentrar toda essa lógica de coordenadas em um único lugar e compartilhar com N componentes.\n\n#### Aplicando render props\n\nCom o render props nossa implementação do component `Geolocation` ficaria assim:\n\n```jsx\nfunction Geolocation(props) {\n const [coords, setCoords] = useState({ lat: null, long: null });\n\n function getCoords() {\n if (window.navigator && window.navigator.geolocation) {\n window.navigator.geolocation.getCurrentPosition(position => {\n setCoords({\n lat: position.coords.latitude,\n long: position.coords.longitude,\n });\n });\n }\n }\n\n return
{props.render({ coords, getCoords })}
;\n}\n```\n\nAo invés de renderizar o botão e as coordenadas, agora nossa função recebe uma prop chamada render. Essa prop é uma função que irá receber um objeto como parâmetro(poderia ser qualquer dado) e nesse objeto iremos enviar o estado coords e a função getCoords que poderão ser utilizados por qualquer componente que for passado na prop `render`.\n\nA aplicação do `Geolocation` para construir o `CardWithGeolocationWhenPageLoad` ficaria assim:\n\n```jsx\nfunction CardWithGeolocationWhenPageLoad(props) {\n useEffect(() => {\n props.getCoords();\n }, []);\n\n return (\n
\n
Coordenadas quando a página carregar
\n
\n {props.coords.lat} {props.coords.long}\n
\n
\n );\n}\n\n {\n return (\n \n );\n }}\n/>;\n```\n\nE a implementação e uso do `CardWithGeolocationWhenButtonIsClicked` também fica extremamente simples.\n\n```jsx\nfunction CardWithGeolocationWhenButtonIsClicked(props) {\n return (\n
\n
Coordenadas quando o botão for clicado
\n \n
\n {props.coords.lat} {props.coords.long}\n
\n
\n );\n}\n\n {\n return (\n \n );\n }}\n/>;\n```\n\nNotou que agora temos toda a lógica referente a coordenadas em um único local? Possibilitando que diversos componentes façam uso dessa lógica? Agora se a gente precisar fazer qualquer modificação no método `getCoords` só precisamos mexer em um único ponto.\n\nImportante! Aqui no nosso exemplo nós utilizamos uma prop chamada render, porém essa prop pode ser chamada de qualquer coisa que o resultado seria o mesmo. Basta que a prop seja uma função que receba argumentos e retorne um componente.\n\nTambém podemos utilizar o render props com os childrens do react. Dessa forma a implementação pode ser feita de uma maneira um pouquinho diferente:\n\n```jsx\nfunction Geolocation(props) {\n const [coords, setCoords] = useState({ lat: null, long: null });\n\n function getCoords() {\n if (window.navigator && window.navigator.geolocation) {\n window.navigator.geolocation.getCurrentPosition(position => {\n setCoords({\n lat: position.coords.latitude,\n long: position.coords.longitude,\n });\n });\n }\n }\n\n return
{props.children({ coords, getCoords })}
;\n}\n\n\n {({ coords, getCoords }) => {\n return (\n \n );\n }}\n;\n```\n\nA ideia é a mesma, pois o children também é uma prop do react. Esse estilo de abordagem é muito comum em libs de animações como o [react-motion](https://github.com/chenglou/react-motion).\n\nPara entender mais sobre o funcionamento você pode ver e editar o código que acabamos de construir:\n\n\n \n### Devo utilizar Render Props?\n\nAssim como os HOCs, Render Props são uma ótima solução para manter uma lógica centralizada com a possibilidade aplicá-la para N componentes.\n\nAtualmente existem formas melhores de resolver o mesmo problema que um Render Props se propões utilizando o padrão de hooks, mas esse é um papo para um próximo post.\n\nÉ importante entender que apesar de existirem formas mais mordernas de compartilhar lógica entre componentes, ainda é muito comum encontrar Render Props em aplicações modernas, um exemplo clássico são algumas libs de animações como o [react-motion](https://github.com/chenglou/react-motion)..\n\n### Isso é tudo, pessoal!\n\nFico feliz que você chegou até aqui e espero que tenha aprendido algo novo ao longo dessa leitura. Em breve irei trazer mais artigos abordando outros padrões do react. Até mais!\n\n### Referências\n\n- [Render Props Pattern](https://javascriptpatterns.vercel.app/patterns/react-patterns/render-props)\n- [Documentação do react](https://legacy.reactjs.org/docs/render-props.html)\n- [React Patterns — Começando pelo Render Props](https://medium.com/collabcode/react-patterns-come%C3%A7ando-pelo-render-props-e0040ef723ce)\n"},{"@type":"BlogPosting","headline":"Padrões React: Higher-Order Components","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":924,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2023-08-30-react-patterns-hocs-components-de-ordem-superior","datePublished":"Wed Aug 30 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Wed Aug 30 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nFala, galera! Esse artigo faz parte de uma série focada em padrões do React. Recomendo dar uma conferida no último post sobre o padrão [container & presentational](https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational).\n\nHoje iremos falar sobre um padrão que segundo a própria documentação do React não é um padrão utilizado com frequência no desenvolvimento de aplicações modernas.\n\n![Print da documentação do react falando sobre hocs](/assets/img/hoc-unused.png)\n\nPorém, ao longa sua carreira você não vai se deparar apenas com código que utiliza a última versão do React ou aquela tecnologia super em alta que todo mundo tá falando... Você vai encontrar muito código que foi construído quando as soluções disponíveis eram outras. Por isso é importante aprender alguns padrões mais antigos, mesmo que você não os utilize com frequência.\n\nO padrão que iremos abordar é o [Higher-Order Component](https://pt-br.legacy.reactjs.org/docs/higher-order-components.html), ou apenas HOC. Um padrão que você provavelmente já usou, ou passou por projetos que já utilizaram e eu posso provar...\n\n- Você já utilizou alguma lib que tinha uma sintaxe assim `export default withTheme(App)`?\n- Ou assim `export default withRouter(Header)`?\n- E assim `connect()(Meu componente)`?\n- Já esbarrou em qualquer trecho de código React que utilizava o `withAlgumaCoisa(MeuComponent)`?\n\nSe a resposta pra alguma das perguntas foi sim, então você já teve contato com um HOC. Se a resposta for não, chegou o momento de usar um HOC.\n\n### O que é um Higher-Order Component\n\nÉ importante saber que HOC não faz parte da api do React, ele é apenas um padrão que faz uso da [composição](https://pt-br.legacy.reactjs.org/docs/composition-vs-inheritance.html) disponível no React.\n\nOs Higher-Order Component são baseados nas [Higher Order Functions](https://www.alura.com.br/artigos/high-order-functions), um padrão de desenvolvimento que é comumente aplicado no javascript.\n\n> Uma Higher Order Function, ou função de primeira classe, é apenas uma função que pode receber uma função como argumento e retornar outra função.\n\n**No React todos os componentes são funções**, então a lógica é a mesma. Um component de ordem superior é apenas um component que recebe um component e retornar outro component. Antes de retornar o novo component podemos fazer verificações(uma autenticação, por exemplo) e/ou executar qualquer trecho de código que quisermos.\n\nEssa história de receber componente e retornar componente ficou confusa? Não se preocupe, pois chegou a hora da prática.\n\n### Criando um HOC\n\nVamos criar nosso primeiro HOC que terá o objetivo de buscar as permissões de um usuário na api e repassar essa informação para um component de comentários. Com base nessas permissões iremos exibir ou não um botão de apagar comentário.\n\n![Lista de comentários](/assets/img/hoc-example.png)\n\n#### A implementação do HOC fica assim:\n\n```jsx\nfunction withPermissions(WrappedComponent, userId) {\n function ComponentWithPermissions(props) {\n const [permissions, setPermissions] = useState([]);\n\n useEffect(() => {\n const userPermissions = getUserPermissions(userId);\n setPermissions(userPermissions);\n }, []);\n\n return (\n \n );\n }\n return ComponentWithPermissions;\n}\n\n// Função que faz o papel de uma chamada na api que retorna as permissões do usuário\nfunction getUserPermissions(userId) {\n const userListPermissions = {\n 1: [\"read\"],\n 2: [\"read\", \"delete\"],\n };\n\n return userListPermissions[userId];\n}\n```\n\nEsse foi nosso HOC(a função `withPermissions`), e nele recebemos 2 argumentos. O primeiro é componente que queremos tratar(encapsular com uma lógica) e o segundo é o id de um usuário qualquer.\nDentro do HOC declaramos um novo componente(`ComponentWithPermissions`) que será responsável por buscar as permissões na api e depois repassar essas permissões para o component que foi recebido como argumento. No nosso caso eu repassei todas as propriedades padrões do component usando `{...props}` e adicionei duas novas props chamadas `permissions` e `userId`. No final da função `withPermissions` nosso component `ComponentWithPermissions` é retornado com toda lógica aplicada.\n\n#### Para usar o HOC é bem simples, basta utilizá-lo como uma função normal passando os argumentos que ele necessita.\n\n```jsx\nconst CommentsUser1 = withPermissions(CommentComponent, 1);\nconst CommentsUser2 = withPermissions(CommentComponent, 2);\n\nexport default function App() {\n return (\n
\n \n\n \n
\n );\n}\n```\n\nPara ficar um pouco mais claro fiz esse desenho que ilustra como um HOC e um component encapsulado funcionam juntos. Pense em uma máquina onde uma coisa entra, passa por um processo de transformação e no final sai características diferentes:\n\n![Lista de comentários](/assets/img/hoc-desenho.png)\n\nPara entender mais sobre o funcionamento você pode ver e editar o código que acabamos de construir:\n\n\n\n### Devo utilizar um HOC?\n\nOs HOCs são uma ótima solução para manter uma lógica centralizada com a possibilidade aplicá-la para N componentes, porém esse padrão é um pouco confuso, principalmente na gestão de props que irão ser repassadas para o componente encapsulado pelo HOC.\n\nAtualmente existem formas melhores de resolver o mesmo problema que um HOC se propões utilizando o padrão de hooks, mas esse é um papo para um próximo post.\n\nÉ importante entender que apesar de não ser um padrão muito recomendado, ainda é muito comum encontrar HOCs em aplicações modernas, um exemplo clássico são os HOCs que cuidam da autenticação e autorização de usuários.\n\nSem contar os HOCs de libs externas como o [redux](https://redux.js.org/) que estão presentes em um imensidão de projetos react.\n\n### Isso é tudo, pessoal!\n\nFico feliz que você chegou até aqui e espero que tenha aprendido algo novo ao longo dessa leitura. Em breve irei trazer mais artigos abordando outros padrões do react. Até mais!\n\n### Referências\n\n- [Higher-Order Components Pattern](https://javascriptpatterns.vercel.app/patterns/react-patterns/higher-order-component)\n- [Documentação do react](https://legacy.reactjs.org/docs/higher-order-components.html)\n"},{"@type":"BlogPosting","headline":"Padrões React: Container & Presentational","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1035,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2023-08-23-react-patterns-container-presentational","datePublished":"Wed Aug 23 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Wed Aug 23 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nFala, galera! Hoje vou começar uma pequena série focada em padrões.\n\nInicialmente ela vai ser focada em padrões do React, mas futuramente pretendo expandir para padrões de projetos de modo geral.\n\nUm ponto super importante é que antes de tentar aplicar qualquer padrão de código/projeto etc é preciso entender qual problema ele vai resolver. Nunca aplique um padrão(pattern) só por capricho, pois toda escolha técnica é rodeada por prós e contras.\n\n### Qual o problema?\n\n![Linha de montagem](/assets/img/linha-de-montagem.jpg)\n\nUma das premissas dos frameworks frontends modernos, como o nosso querido react, é componentizar e escrever código com responsabilidades bem definidas. É como as antigas linhas de montagem, onde cada pessoa tem seu papel muito bem definido e essa pessoa é especialista em executar uma única função em diversos cenários. Uma pessoa especialista em apertar parafusos vai conseguir apertar o parafuso de um carro ou de um computador.\nSei que é um exemplo bem abstrato... Mas o grande ponto é entender que a separação de responsabilidades pode e deve ser aplicada na construção das suas aplicações e esse tipo de separação facilita o reaproveitamento.\n\nDepois dessa explicação você nota algum problema ao analisar o código abaixo?\n\n```tsx\nfunction MusicList() {\n const [musics, setMusics] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {}, [\n function getMusics() {\n ... alguma regra de negócio antes de buscar músicas\n setLoading(true);\n fetch(\"api-de-musicas.com\")\n .then(res => res.json())\n .then(res => {\n setMusics(res.musics);\n setLoading(false);\n });\n },\n ]);\n\n if (props.loading) {\n return
Carregando..
;\n }\n return (\n
\n {props.musics.map(music => (\n
\n
{music.name}
\n
{music.artist}
\n
\n ))}\n
\n}\n```\n\n### O padrão Container & Presentational\n\nO código acima tem um component que faz mais de uma coisa... ele não é \"especialista\" em nada. O padrão **Container & Presentational** tem o objetivo de resolver esse problema, separando lógica e regras de negócios em components do tipo container e interface em components do tipo presentational.\n\nAinda não entendeu o que diferencia um component container de um component presentational?\n\n- **Container:** Se você precisa exibir uma lista de músicas o component container não vai se preocupar em **como você vai exibir**, ele vai se preocupa com **o que vai ser exibido**. A chamada na api para buscar as músicas, o agrupamento das músicas por categoria ou qualquer tipo de tratamento será feito por esse tipo de component.\n\n- **Presentational:** Esse é um component apenas de apresentação, onde seu único objetivo é exibir informações em tela e cuidar das interações com o usuário. No exemplo da lista de músicas esse component vai ser responsável por exibir as músicas em formato de grade ou lista, exibir a capa do album quadrada ou arredondada e tudo que diz respeito a forma que a informação será apresentada, pois esse é um presentational component(component de apresentação).\n\nVamos reescrever o mesmo trecho de código que vimos anteriormente, mas agora aplicando o padrão que acabamos de aprender.\n\nExemplo de um component container:\n\n```tsx\nfunction MusicListContainer() {\n const [musics, setMusics] = useState([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {}, [\n function getMusics() {\n ... alguma regra de negócio antes de buscar músicas\n setLoading(true);\n fetch(\"api-de-musicas.com\")\n .then(res => res.json())\n .then(res => {\n setMusics(res.musics);\n setLoading(false);\n });\n },\n ]);\n\n return ;\n}\n```\n\nExemplo de um component presentational:\n\n```tsx\nfunction MusicList(props) {\n if (props.loading) {\n return
Carregando..
;\n }\n return (\n
\n {props.musics.map(music => (\n
\n
{music.name}
\n
{music.artist}
\n
\n ))}\n
\n );\n}\n```\n\n### O que ganho fazendo isso?\n\nEsse é um padrão bem simples, mas que traz alguns ganhos interessantes, são eles:\n\n- Separação das responsabilidades. No exemplo acima ficou bem claro qual component era responsável por cuidar de regras de negócio e qual é responsável apenas por apresentar dados para o usuário.\n\n- Reutilização. Nosso component de MusicList pode ser utilizado em diversos cenários em que precisamos exibir músicas. Sejam músicas de resultados de uma busca ou as músicas favoritas de um usuário.\n\n- Testabilidade. Testar components de apresentação sem regra de negócio é muito simples, pois precisamos apenas passar props e nos preocupar com o comportamento do component e não com chamadas de api e etc.\n\n### Devo utilizar sempre esse padrão?\n\nÉ importante sempre tentar separar ao máximo as responsabilidades do seu código, porém o padrão Container & Presentational não é algo mais recomendado pela comunidade, pois conseguimos fazer esse mesmo tipo de separação utilizando hooks de uma maneira bem mais elegante.\n\nMas não se espante se encontrar projetos que ainda utilizem essa abordagem, pois ela resolveu muitos problemas em tempos de components de classes. Apesar de não ser algo que você vai sair aplicando em todos os cenários no seu dia a dia, conhecer como os padrões do react foram evoluindo é essencial para entender como estamos resolvendo os problemas atuais.\n\n### Isso é tudo, pessoal!\n\nFico feliz que você chegou até aqui e espero que tenha aprendido algo novo ao longo dessa leitura. Em breve irei trazer mais artigos abordando outros padrões do react. Até mais!\n\n### Referências\n\n- [Issue - React Hooks and Container/Presenter Component Pattern #545](https://github.com/kentcdodds/ama/issues/545)\n- [Container/Presentational Pattern](https://javascriptpatterns.vercel.app/patterns/react-patterns/conpres)\n"},{"@type":"BlogPosting","headline":"Gerando OG:Images dinâmicas com NEXT JS 13","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1287,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2023-08-12-gerando-og-images-com-next-js","datePublished":"Fri Aug 18 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Fri Aug 18 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nVocê provavelmente já deve ter compartilhado um link nas N redes sociais e percebido que algumas informações de pré-visualização são carregadas. Título, descrição e até mesmo uma imagem, exatamente como no exemplo abaixo.\n\n $\"Og$ \n\nTambém pode ter acontecido um cenário onde o link compartilhado não carregou nada... 🥲\n\n![Og image twitter](/assets/img/without-og-image.png)\n\nO papel de carregar e exibir um preview do conteúdo compartilhado é de uma tecnologia chamada open graph, popularmente conhecida como og.\n\n## O que é Open Graph?\n\nOpen graph é um protocolo de internet que foi criado pelo facebook em 2010 para permitir que qualquer site possa transmitir um conjunto de metadados que podem ser utilizados por redes sociais para tornar o compartilhamento de links mais ricos e amigáveis.\n\n> O protocolo Open Graph permite que qualquer página da Web se torne um objeto rico em um gráfico social. Por exemplo, isso é usado no Facebook para permitir que qualquer página da web tenha a mesma funcionalidade que qualquer outro objeto no Facebook.\n> [fonte](https://ogp.me/)\n\nNo fim das contas, o que vamos ter são algumas tags html que representam uma longa lista de informações que vão ser utilizadas pelas redes sociais de acordo com o tipo de conteúdo.\n\nSe você inspecionar o código head do meu site, ou de qualquer outro, vai encontrar algumas tags como abaixo:\n\n```html\n\n\n\n\n```\n\nEssas são as tags obrigatórias e que irão ser responsáveis por gerar aquele card bonitinho que mostrei no inicio do texto.\n\n- **og:title:** o título da página, geralmente colocamos o mesmo título do ` `.\n- **og:type:** o tipo do conteúdo da sua página.No caso do meu blog o type é article, mas você pode usar um tipo genérico chamado website.\n- **og:url:** a url da página atual.\n- **og:image:** o link de uma imagem de alta resolução que represente o seu conteúdo.\n\nAgora você já sabe pra que serve o open graph, mas antes de colocar a mão na massa preciso falar um pouco sobre os dois serviços que vamos utilizar para gerar as imagens:\n\n- [@vercel/og](https://www.npmjs.com/package/@vercel/og) para projetos não usam o padrão `\"/app\"` do next.\n- [edge-functions](https://vercel.com/docs/concepts/functions/edge-functions).\n\nO primeiro é um pacote responsável por gerar uma imagem com base em um template e o segundo é um serviço cloud que permite que funções sejam executadas do lado do servidor de maneira extremamente rápida e econômica, pois o servidor responsável por executar a função é sempre o mais próximo do usuário.\n\n_As duas ferramentas são disponibilizadas pela [vercel](https://vercel.com/)_, a criadora e mantenedora do next.\n\n## Gerando imagens dinâmicas\n\nCaso esteja utilizando o padrão `/pages` do next você precisará instalar o `@vercel/og` como dependência do seu projeto:\n\n```bash\nnpm i @vercel/og\n```\n\nLogo após você precisa gerar um endpoint de api no next, criando o arquivo `app/og/route.tsx` se você estiver utilizando o next 13 ou o arquivo `pages/api/og.tsx` para versões inferiores a 13.\n\nA primeira coisa que você precisa fazer no seu arquivo é importar o `ImageResponse`, no meu caso a importação vem `next/server`, mas para usuários do padrão `/pages` a importação vem do `@vercel/og`\n\n```tsx\nimport { ImageResponse } from \"next/server\";\n```\n\nNa sequência vamos indicar para a vercel que queremos executar nossas funções utilizando o runtime das edge functions.\n\n```tsx\nexport const runtime = \"edge\";\n```\n\n#### O próximo passo é escrever o trecho principal do nosso código, um método GET, que irá:\n\n- Resgatar o `title` da nossa página, que será passado como parâmetros da url, utilizando o `searchParams`. Esse título será usado para gerar a imagem após ser passado como um query params em uma chamada assim: `https://seusite.com/og?title=titulo-da-sua-pagina`\n\n- Construir o template usando o `ImageResponse`. Esse template tem algumas [limitações de estilização](https://github.com/vercel/satori#css), mas nada que impeça a criação de um layout bonito.\n\nNesse momento seu código deve ser mais ou menos assim:\n\n```tsx\nimport { ImageResponse } from \"next/server\";\n\nexport const runtime = \"edge\";\n\nexport async function GET(request: Request) {\n try {\n const { searchParams } = new URL(request.url);\n\n const title = searchParams.get(\"title\") ?? null;\n\n return new ImageResponse(\n (\n \n
\n {title}\n
\n
Cristiano Gonçalves
\n \n ),\n {\n width: 1200,\n height: 630,\n },\n );\n } catch (e: any) {\n console.log(`${e.message}`);\n return new Response(`Failed to generate the image`, {\n status: 500,\n });\n }\n}\n```\n\nSe tudo ocorreu bem, você pode a acessar a url `http://locahost:3000/og?title=titulo-da-sua-pagina` você vai receber um resultado mais ou menos assim:\n\n![Og image example](/assets/img/og-image-example.png)\n\n## Utilizando as imagens geradas dinamicamente\n\nAgora que as imagens estão sendo geradas basta fazer uso nas suas páginas, no meu caso eu utilizei o `generateMetadata` do next para gerar e inserir metadados em cada página do meu site.\n\nNo exemplo abaixo tem muita informação, mas foque nas linhas iniciais onde eu faço uma chamada na api para gerar uma imagem e logo na sequência faço uso no objeto openGraph.\n\n```tsx\nexport async function generateMetadata({\n params,\n}: BlogPostProps): Promise {\n const post = getPostBySlug(params.slug);\n const featuredImage = `https://www.cristiano.dev/api/og?title=${post?.title}&date=${post?.formattedDate}`;\n const description = post?.resume ?? \"\";\n const url = `https://www.cristiano.dev/blog/${params.slug}`;\n const title = `${post?.title} | Cristiano Gonçalves`;\n const author = \"Cristiano Gonçalves\";\n\n return {\n title,\n description,\n openGraph: {\n url,\n images: featuredImage,\n title,\n description,\n type: \"article\",\n authors: author,\n },\n category: \"technology\",\n themeColor: \"black\",\n twitter: {\n site: url,\n images: featuredImage,\n title,\n description,\n card: \"summary_large_image\",\n creator: author,\n },\n };\n}\n```\n\n## Isso é tudo, pessoal!\n\nFico feliz que você chegou até aqui e espero que tenha aprendido algo novo ao longo dessa leitura.\nVocê pode ver uma aplicação real do que vimos nesse post no repositório do [meu site](https://github.com/crisgon/personal-site).\n\nQualquer duvida é só me procurar nas redes sociais ou deixar um comentário aqui em baixo.\n"},{"@type":"BlogPosting","headline":"Nasceu!! A nova versão do meu site ","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":668,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2023-08-11-nasceu-a-nova-versao-do-meu-site","datePublished":"Fri Aug 11 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Fri Aug 11 2023 08:20:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nApós 3 anos, 7 meses e 11 dias eu decidi lançar uma nova versão do meu site e gostaria de compartilhar com vocês sobre esse processo.\n\nSempre gostei de compartilhar conhecimento, seja ele escrito, por vídeos, palestras e etc. Então, ter um blog sempre foi uma prioridade em todas as vezes que pensei em criar uma página pessoal na web.\n\nEssa é a terceira versão do meu site e sempre o utilizei brincar com novas tecnologias e coisas diferentes do que estou utilizando no meu trabalho. Ao longo desse post irei falar sobre inspirações e tecnologias que utilizei em cada uma das versões que constrúi ao longo dos anos.\n\n## Versão 1 (2018 - 2019)\n\nEsse foi o primeiro blog que coloquei em produção, então eu passei bastante tempo fazendo testes e estudando para decidir quais ferramentas utilizar.\n\nDurante a construção dessa versão eu tive meu primeiro contato com a [JAM Stack](https://jamstack.org/) , pois estava procurando uma forma de escrever para meu blog sem precisar de wordpress ou qualquer ferramenta que me obrigasse a ter um servidor com banco de dados e outras complexidades que estavam fora de cogitação.\n\nFiz testes utilizando [Jekyll](https://jekyllrb.com/) e [Hugo](https://gohugo.io/) até que encontri o [Hexo](<[Hexo](https://hexo.io/index.html)>) e decidi seguir com ele.\n\nTambém tive meu primeiro com [Gatsby](https://www.gatsbyjs.com/), um framework baseado em react. Sim, exatamente como o Next JS.\n\nAs tecnologias utilizadas foram:\n\n- HTML\n- Style components\n- Gatsby\n- Hexo\n\n> O que mais gostei nesse site foi o design bem divertido, com botões cheios de profundidade e com uma estrutura bem clean.\n\n![Site V1](/assets/img/site-v1.png)\n\n[Ver código fonte >>](https://github.com/crisgon/crisgon.github.io/tree/development)\n\nEssa versão do meu site teve forte inspiração em uma versão antiga do blog do [Gabs Ferreira ](https://www.gabsferreira.com.br/)\n\n## Versão 2 (2019 - 2023)\n\nA segunda versão do meu site foi uma evolução natural da versão 1. Foi uma espécie de refatoração onde eu dei foco em adicionar funcionalidades interessantes como busca, dark mode e novas paletas de cores.\n\nEu mantive a stack com Gatsby e Style components, mas removi o Hexo e passei a utilizar o [netlify cms](https://v1.netlifycms.org/) para gerenciar meus posts, além de utilizar o [algolia](https://www.algolia.com/pt-br/) para buscas.\n\n> O que mais gostei nesse site foi a elegância das paletas de cores e as animações suaves ao longo do site.\n\nPara chegar no resultado esperado eu precisei fazer muito uso das variaveis css, feature que até então eu tinha utilizado com pouca frequência.\n\nAs tecnologias utilizadas foram:\n\n- HTML\n- Style components\n- Gatsby\n- Graphql\n- Netlify\n\n![Site V2](/assets/img/site-v2.png)\n\n![Site V2](/assets/img/site-v2-2.png)\n\n[Ver código fonte >>](https://github.com/crisgon/personal-blog/tree/master)\n\nEssa versão do meu site teve forte inspiração em uma versão antiga do blog do [Willian Justen](https://willianjusten.com.br/)\n\n## Versão 4 (2023 - Atual)\n\nA terceira e atual versão do meu site surgiu por uma vontade de estudar sobre tailwind 😅😅😅.\n\nEu via muita discussão sobre usar ou não usar tailwind css, então decidi fazer meu próprio experimento construindo uma versão mais elegante e moderna do meu site.\n\nNessa versão eu consegui aprender muito sobre tailwind e sobre a versão mais atual do next js com app folder.\n\nFoi uma experiência bem legal, pois consegui aplicar um pouco de glassmorphism, brinquei bastante gradients, usei react composition e consegui criar uma versão bem mais clean que todos os meus outros sites, mas sem deixar de lado a essência de como gosto de construir minhas páginas.\n\nUm ponto importante é que não utilizei nenhuma ferramenta para gerenciar meus posts. Vou seguir editando os markdowns em um editor e quando surgir a necessidade irei utilizar algum Headless CMS.\n\n> O que mais gostei nesse site foi os detalhes de glassmorphism e gradient que estão presentes em pequenos detalhes.\n\n![Site V3](/assets/img/site-v3.png)\n\n![Site Ve](/assets/img/site-v31.png)\n\n[Ver código fonte >>](https://github.com/crisgon/personal-site)\n\nEsse meu novo site, assim como esse post , teve forte influência do Zeno Rocha [How I built my personal website // Zeno Rocha](https://zenorocha.com/how-i-built-my-personal-website)\n\n## E agora\n\nComo falei antes, sempre uso o meu site para estudar e aprender coisas novas. Então, ele vai estar sempre mudando e melhorando.\n\nEu já tenho algumas melhorias e funcionalidades que pretendo adicionar, mas por enquanto vou aproveitar essa nova versão e focar um pouquinho em produzir novos artigos, pois faz um tempinho que estou devendo.\n\nSegue me acompanhando que em breve irei trazer mais conteúdo e atualizações pra esse meu novo site. 😬\n"},{"@type":"BlogPosting","headline":"Meus erros e aprendizados em 1 ano como Tech Lead","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1138,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2022-08-02-meus-erros-e-acertos-em-1-ano-como-tech-lead","datePublished":"Tue Aug 02 2022 09:21:03 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Aug 02 2022 09:21:03 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nFaz um 1 ano e 3 meses que aceitei oficialmente um desafio para ocupar o cargo de Tech Lead na [Zak](https://www.zak.app/), uma posição que me preparei bastante para ocupar, ou ao menos achei ter me preparado o suficiente.... Porém, a medida que os dias iam passando, o time ia se estruturando e as situações foram aparecendo eu percebi que não estava tão preparado como imaginei.\n\nErrei bastante, questionei minha capacidade enquanto líder, tive vontade de desistir, mas também recebi feedbacks de que estava fazendo um bom trabalho. E é por isso que estou confortável em escrever um texto compartilhando alguns dos meus aprendizados, pois esse era o tipo de conteúdo que poderia ter me ajudado no início da minha jornada enquanto líder.\n\n### Qual o papel de um Dev e de um Tech Lead?\n\nAntes de falar sobre erros e acertos é preciso entender quais as diferenças entre um **Dev** e um **Tech Lead**. De maneira bastante prática o **Dev** tem um perfil executor e na grande maioria das vezes não possuem dependências. Enquanto um **Tech Lead** tem a função de liderar uma equipe, conduzindo o time, gerenciando o projeto, mantendo uma boa comunicação com outras equipes da empresa e auxiliando na evolução técnica dos seus liderados.\n\nAgora que você já tem uma ideia básica sobre a diferença entre o dev e tech lead vamos aos principais erros que cometi e aprendizados que tive a medida que fui avançando no dia-a-dia de um líder técnico.\n\n## Não delegar\n\nEsse foi um dos meus principais erros e foi algo que custou bastante da minha saúde física e mental... Inicialmente eu não tinha entendido que não estava mais no perfil de executor e segui acumulando atribuições que deveriam ser direcionadas para o time.\n\nIsso me deixou extremamente sobrecarregado e meu desempenho enquanto líder não estava sendo dos melhores, pois não estava focando no time e sim nas tarefas. Além disso, o cansaço físico e mental foram aumentando e não importava o quanto eu dormisse, o cansaço continuava.\n\nAs coisas só começaram a fluir quando eu entendi que não iria conseguir fazer tudo sozinho. Que precisava confiar no meu time e que agora o meu papel era o de garantir o sucesso dos meus liderados na execução das tarefas. Inicialmente foi bem difícil virar essa chavinha, pois um dia você é responsável por duas ou três tarefas na sprint e no outro dia você é responsável pelo sucesso de dez ou quinze tarefas de todo o seu time.\n\n> Toda sua independência passa a ser uma dependência, pois sem o sucesso do time você não tem sucesso.\n\n## Não entender a capacidade do time\n\nQuando me tornei tech lead eu já tinha bastante contexto sobre o projeto e dominava bastante das regras de negócio, por isso, eu tinha facilidade em resolver determinados problemas com mais velocidade que os devs menos experientes do projeto, algo esperado... Porém, sempre que o time tinha alguma dificuldade eu pensava \"eu consigo resolver isso rapidinho\" e por causa desse pensamento o planejamento do meu time tinha diversos problemas, pois eu planejava para o time pensando estar planejando para mim.\n\nO planejamento do time melhorou expressivamente quando eu entendi que cada pessoa tem um ritmo diferente e que eu precisava entender qual era a velocidade do time independente da minha velocidade de desenvolvimento. E que meu trabalho era buscar soluções para que a eficiência do time aumentasse cada vez mais. Não interessa o quão rápido eu possa resolver o problema e sim o quanto eu posso auxiliar meu time para resolver o problema com a melhor qualidade e velocidade possível.\n\n> O papel de um tech lead é entender a capacidade do time e encontrar formas de aumentar a produtividade do mesmo.\n\n## Sem um time engajado nada vai funcionar\n\nExistem diversas formas de engajar uma pessoa... não vou me aprofundar nisso, pois cada pessoa é singular e cada time tem uma configuração diferente. Mas enquanto líder, o grande ponto é encontrar uma forma de mostrar o valor do trabalho para seus liderados, pois isso é um dos pontos-chave para manter um time engajado.\n\nEnquanto eu apenas passava tarefas e cobrava sem mostrar o porquê de cada decisão e o impacto que elas traziam para o negócio, o sentimento do time não era dos melhores. Isso mudou quando eles passaram a enxergar o valor das suas entregas e se sentiram mais envolvidas em todo o processo.\n\nDemonstrar esse valor não é uma coisa simples, pois as pessoas têm dificuldade em enxergar valor nas pequenas coisas, porém uma forma de contornar isso é utilizando métricas de forma que o time entenda sua evolução, seus pontos de falhas e suas conquistas sem um ar analítico de julgamento. Dessa forma, as métricas podem ser sua maior aliada no engajamento do time, desde que você as utilize com propósito de dar visibilidade e de conduzi-los do ponto A ao ponto B sempre visando a melhoria constante ao invés do julgamento continuo.\n\n> O sentimento de trabalhar em algo que não gera resultados é péssimo, então um líder precisa cuidar para que o time enxergue o real valor de cada detalhe que vocês trabalharem juntos.\n\n## Ser transparente é essencial\n\nDesde meu primeiro dia enquanto líder, eu optei por ser bastante transparente com minha equipe. Eles sempre souberam quando as coisas estavam indo bem, quando as coisas não estavam indo bem, quando eu estava muito confiante ou quando eu estava com a confiança baixa. Para alguns isso é algo negativo, pois tem pessoas que acreditam que o líder precisa ser uma figura inabalável, que não demonstra suas inseguranças para o time... em outras palavas, nada humano.\n\nEu optei pelo caminho da transparência, pois meu time precisa confiar em mim nos momentos bons e nos momentos ruins e isso é algo muito difícil, porem, em 1 ano e 3 meses como **Tech Lead**, com diversas configurações diferentes de times e com liderados de perfis diferentes, ser transparente foi o que me ajudou construir boas relações e ser uma figura confiável para os meus liderados.\n\nÉ claro que você precisa ser responsável, consciente e prezar sempre pelo bem-estar do seu time, então podem existir situações em que a transparência pode mais atrapalhar do que ajudar, mas isso não pode ser algo corriqueiro. E até nesse tipo de situação, sempre que possível, é importante ser transparente do porquê você não foi transparente.\n\n> Quando você é acessível e transparente com o seu time uma relação de confiança é construida, o que facilita todo o trabalho.\n\n## E chegamos ao fim\n\nEsse foi a primeira vez que abordei um conteúdo não técnico... Confesso que foi bem mais difícil de expressar tudo em palavras, mas espero que tenha sido claro e te ajude de alguma forma.\n\nAo longo da minha jornada eu tive mais erros, aprendizados, frustrações e alegrias no cargo de Tech Lead, mas vou deixar para falar mais sobre em outra ocasião.\n\nMuito obrigado por chegar até aqui e até a próxima!\n"},{"@type":"BlogPosting","headline":"Entendendo Variáveis CSS ","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1104,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2022-07-21-entendendo-variaveis-css","datePublished":"Wed Jul 20 2022 10:53:47 GMT+0000 (Coordinated Universal Time)","dateModified":"Wed Jul 20 2022 10:53:47 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nAtualmente as aplicações web tem se tornado cada vez mais robustas e consequentemente a quantidade de CSS tem crescido bastante. Isso faz com que a possibilidade de código duplicado aumente consideravelmente, em sua maioria com repetição de pequenos valores, como uma cor ou um espaçamento.\n\nEm diversos momentos você já deve ter se deparado com uma folha de estilos da seguinte forma:\n\n```css\n...\n\n.header {\n background-color: #8e44ad;\n padding: 10px 15px;\n ...\n}\n\n.button {\n border-color: #8e44ad;\n color: #8e44ad;\n padding: 10px 15px;\n ...\n}\n\n.footer {\n background-color: #8e44ad;\n ...\n}\n```\n\nExemplo bem simples onde temos o mesmo hexadecimal sendo utilizado em diversos lugares. Também temos as mesmas medidas de padding sendo utilizadas em mais de um lugar. É normal existir essa repetição, pois queremos manter uma uniformidade no nosso layout.\n\nAgora pense na seguinte situação, o produto que trabalhamos acabou de passar por um rebranding (mudança de marca) e precisamos alterar todas as cores da nossa aplicação. Pense o quanto isso seria trabalhoso... sair alterando valores em todos os N arquivos css que temos espalhados ao longo do projeto.\n\nPosso dar um exemplo mais prático... Este blog em que você se encontra tem várias paletas de cores.\n\n![Print do blog atual na cor vermelha](/assets/img/blog-red.png)\n\n![Print do blog atual na cor azul](/assets/img/blog-blue.png)\n\nImagine o quão trabalhoso seria alterar as cores de cada detalhezinho... Um processo muito repetitivo que geralmente os programadores tentam evitar. Seria muito mais simples se isso estivesse centralizado de uma forma que a manutenção e as mudanças fossem facilitadas.\n\nFoi pensando nesse cenário que os primeiros pre-processadores(sass, less, stylus) trouxeram a possibilidade de termos variáveis nas nossas folhas de estilos e logo em seguida isso acabou tornando-se algo nativo do próprio CSS.\n\n> Na [programação](https://pt.wikipedia.org/wiki/Programa%C3%A7%C3%A3o \"Programação\"), uma **variável** é um objeto (uma posição, frequentemente localizada na [memória]( \"Memória (computador)\")) capaz de reter e representar um valor ou expressão.[]()\n>\n> [Wikipédia]()\n>\n> Você pode encontrar pessoas e lugares que utilizam a expressão propriedades customizadas ou variáveis CSS. 😎\n\n### Como utilizar variáveis no CSS\n\nVocê deve se lembrar que no javascript precisamos fazer o uso de palavras-chave para declarar uma variável :\n\n```javascript\nvar a = 1;\nlet b = 2;\nconst c = 3;\n```\n\nNo CSS temos algo muito mais simplificado, pois precisamos apenas escrever o nome da nossa propriedade personalizada precedida de um duplo hífen(--): `--cor-do-background` e logo depois podemos utilizar qualquer valor válido de CSS.\n\nÉ importante saber que uma propriedade personalizada precisa ser declarada dentro de algum escopo do CSS, ou seja, dentro de `{ }` . Aqui também seguimos a regra de escopo, então a variável declarada dentro de um elemento, só vai estar disponível para ele ou seus filhos.\n\nPara conseguir acessar o valor dessas novas propriedades precisamos utilizar a função `var()` passando a propriedade como argumento.\n\n```css\ndiv {\n --cor-do-background: red;\n background: var(--cor-do-background); /*red*/\n}\n```\n\n### Regra dos Escopos\n\nNo javascript temos escopos de bloco, de função e global. Aqui temos algo bastante semelhante, pois podemos optar por tornar uma propriedade customizada acessível para todo nosso código ou disponível em apenas um trecho.\n\nVeja a seguir um exemplo onde a regra de escopos vai ficar mais clara:\n\n**Todos os exemplos que você verá a seguir usam como base o seguinte HTML**\n\n```html\n
Aprendendo sobre variáveis CSS
\n
CSS é legal!
\n```\n\n```css\np {\n --main-color: blue;\n --big-font-size: 50px;\n color: var(--main-color);\n}\n\nh4 {\n color: var(--main-color);\n font-size: var(--big-font-size);\n}\n```\n\nO resultado seria o seguinte. Nosso H4 não iria ter nenhum valor para `color`ou `font-size`, pois elas estão fora do seu escopo, logo são inacessíveis.\n\n![Resultado do uso de variáveis fora de escopo](/assets/img/css-variable-scope.png)\n\nUma prática muito utilizada é declarar as variáveis de forma global, usando a pseudo-class `:root`. Dessa forma, as variáveis podem ser acessadas de qualquer local das nossas folhas de estilo.\n\n```css\n:root {\n --main-color: blue;\n --big-font-size: 50px;\n}\n\np {\n color: var(--main-color);\n}\n\nh4 {\n color: var(--main-color);\n font-size: var(--big-font-size);\n}\n```\n\nO mesmo trecho de código com as variáveis declaradas globalmente teriam o seguinte resultado:\n\n![Resultado do uso de variáveis com escopo global](/assets/img/css-variables-1.5x.png)\n\n### C de Cascata\n\nVocê já deve saber que o C da sigla CSS significa Cascading e a sigla por completo é Cascading Style Sheet, no português, folha de estilos em cascata. Recomendo uma visita ao [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) para mais detalhes sobre esse conceito.\n\nPara o entendimento das variáveis CSS você só precisa saber que elas seguem regras de cascata, ou seja, podemos redefinir a mesma variável em vários níveis de especificidade e a ordem da declaração vai contar.\n\n```css\n:root {\n --main-color: blue;\n}\n\np {\n --main-color: green;\n color: var(--main-color);\n}\n\nh4 {\n color: var(--main-color);\n}\n```\n\n![Resultado do uso de variáveis com valor redefinido](/assets/img/css-variables-cascading.png)\n\nNo exemplo acima a regra da cascata foi aplicada, pois no parágrafo o valor da `-main-color` foi redefinido. É importante relembrar que a gente poderia ter uma situação onde um novo root é definido e os valores são sobrepostos devido à cascata. No código abaixo nosso parágrafo seguiria verde, mas nosso H4 e tudo que utilizasse a `--main-color` na sequência teriam a cor rosa\n\n```css\n:root {\n --main-color: blue;\n}\n\np {\n --main-color: green;\n color: var(--main-color);\n}\n\n:root {\n --main-color: pink;\n}\n\nh4 {\n color: var(--main-color);\n}\n```\n\n> A regra da cascata é ótima para utilizar com medias-queries, pois podemos redefinir os valores de uma propriedade customizada para diversos dispositivos diferentes.\n\n### Fallbacks\n\nPodem existir situações onde nossa variável não foi definida com um valor correto ou não foi declarada. Para esses casos a função` var()` permite que um segundo argumento seja passado, ele será o valor padrão que deve ser utilizado sempre que ocorrer algum problema com a propriedade customizada informada.\n\nSegue um exemplo com às duas situações:\n\n```css\n:root {\n --big-font-size: red;\n}\n\np {\n color: var(--main-color, blue);\n /*A main-color não foi definida, nosso p vai ter a cor azul*/\n}\n\nh4 {\n font-size: var(--big-font-size, 16px);\n /*Estamos tentando utilizar uma cor como valor para uma font-size. \n Aqui nosso h4 vai ter uma font-size com valor de 16px*/\n}\n```\n\nQuando não passamos o segundo argumento o próprio navegador consegue lidar com propriedades inválidas. O procedimento é bem simples e em duas etapas:\n\n1. O navegador verifica se a propriedade é valida, caso não seja ele procura se existe uma propriedade válida no pai do elemento.\n2. Se não existir uma propriedade no pai ele utiliza um valor padrão, preto para a propriedade color.\n\n### Conclusão\n\nEssa não é nenhuma novidade do CSS... está disponível faz bastante tempo. Porém é algo ainda pouco explorado e em diversos momentos vejo as pessoas instalando [styled-components](https://styled-components.com/) ou algo semelhante para tarefas simples que poderiam ser facilmente resolvidas com o próprio CSS.\n\nMesmo sendo uma funcionalidade conhecida, se você chegou até aqui é porque estava na esperança de aprender algo novo. Espero que você tenha consolidado ainda mais seus conhecimentos sobre frontend depois dessa leitura!!\n\nMuito obrigado e até a próxima!\n\n### Links importantes\n\n- [Variáveis CSS - Por que você deveria se importar?](https://developer.chrome.com/blog/css-variables-why-should-you-care/)\n- [Using CSS custom properties](https://deploy-preview-35--crisgon.netlify.app/iniciando-com-react-hooks-usereducer/)\n- [Understanding CSS Variables](https://medium.com/techradiant/understanding-css-variables-a0f956b281e0)\n- [What are CSS-Variables?](https://dev.to/shiv1998/what-are-css-variables-3bc8)\n"},{"@type":"BlogPosting","headline":"Iniciando com React Hooks - useReducer","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1418,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-06-09-iniciando-com-react-hooks-usereducer","datePublished":"Tue Jun 08 2021 10:26:23 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Jun 08 2021 10:26:23 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nHey, esse artigo faz parte de uma série sobre react hooks. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:\n\n- [Iniciando com React Hooks - useState](https://www.cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate)\n- [iniciando com React Hooks - useEffect](https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo)\n- [iniciando com React Hooks - useMemo](https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo)\n- [iniciando com React Hooks - useCallback](https://www.cristiano.dev/blog/2021-06-03-iniciando-com-react-hooks-usecallback)\n\nAo trabalhar com react o padrão quando falamos em gerenciar estado é utilizar o useState, porém essa não é a única forma de trabalhar com estados.\n\nO useReducer é uma alternativa para o useState quando temos estados complexos, muito aninhados ou que precisam sempre do estado anterior antes de uma nova atualização. Porém, antes de focar no nosso objeto de estudo é preciso dar dois passos para trás e entender um pouco sobre redutores, conceito que se popularizou com o surgimento do [redux ](https://redux.js.org/)para gerenciamento de estados.\n\nVocê provavelmente já deve ter se esbarrado com algum projeto que utiliza redux, mas se esse for um tema que foge do seu conhecimento, não se assuste. Em breve irei escrever um artigo explicando um pouco sobre redux e a arquitetura flux, mas no momento você só precisa saber que redux é uma biblioteca javascript para gerenciamento de estados de uma aplicação.\n\nVoltando aos redutores... eles basicamente existem para controlar estados de aplicações, exatamente como já conhecemos no react. De maneira bem simplificada, um redutor é uma função que recebe dois argumentos(o **estado** atual da aplicação e uma **ação)** e retorna um **novo estado**.\n\nExemplo:\n\n```javascript\nfunction counterReducer(count, action) {\n return count + 1;\n}\n```\n\nA função redutora acima tem um objetivo único que é o de sempre acrescentar 1 ao estado atual e retornar um novo estado.\n\nAnalisando mais profundamente o código acima você deve ter percebido que ela é uma função bem direta ao ponto e que sempre vai retornar o mesmo valor se os argumentos passados forem sempre os mesmos.\n\n```javascript\ncounterReducer(1); // retorno 2\ncounterReducer(1); // retorno 2\ncounterReducer(1); // retorno 2\ncounterReducer(1); // retorno 2\ncounterReducer(1); // retorno 2\n```\n\nIsso quer dizer que ela é uma função pura e que não tem efeitos colaterais. Ou seja, se essa função for executada dez vezes passando sempre o valor 1 o resultado retornado será 2 nas dez vezes. Logo abaixo existe um exemplo de uma função não pura.\n\n```javascript\nfunction counterReducer(count, action) {\n return count + Math.random();\n}\n\ncounterReducer(1); // 1.7854420380755345\ncounterReducer(1); // 1.5816188682194945\n```\n\nCerto, falamos sobre o primeiro argumento da função redutora, porém ainda não falamos sobre a ação, nosso segundo argumento. A ação costuma ser um objeto com duas propriedades: uma instrução(type) e um novo valor(value ou payload).\n\nVamos melhorar nosso redutor de contador e tudo vai ficar mais claro\n\n```javascript\nfunction counterReducer(count, action) {\n if (action.type === \"INCREASE\") {\n return count + 1;\n }\n\n if (action.type === \"DECREASE\") {\n return count - 1;\n }\n\n return count;\n}\n```\n\nNo código acima nossa função redutora pode atualizar o estado de duas formas diferentes e também pode não fazer nada caso o type informado não exista,\n\n```javascript\ncounterReducer(1, { type: \"DECREASE\" }); // retorno 0\ncounterReducer(1, { type: \"INCREASE\" }); // retorno 2\ncounterReducer(1, { type: \"OPS\" }); // retorno 1\n```\n\n> Essas adições não mudam a principal característica da função redutora, ser pura e sempre retornar o mesmo valor para os mesmos argumentos.\n\nOutro ponto-chave é que o estado recebido pelas funções redutoras são sempre imutáveis, ou seja, um novo estado será criado para o retorno da função.\n\nEsse ponto fica mais claro se o estado que nossa função redutora receber for um objeto como no exemplo abaixo.\n\n```javascript\nfunction personReducer(person, action) {\n switch (action.type) {\n case \"INCREASE_AGE\":\n return { ...person, age: person.age + 1 };\n case \"CHANGE_LASTNAME\":\n return { ...person, lastname: action.value };\n\n default:\n return person;\n }\n}\n\nconst person = {\n name: \"Cristiano\",\n lastName: \"Gonçalves\",\n age: 27,\n};\n\nconst action = {\n type: \"CHANGE_LASTNAME\",\n value: \"Santos\",\n};\n\nconst result = personReducer(person, action);\n\n/*\nResultado\n{\n name: \"Cristiano\",\n lastName: \"Santos\",\n age: 27\n}\n*/\n```\n\nNo exemplo acima o funcionamento não mudou, apenas passamos a utilizar um switch ao invés de ifs e note que para o retorno da função sempre criamos um novo objeto. Em nenhum momento fizemos uma reatribuição do person que foi recebido como atributo.\n\n## Mas e o useReducer?\n\nAgora que você já sabe como funciona uma função redutora, você também já sabe como funciona o useReducer! 😎\n\nO hook useReducer é bem semelhante ao useState que retorna dois valores, o estado e uma função que atualiza esse estado. Para o useReducer temos praticamente a mesma coisa... Ele sempre nos retorná um array com o estado(`state`) e uma função(`dispatch`) responsável ela atualização do estado.\n\n![Detalhamento do useReducer](/assets/img/usereducer-2x-1-.png \"Detalhamento do useReducer\")\n\nPara a aplicação do useReducer ficar mais clara vamos pensar no seguinte cenário, onde temos que armazenar nome, idade, email, nacionalidade e endereço de um usuário. O primeiro pensamento que temos é utilizar um estado para cada campo.\n\n```javascript\nconst [name, setName] = useState(\"\");\nconst [age, setAge] = useState(26);\nconst [email, setEmail] = useState(\"\");\nconst [nationality, setNationality] = useState(\"brazilian\");\nconst [address, setAddress] = useState({\n city: \"\",\n state: \"\",\n postalCode: \"\",\n});\n```\n\nOutra forma de armazenar as mesmas informações seriam com o useReducer e ficaria assim:\n\n```javascript\nfunction reducerPerson(state, action) {\n switch(action.type) {\n case \"CHANGE_AGE\":\n return {...state, age: action.value};\n case \"CHANGE_NAME\":\n return {...state, lastname: action.value};\n ... // Resto da implementação\n default:\n return person;\n }\n}\n\nconst initialPersonState = {\n name: null,\n age: null,\n email: null,\n nationality: null,\n address: null\n}\nconst [personState, dispatch] = useReducer(initialPersonState, reducer);\n```\n\nA atualização do estado ficaria da seguinte forma:\n\n```javascript\nconsole.log(personState);\n/*\n{\n name: null,\n age: null,\n email: null,\n nationality: null,\n address: null\n}\n*/\n\ndispatch({ type: \"CHANGE_AGE\", value: 27 });\nconsole.log(personState);\n/*\n{\n name: null,\n age: null,\n email: null,\n nationality: null,\n address: null\n}\n*/\n```\n\nO useReducer ainda tem mais um detalhe, seu terceiro argumento, que geralmente é pouco utilizado. Esse argumento é o `init`e ele é responsável por controlar o nosso estado inicial, isso é bastante útil para conseguir ter a lógica do estado inicial isolado do useReducer e ainda nos possibilita um reset do estado sem grandes problemas.\n\n```javascript\nfunction init(personState) {\n if(personState.email === null)\n return initialState;\n return personState;\n}\n\nfunction reducerPerson(state, action) {\n switch(action.type) {\n case \"RESET\":\n return init(action.value);\n ... // Resto da implementação\n default:\n return person;\n }\n}\n```\n\nO código acima permite que a gente tenha uma regra de negócio embutida na nossa função de iniciar o estado, onde ela sempre vai garantir que nosso estado só vai ser resetado se o usuário não possuir um email informado.\n\n## Devo trocar useState por useReducer?\n\nDepende da situação... Segundo a própria [documentação do react](https://pt-br.reactjs.org/docs/hooks-reference.html#usestate) o useReducer é a opção mais adequada para gerenciar objetos de estado que contém sub-valores. Mas isso não quer dizer que você deve sair trocando todos os seus useState que possuem objetos por um useReducer, antes de escolher por um ou outro é importante ter em mente os seguintes prós e contras:\n\n### Prós\n\n- Toda a sua atualização de estados fica centralizada em um único lugar, ao invés de ter múltiplas funções de setters.\n- As funções redutoras são puras e mais simples de serem testadas.\n- Podemos ter um código mais organizado com estado inicial função redutora isolados do resto da nossa aplicação.\n- Aliado ao [typescript ](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)o uso de um dispatch fica muito mais fácil e legivel que um simples setter. `dispatch({ type: \"WIDTH\", value: \"200px\" });`\n\n### Contras\n\n- Curva de aprendizado consideravelmente maior que a do `useState`\n- Funções mais longas por conta do uso de instruções do switch\n\n### Qual devo escolher?\n\nPor padrão o `useState `ainda deve ser sua primeira escolha, pois, ele vai resolver pelo menos 90% dos seus problemas e vai ser ótimo quando:\n\n- Você precisar lidar com estados simples, como boolean, string, numbers, arrays e objetos simples.\n- Existem pouco estado para ser gerenciado ao longo do seu componente/container\n- A quantidade de setters ao longo do seu componente/container não tem tornado tudo caótico\n- Você não quer adicionar uma camada de complexidade para seu time lidar\n\n## Isso é tudo pessoal!\n\n![](/assets/img/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nFique atento(a) aqui no blog e no meu [twitter](https://twitter.com/Gonkristiano) que em breve irei postar mais artigos sobre hooks.\n\n### Links importantes\n\n- [Documentação do react](https://pt-br.reactjs.org/docs/getting-started.html)\n- [Javascript Reducers](https://www.robinwieruch.de/javascript-reducer/)\n- [React useReducer Hook ultimate guide](https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/)\n- [Why use Reducer hooks for state management in React?](https://rajeshnaroth.medium.com/why-use-reducer-hooks-for-state-management-in-react-c9528f615ddf)\n\n [](https://dmitripavlutin.com/dont-overuse-react-usecallback/)\n"},{"@type":"BlogPosting","headline":"Iniciando com React Hooks - useCallback","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":868,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-06-03-iniciando-com-react-hooks-usecallback","datePublished":"Wed Jun 02 2021 10:21:26 GMT+0000 (Coordinated Universal Time)","dateModified":"Wed Jun 02 2021 10:21:26 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nHey, esse artigo faz parte de uma série sobre react hooks. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:\n\n- [Iniciando com React Hooks - useState](https://www.cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate)\n- [iniciando com React Hooks - useEffect](https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo)\n- [iniciando com React Hooks - useMemo](https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo)\n\nEstamos sempre procurando alternativas para deixar nossas aplicações cada vez melhores e uma das formas de fazer isso é as tornando performáticas.\n\nAnos atrás quando se falava no assunto performance no frontend as únicas coisas que as pessoas pensavam eram no tamanho das imagens, no tamanho do seu css minificado e no tamanho do seu javascript, também minificado. Porém, isso mudou bastante! Mas isso não quer dizer que tudo que citei anteriormente tenha deixado de ter atenção, na verdade, tudo isso se tornou o mínimo esperado. O foco agora são nas informações que aparecem depois que sua aplicação já foi carregada, pois, as aplicações frontend ganharam uma grande responsabilidade ao lidar e manipular grandes massas de dados complexos.\n\nHoje vamos aprender sobre useCallback, mas tome muito cuidado para não confundir com useMemo. Eles se parecem, mas o useMemo memoriza valores e o useCallback memoriza funções.\n\nAntes de prosseguir é importante ressaltar que devemos sempre evitar [otimização prematura](https://woliveiras.com.br/posts/como-evitar-a-otimizacao-prematura/)! Por padrão o react já é extremamente rápido e na maioria das vezes não vamos precisar fazer uso de um hook como o useCallback. Antes de sair utilizando useCallback em todas as funções da sua aplicação lembre-se que isso tem um custo e pode ser que seja um custo alto para um ganho baixo.\n\n### O que faz esse useCallback\n\nSeu uso é bastante simples e bem fácil de entender!\n\nBasicamente, o hook useCallback memoiza(guarda) sua função e evita que ela seja redeclarada sempre que componentes filhos que utilizam essa função sejam renderizado. A função só vai ser redeclarada quando algum dos valores do array de dependência forem atualizados.\n\nAi você se questiona... \"Mas qual o real objetivo do useCallback?\"\n\n![Will smith com dúvida](/assets/img/will.gif \"Will smith com dúvida\")\n\nPara explicar isso é preciso entender um pouco sobre igualdade de funções no javascript.\n\n### Igualdade de funções no javascript\n\n```javascript\nfunction calc() {\n return (a, b) => a + b;\n}\n\nconst soma = calc();\nconst soma2 = calc();\n\nsoma(2, 2); // 4\nsoma2(2, 2); // 4\n\nsoma === soma2; // false\nsoma2 === soma2; // false\n```\n\nUma breve explicação sobre o trecho de código acima. Basicamente temos uma função `calc`que ao ser executada retorna uma função que recebe 2 argumentos. Ou seja, soma ficaria assim `const soma = (a,b) => a + b;` . O mesmo acontece com soma2.\n\nAs duas funções(soma e soma2) fazem exatamente a mesma coisa e retornam valores iguais quando recebem os mesmos argumentos, porém o javascript nos diz que elas são diferentes. Isso acontece, pois no javascript funções são objetos e cada nova instância de um objeto é diferente da outra.\n\n### E onde o React entra nisso?\n\nQuando criamos uma função que é utilizada em um componente ela é sempre uma nova instância de objeto a cada renderização.\n\n```javascript\nfunction MyComponent() {\n // handleClick é criado a cada renderização\n const handleClick = () => {\n console.log('Clicado!');\n };\n```\n\nPara reescrever essa função usando useCallback seria assim\n\n```javascript\nfunction MyComponent() {\n // handleClick é sempre a mesma a cada renderização\n const handleClick = useCallback(() => {\n console.log('Clicado!');\n }, []);\n```\n\nVocê deve ter notado que a estrutura do useCallback é como a de outros hooks, sempre recebendo uma função como primeiro parâmetro e um array de dependências como segundo argumento.\n\n> Importante!! A funcão declarada com useCallback só vai ser redeclarada quando um dos itens do array de dependencia forem modificados. Caso contrário a funcão vai se manter a mesma caso o componente seja rerenderizado.\n\n### Quando useCallback é uma boa escolha\n\nImagine que temos uma página com uma lista de filmes que são buscados em uma api com base em uma categoria. Nessa mesma página também podemos filtrar os filmes por status (lançado ou não).\n\nVocê concorda que a função que trata categoria só deveria ser redeclarada quando a categoria mudar? E não quando a lista for atualizada por conta do status?\n\nÉ exatamente isso que o useCallback abaixo faz. A função onMovieClick só vai ser redeclarada quando a categoria altera, logo, não importa quantas vezes você alterar o filtro de status, essa função vai se manter a mesma.\n\n```javascript\nfunction MovieList({ category, handleMovieClick }) {\n const movies = getMovies(category);\n\n const map = movie =>
{movie}
;\n\n return
{movies.map(map)}
;\n}\n\nexport default function Container({ category }) {\n const onMovieClick = useCallback(\n event => {\n console.log(\"Clicou\", event.currentTarget);\n },\n [category],\n );\n\n return ;\n}\n```\n\n### Muito cuidado!!\n\nÉ preciso tomar muito cuidado ao optar por usar useCallback pelos seguintes motivos:\n\n- você vai adicionar mais complexidade ao seu código e talvez o custo de manutenção seja maior que o ganho em desempenho.\n- algumas funções são simples e aceitáveis de serem rerenderizadas.\n- otimização prematura pode ser problemática\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nFique atento(a) aqui no blog e no meu [twitter](https://twitter.com/Gonkristiano) que em breve irei postar mais artigos sobre hooks.\n\n### Links importantes\n\n- [Documentação do react](https://pt-br.reactjs.org/docs/getting-started.html)\n- [Your Guide to React.useCallback()](https://dmitripavlutin.com/dont-overuse-react-usecallback/)\n- [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)\n- [How to useCallback in React](https://www.robinwieruch.de/react-usecallback-hook)\n"},{"@type":"BlogPosting","headline":"Iniciando com React Hooks - useMemo","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":745,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo","datePublished":"Sun May 09 2021 11:57:52 GMT+0000 (Coordinated Universal Time)","dateModified":"Sun May 09 2021 11:57:52 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nHey, esse artigo faz parte de uma série sobre react hooks. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:\n\n- [Iniciando com React Hooks - useState](https://www.cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate)\n- [iniciando com React Hooks - useEffect](https://www.cristiano.dev/blog/2021-04-14-iniciando-com-react-hooks-usememo)\n\nEstamos sempre procurando alternativas para deixar nossas aplicações cada vez melhores e uma das formas de fazer isso é as tornando performáticas.\n\nAnos atrás quando se falava no assunto performance no frontend as únicas coisas que as pessoas pensavam eram no tamanho das imagens, no tamanho do seu css minificado e no tamanho do seu javascript, também minificado. Porém, isso mudou bastante! Mas isso não quer dizer que tudo que citei anteriormente tenha deixado de ter atenção, na verdade, tudo isso se tornou o mínimo esperado. O foco agora são nas informações que aparecem depois que sua aplicação já foi carregada, pois, as aplicações frontend ganharam uma grande responsabilidade ao lidar e manipular grandes massas de dados complexos.\n\nQuando estamos lidando com manipulação de dados queremos evitar ao máximo que nossa aplicação faça cálculos, comparações ou quaisquer operações desnecessárias. Foi pensando nisso que o React nos ofereceu um hook chamado useMemo para facilitar o uso de uma técnica bastante comum na computação chamada de memoization ou memoização.\n\nTá, mas o que é essa tal de memoization?\n\n> O termo \"memoização\" foi cunhado por Donald Michie em 1968 e é derivado da palavra latina \" memorando \" (\"para ser lembrado\") Memoização.\n>\n> _[Other Wiki](https://pt.other.wiki/wiki/Memoization)_\n\nNa computação é uma técnica que consiste em armazenar resultados de uma função em cache e retornar esses resultados que estão cacheados quando as mesmas entradas forem passadas novamente, evitando uma execução repetida.\n\nSegue abaixo um pequeno exemplo bem básico para ilustrar como funcionária a técnica de **memoization**.\n\n```javascript\nconst cache = new Map();\n\nfunction sum(a, b) {\n const key = a + \"/\" + b;\n\n if (cache.has(key)) {\n console.log(\"Valor em cache\", cache.get(key));\n return cache.get(key);\n }\n\n console.log(\"Valor sem cache. Precisa calcular.\");\n const result = a + b;\n cache.set(key, result);\n\n return result;\n}\n```\n\nNa imagem abaixo tem os logs com o uso dessa função. Note que nas vezes que eu passei os mesmos argumentos o cálculo não foi executado.\n\n![Memoization uso ](/assets/img/cached.png)\n\nNesse exemplo o cálculo é simples e ter valores em cache não faz nenhuma diferença, mas se as operações fossem mais complexas e exigissem bastante poder computacional o uso de memoization tornaria nossa aplicação mais performática.\n\n### Mas e no React?\n\nNo React nós não precisamos nos preocupar com a implementação de uma função de **memoization**, pois o hook useMemo faz todo o trabalho pesado para a gente.\n\nPara usar essa belezinha é muito simples, pois o useMemo também é uma função que recebe dois argumentos(semelhante ao useEffect): uma função e uma lista de valores para serem memoizados. Lembrando que o useMemo sempre vai retornar um valor que memoizado.\n\n```javascript\nconst valor = 22;\nfunction minhaFuncao() {\n return valor * valor;\n}\nconst valorMemoizado = useMemo(minhaFuncao, [valor]);\n\n// O código abaixo é equivalente ao código anterior\nconst valor = 22;\nconst valorMemoizado = useMemo(() => valor * valor, [valor]);\n```\n\n### Um exemplo prático\n\nUm ótimo exemplo de uso é quando existe uma série de dados que buscamos na api em tempo real e precisamos retornar um valor consolidado. Só faz sentido que esse calculo seja feito quando os dados da api forem modificados e não toda vez que existir uma nova renderização no nosso componente.\n\n```javascript\nconst valorTotal = useMemo(() => {\n return vendas.reduce((acc, curr) => acc + curr.valor, 0);\n}, [vendas]);\n```\n\n### Importante\n\n- A função do useMemo é executada durante o processo de renderização, então é importante não fazer nada que não poderia ser feito durante esse momento. Side-effects são responsabilidades do useEffect e não do useMemo.\n- Se nada for passada para o array a função do useMemo vai ser executada a cada renderização.\n- É importante que você coloque no array todos os valores que forem utilizados dentro da sua função.\n- Os valores passados no array NÃO SÃO argumentos para sua função.\n- Escreva seu código para que ele funcione sem o useMemo, pois ele é uma otimização e pode acontecer momentos em que o React vai esquecer os valores salvos para liberar memória e refazer os cálculos novamente.\n- Nem sempre é preciso utilizar useMemo e ele pode deixar seu código mais complexo.\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nFique atento(a) aqui no blog e no meu [twitter](https://twitter.com/Gonkristiano) que em breve irei postar mais artigos sobre hooks.\n\n### Links importantes\n\n- [Documentação do react](https://pt-br.reactjs.org/docs/getting-started.html)\n- [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)\n"},{"@type":"BlogPosting","headline":"Iniciando com React Hooks - useEffect","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1352,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-02-23-iniciando-com-react-hooks-useeffect","datePublished":"Tue Apr 06 2021 10:28:46 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Apr 06 2021 10:28:46 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nHey, esse artigo faz parte de uma série sobre react hooks. Se você ainda não leu os artigos passados, da uma conferida nos links abaixo:\n\n- [Iniciando com React Hooks - useState](https://www.cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate)\n\n![React JS](/assets/img/hooks-wallpaper.png)\n\nA primeira coisa que precisa ficar clara é que o hook `useEffect` não é uma versão dos ciclos de vida`constructor`, `componentDidMount`, `componentDidUpdate`, e `componentWillUnmount`.\n\nIsso mesmo, provavelmente você entendeu errado... assim como eu. Mas nunca é tarde para aprender, então vamos lá.\n\n### Tá, mas o que é o useEffect?\n\n`useEffect` é um hook que tem como principal objetivo sincronizar estados e executar efeitos colaterais. Esse hook é uma função que pode receber até 2 argumentos, uma função e um array de dependências.\n\nGeralmente o que encontramos por ai é uma explicação que diz o seguinte:\n\n- usar o `useEffect` passando apenas o primeiro `useEffect(function)`\n\n ❌ Quer dizer que esse `useEffect` vai ser executado sempre que nossa aplicação atualizar, semelhante ao `componentDidUpdate`\n\n ✅ O correto é dizer que esse `useEffect` vai estar em sincronia com todos os estados do componente.\n\n- usar o `useEffect` passando o segundo argumento como um array vazio `useEffect(function, [])`\n\n ❌ Quer dizer que esse `useEffect` vai ser executado quando o componente montar, semelhante ao `componentDidMount`\n\n ✅ O correto é dizer que esse `useEffect` não vai estar em sincronia com nenhum estado do componente, por isso ele vai ser executado apenas uma vez.\n\n- usar o `useEffect` passando uma lista de estados no segundo argumento\n\n ❌ Quer dizer que esse `useEffect` vai ser executado sempre que os estados atualizarem, semelhante ao `componentDidUpdate.`Também existem algumas explicações que tratam essa forma como uma alternativa ao antigo `componentWillReceiveProps`\n\n ✅ O correto é dizer que esse `useEffect` vai estar em sincronia com todos os estados que forem passados no segundo argumento.\n\nPode parecer besteira, mas é importante entender essas pequenas diferenças.\n\n### Ainda não ficou claro? Vamos ao exemplo!\n\nVamos utilizar um exemplo bem simples utilizando Classes e logo em seguida o mesmo componente utilizando hooks.\n\n```javascript\nexport class SimpleComponent extends Component {\n componentDidMount() {\n alert(\"Component montou!\");\n }\n\n componentWillUnmount() {\n alert(\"Component desmontou\");\n }\n\n render() {\n return
Component Simples
;\n }\n}\n```\n\n```javascript\nexport function SimpleComponent() {\n useEffect(() => {\n alert(\"Component montou!\");\n\n return alert(\"Component desmontou\");\n }, []);\n\n return
Component Simples
;\n}\n```\n\nDois pontos são bem importantes no código acima:\n\n1. O código que vai ser executado quando o componente for desmontar é passado no retorno da função do `useEffect`.\n2. O segundo argumento passado para o `useEffect` é um array vazio, pois não queremos que ele sincronize com nenhum estado.\n\n##### Vamos para mais um exemplo!\n\n```javascript\nexport class PokemonInfo extends Component {\n state = { pokemon: null };\n\n getPokemon() {\n api.getPokemonInfo(this.props.pokemonNumber).then(pokemon => {\n this.setState({ pokemon });\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.pokemonNumber !== this.props.pokemonNumber) {\n this.getPokemon();\n }\n }\n\n render() {\n return (\n <>\n \n
{this.state.pokemon.name}
\n \n );\n }\n}\n```\n\n```javascript\nexport function PokemonInfo(props){\n\n const [pokemon, setPokemon] = useState(null);\n\n state = { pokemon: null };\n\n function getPokemon() {\n api.getPokemonInfo(pokemonNumber)\n .then((poke) => {\n setPokemon(poke)\n });\n }\n\n useEffect(() => {\n getPokemon()\n }, [props.pokemonNumber])\n\n componentDidUpdate(prevProps){\n if (prevProps.pokemonNumber !== this.props.pokemonNumber) {\n this.getPokemon();\n }\n }\n\n return (\n <>\n \n
{pokemon.name}
\n \n );\n}\n```\n\nNo exemplo acima é importante notar que nosso hook se `useEffect` recebeu uma prop no array do seu segundo argumento. Isso quer dizer que queremos manter esse `useEffect` em sincronia com a prop chamada `pokemonNumer`.\n\n### Evite ter um único useEffect gigantesco\n\nIsso é algo bastante comum e acontece porque na maioria das vezes confundimos `useEffect` com ciclos de vida do react. Sempre falamos \"vou chamar todas as funções aqui porque quero executar apenas quando meu componente montar\", mas `useEffect` é sobre sincronizar estados e não sobre ciclos de vida.\n\nAntes dos hooks nós escrevíamos algo assim, pois era baseado em ciclos de vida.\n\n```javascript\nclass ChatFeed extends React.Component {\n componentDidMount() {\n this.subscribeToFeed();\n this.setDocumentTitle();\n this.subscribeToOnlineStatus();\n this.subscribeToGeoLocation();\n }\n componentWillUnmount() {\n this.unsubscribeFromFeed();\n this.restoreDocumentTitle();\n this.unsubscribeFromOnlineStatus();\n this.unsubscribeFromGeoLocation();\n }\n componentDidUpdate(prevProps, prevState) {\n // ... compare props and re-subscribe etc.\n }\n render() {\n return
{/* chat app UI */}
;\n }\n}\n```\n\nPor falta de entendimento do funcionamento do `useEffect` é comum imaginar que a melhor abordagem é escrever o mesmo código em hooks dessa forma:\n\n```javascript\nfunction ChatFeed() {\n React.useEffect(() => {\n subscribeToFeed();\n setDocumentTitle();\n subscribeToOnlineStatus();\n subscribeToGeoLocation();\n\n return () => {\n unsubscribeFromFeed();\n restoreDocumentTitle();\n unsubscribeFromOnlineStatus();\n unsubscribeFromGeoLocation();\n };\n });\n\n return
{/* chat app UI */}
;\n}\n```\n\nPodemos utilizar um `useEffect` para cada lógica individual!\n\n```javascript\nfunction ChatFeed() {\n React.useEffect(() => {\n subscribeToFeed();\n return () => {\n unsubscribeFromFeed();\n };\n });\n React.useEffect(() => {\n setDocumentTitle();\n return () => {\n restoreDocumentTitle();\n };\n });\n React.useEffect(() => {\n subscribeToOnlineStatus();\n return () => {\n unsubscribeFromOnlineStatus();\n };\n });\n React.useEffect(() => {\n subscribeToGeoLocation();\n return () => {\n unsubscribeFromGeoLocation();\n };\n });\n return
{/* chat app UI */}
;\n}\n```\n\nUma solução bastante elegante é separar tudo em [hooks personalizados](https://pt-br.reactjs.org/docs/hooks-custom.html). Não se preocupe, em breve irei abordar esse assunto aqui.\n\n```javascript\nfunction ChatFeed() {\n // Cada hook customizado tem a lógica necessária e poderia retornar valores\n useFeedSubscription();\n useDocumentTitle();\n useOnlineStatus();\n useGeoLocation();\n return
{/* chat app UI */}
;\n}\n```\n\n### Evite criar funções desnecessárias\n\nNem sempre é necessário criar uma função se ela vai ser utilizada a penas no `useEffect`.\n\n```javascript\nimport React, {useState, useEffect } from 'react';\n\nexport function PokeInfo(props) {\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n getPokemonInfo();\n }, [props.id]);\n\n const getPokemonInfo = useCallback(() => {\n api.getPokemon(props.id).then((poke) => {\n setPokemon(poke);\n }).catch(e => {\n console.error(e.message);\n });\n }, []);\n\n\n return
{/*Pokemon info*/}
\n}\n```\n\nPor hora ignore o `useCallback`, em breve teremos um post sobre ele.\n\n```javascript\nimport React, {useState, useEffect } from 'react';\n\nexport function PokeInfo(props) {\n const [pokemon, setPokemon] = useState(null);\n\n useEffect(() => {\n api.getPokemon(props.id).then((poke) => {\n setPokemon(poke);\n }).catch(e => {\n console.error(e.message);\n });\n }, [props.id]);\n\n\n\n return
{/*Pokemon info*/}
\n}\n```\n\nToda aquela complexidade desnecessária com uma função que nem estava sendo reaproveitada foi simplificada com o código acima. Lembre-se, o primeiro argumento do `useEffect` já é uma função.\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nFique atento(a) aqui no blog e no meu [twitter](https://twitter.com/Gonkristiano) que em breve irei postar mais artigos sobre hooks.\n\n### Links importantes\n\n- [Documentação do react](https://pt-br.reactjs.org/docs/getting-started.html)\n- [Mitos sobre useEffect](https://epicreact.dev/myths-about-useeffect/)\n"},{"@type":"BlogPosting","headline":"Iniciando com React Hooks - useState","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":783,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-02-04-iniciando-com-react-hooks-usestate","datePublished":"Thu Feb 04 2021 12:29:40 GMT+0000 (Coordinated Universal Time)","dateModified":"Thu Feb 04 2021 12:29:40 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nSe você começou a mexer com React em 2019 é bem capaz de que você não conheça, ou conheça bem pouco, do mundo sem react hooks. Antes da versão 16.8 escrever componentes funcionais era algo bem raro, já que era impossível controlar estado ou dar qualquer \"inteligência\" para um componente que não fosse escrito com classe.\n\nEra muito comum escrever componentes com estados utilizando classes e utilizar funções para componentes apenas de apresentação. Porém, o uso de classes apresentava alguns problemas que foram os principais motivadores para o surgimento dos hooks:\n\n- É difícil compartilhar lógica entre componentes quando utilizamos o padrão de class components.\n- Classes são mais problemáticas na etapa de minificação e o bundle final pode ser levemente maior se comparado a um bundle apenas com funções.\n- A sintaxe de classes torna os componentes mais complexos e era considerado uma barreira para adoção do react. Pois, para entender um componente com classe você precisava entender o this, precisava fazer bind de eventos e ainda precisava se preocupar em compreender todos os diferentes ciclos de vida.\n\n### Afinal, o que é um hook?\n\nSegundo a [documentação do react](https://pt-br.reactjs.org/docs/hooks-state.html#whats-a-hook), um hook é uma função especial que permite que os recursos do react sejam utilizados em um componente funcional. Um ótimo exemplo é o useState que permite adicionar estado em um componente de função.\n\nAntes de prosseguir vou deixar um exemplo de componente com classe, pois é importante ter a noção de como as coisas eram antes.\n\n```jsx\nclass Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n this.increment = this.increment.bind(this);\n this.decrement = this.decrement.bind(this);\n }\n\n increment() {\n this.setState({ count: this.state.count + 1 });\n }\n\n decrement() {\n this.setState({ count: this.state.count - 1 });\n }\n\n render() {\n return (\n
\n
Contador
\n
{this.state.count}
\n \n \n
\n );\n }\n}\n```\n\nAgora vou mostrar o mesmo componente escrito utilizando hooks.\n\n```jsx\nexport function Counter() {\n const [count, setCount] = useState(0);\n\n function increment() {\n setCount(count + 1);\n }\n\n function decrement() {\n setCount(count - 1);\n }\n\n return (\n
\n
Contador
\n
{count}
\n \n \n
\n );\n}\n```\n\n### useState\n\nO useState é um hook que permite o uso de estado em um componente funcional e simplifica bastante o gerenciamento de um estado se comparado ao gerenciamento em um componente de classe.\n\nEntenda o funcionamento do useState:\n\n- Ele declara uma variável de state que pode ser acessada dentro de todo o componente.\n- O useState recebe um argumento que vai ser utilizado como o valor inicial do nosso estado.\n- O useState retorna um array com duas posições, onde a primeira é o valor atual do state e o segundo é uma função que atualiza o state.\n\nA imagem abaixo indica cada parte do hook useState:\n\n![ Detalhamento o useState](/assets/img/usesate.png)\n\n### Atualizando state\n\nNo nosso exemplo utilizamos o seguinte trecho de código para atualizar nosso estado: `setCount(count + 1)`\n\nPorém, tem um grande problema em utilizar dessa forma, pois, pode acontecer algum efeito colateral que deixe o nosso estado(`count`) desatualizado. Para resolver esse problema a função que atualiza o estado pode aceitar um valor de qualquer tipo, incluindo uma função. Como assim uma função? Vou mostrar um exemplo e explicar que tudo vai fazer sentido.\n\n`setCount((old) => old + 1)`\n\nNosso `setCount`, que poderia ter qualquer nome, recebe uma função que recebe um argumento que representado o nosso estado atual, aqui temos a garantia total de que o estado está correto. Essa mesma função precisa retornar um valor que será reatribuído ao nosso estado.\n\nDessa forma nossa reatribuição fica mais segura.\n\nFicou confuso? A imagem a seguir deixa mais claro.\n\n![Atualizando state](/assets/img/usestate.png)\n\nAntes de sair utilizando um hook é importante você ficar atento a algumas [regras importantes](https://pt-br.reactjs.org/docs/hooks-rules.html).\n\n### Regras importantes ao usar um hook\n\n- Você pode usar hooks em componentes react ou hooks customizados\n- Você não deve usar hooks dentro de loops, condicionais ou funções aninhadas\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nEsse foi o início de uma série que irei fazer abordando os hooks disponíveis no react. Fique atento aqui no blog e no meu [twitter](https://twitter.com/Gonkristiano) que em breve irei postar mais artigos sobre hooks.\n\n### Links importantes\n\n- [Documentação do react](https://pt-br.reactjs.org/docs/getting-started.html)\n"},{"@type":"BlogPosting","headline":"Expressões Regulares - Um guia para iniciantes","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1800,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2021-01-13-expressoes-regulares-um-guia-para-iniciantes","datePublished":"Tue Jan 12 2021 08:36:24 GMT+0000 (Coordinated Universal Time)","dateModified":"Tue Jan 12 2021 08:36:24 GMT+0000 (Coordinated Universal Time)","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nAntes de aprender uma tecnologia é interessante entender que tipo de problema ela se propõe a resolver, então vamos lá... Imagine que você trabalha em uma aplicação que precisa receber o CPF com 11 dígitos numéricos. Qual seria sua abordagem para fazer uma validação? Acredito que caso não conheça regex, sua primeira opção seria verificar se o tamanho da string com os números digitados é 11, mas quem garante que tudo que foi passado são números?\n\n```typescript\n\"12345678909\".lenght === 11; // Pode ser um CPF válido...\n\"123456789\".lenght === 11; // Não seria um CPF válido...\n\"1234567890B\".lenght === 11; // Aqui temos uma string com tamanho 9, mas é um CPF válido?\n```\n\nNo código acima vimos 3 situações que provam que verificar apenas o tamanho da string não é garantia de que teremos um CPF válido, pois essa é uma verificação muito rasa que não garante que todos os caracteres passados são numéricos. Para conseguir ter a certeza de que os caracteres atendem aos requisitos que desejamos é preciso definir e verificar padrões e isso pode ser feito com uso de expressões regulares.\n\n### O que é uma expressão regular?\n\n> Em ciência da computação, uma **expressão regular** ou \"Regex\" (ou os estrangeirismos **_regex_** ou **regexp**) , abreviação do inglês _regular expression_) provê uma forma concisa e flexível de identificar cadeias de caracteres de interesse, como caracteres particulares, palavras ou padrões de caracteres. Expressões regulares são escritas numa linguagem formal que pode ser interpretada por um processador de expressão regular, um programa que serve um gerador de analisador sintático ou examina o texto e identifica as partes que casam com a especificação dada.\n>\n> [Wikipédia](https://pt.wikipedia.org/wiki/Express%C3%A3o_regular)\n\nDiversas linguagens de programação tem sua própria implementação de expressões regulares, geralmente com pequenas diferenças e em alguns casos com diferenças bem significativas. Mas não se preocupe, pois, a base que você irá aprender a seguir vai ser de grande valor em qualquer linguagem de programação que você for se aventurar.\n\nAgora você já sabe que uma expressão regular permite que palavras ou padrões de caracteres sejam encontrados em um texto, então vamos partir do exemplo mais básico que são os **caracteres literais**.\n\n#### _Antes de prosseguir recomendo que visite o site [regex101](https://regex101.com/) e vá reproduzindo os exemplos que forem sendo abordados ao longo do artigo._\n\n### Caracteres literais\n\nAntes de prosseguir precisamos combinar que todas as nossas regex(expressões regulares) serão escritas entra duas barras(`/SUA REGEX AQUI/`). Agora que estamos na mesma página, qual seria a forma de encontrar todas as palavras \"doce\" que aparecem no nosso trava-línguas?\n\n_O doce perguntou pro doce_\\\n_Qual é o doce mais doce_\\\n_Que o doce de batata-doce._\\\n_O doce respondeu pro doce_\\\n_Que o doce mais doce que_\\\n_O doce de batata-doce_\\\n_É o doce de doce de batata-doce._\n\nJá que queremos encontrar a palavra \"doce\" vamos fazer um uso literal e nossa regex vai ficar assim: `/doce/`\n\nPS: Tudo que for encontrado por nossa regex vai ser destacado com a cor azul.\n\n![Regex primeira ocorrência](/assets/img/captura-de-tela-de-2021-01-15-00-51-29.png)\n\nParabéns! Você acabou de fazer sua primeira regex, mas note que apenas a primeira palavra doce ficou azul... Isso acontece porque por padrão nossa expressão regular busca apenas a primeira ocorrência e para de procurar quando encontra algo que atenda o seu padrão. Tá, mas como resolvemos isso? Vamos resolver utilizando flags!\n\n### Flags\n\nFlags são informações adicionais que passamos para mudar o comportamento da nossa regex. A estrutura de uma regex com flag seria assim: `/doce/SUA FLAG`\n\nExistem diversos tipos de flags, mas por agora vamos focar apenas na `g` que significa global e indica que a busca só deve parar após encontrar todas as ocorrências do texto. Nossa regex ficaria assim `/doce/g` e esse seria o resultado das ocorrências:\n\n![Regex ocorrências globais](/assets/img/captura-de-tela-de-2021-01-15-00-47-04.png)\n\nShow de bola! Encontramos todas as ocorrências para a palavra doce, mas geralmente você não vai usar uma regex para buscar por uma palavra específica... O grande poder de uma regex é permitir que padrões sejam encontrados, então vamos \"dificultar\" um pouco mais as coisas. Preciso de uma expressão regular que seja capaz de encontrar todos os números do texto a seguir:\n\n_0 N4rut0 p0de 5er um p0uc0 dur0 às veze5, t4lvez v0cê nã0 s41b4 d1550, m4s 0 N4rut0 t4mbém cresceu sem p41. N4 verd4de ele nunc4 c0nheceu nenhum de seus p41s, e nunc4 teve nenhum 4m1g0 em n0ss4 4lde14. Mesm0 4ss1m eu nunc4 v1 ele ch0r4r, f1c4r z4ng4d0 0u se d4r p0r venc1d0, ele está sempre d1sp0st0 4 melh0r4r, ele quer ser respe1t4d0, é 0 s0nh0 dele e 0 N4rut0 d4r14 4 v1d4 p0r 1ss0 sem hes1t4r. Meu p4lp1te é que ele se c4ns0u de ch0r4r e dec1d1u f4zer 4lgum4 c01s4 4 respe1t0!_\n\nPara resolver esse problema precisamos aprender mais uma funcionalidade de expressões regulares.\n\n### Classes de caracteres ou conjunto de caracteres\n\nUm conjunto de caracteres é uma lista de possíveis ocorrências que é passada entre `[]`. No nosso caso queremos encontrar qualquer número no nosso texto, então podemos passar uma lista numérica da seguinte forma: `[0123456789]`\\\nÉ como se estivéssemos falando o seguinte para a nossa regex: eu quero que você encontre o digito 0, ou o digito 1, ou digito 2...\n\nOutra forma de escrever um conjunto de caracteres é usando os intervalos. No nosso exemplo queremos encontrar os números de 0 até 9, logo podemos escrever um conjunto da seguinte forma: `[0-9]`. Se o objetivo fosse encontrar os números de 5 até 8 o conjunto seria `[5-8]`.\n\nResumindo, nossa regex ficou assim`/[0-9]/` e os números encontrados foram os seguintes:\n\n![Regex ocorrênciasn globais numéricas ](/assets/img/captura-de-tela-de-2021-01-15-01-04-41.png)\n\nA mesma lógica serve para conjuntos de letras ou de outros caracteres. Podemos usar uma sequência de letras assim `[abcdefghijklmnopqrstuvwxyz]` ou abreviar usando a sequência `[a-z]`.\n\nUm ponto de atenção!! A sequência de `[a-z]` é diferente de `[A-Z]`. A primeira vai encontrar apenas letras minusculas e a segunda apenas letras maiúsculas.\n\n**_\"Mas e se eu quiser encontrar as letras minusculas e maiúsculas?\"_**\n\nVou te dar duas opções!\n\n1. Utilizando uma **flag** de case insensitivo(i) que seria assim `/[a-z]/i`\n2. Usando um conjunto com a sequência de letras minusculas ou a sequência de letras maiúsculas que seria assim `/[a-zA-Z]/`\n\nAs duas opções vão reproduzir o resultado abaixo:\n\n![Regex ocorrênciasn globais de letras](/assets/img/captura-de-tela-de-2021-01-15-01-16-07.png)\n\nSe você analisar o resultado com cuidado vai ver que temos um pequeno problema... Não conseguimos encontrar todas as letras do nosso texto. Todas que possuem algum caractere especial(è,ã) foram ignoradas.\n\n### Classes de caracteres abreviados: o famoso shorthand\n\nTer que sempre escrever `[0-9]`ou `[a-zA-z`] seria um saco, mas felizmente existem maneiras de fazer as mesmas coisas escrevendo menos. Vou listar alguns das principais formas abreviadas\n\n- `\\d` corresponde a qualquer caractere numérico. O mesmo que `[0-9]`\n- `\\D` corresponde a tudo que não é um digito, incluindo caracteres especiais como `!, ç~` e etc.\n- `\\s`corresponde a espaços em branco, tabs, quebra de linhas.\n- `\\S`corresponde a tudo que não for espaços em branco, tabs, quebras de linha.\n- `\\w` corresponde a tudo que é alfanumérico. O mesmo que `[a-zA-z0-9_]`\n- `\\W` corresponde a tudo que não é alfanumérico. Pode ser utilizado em conjunto com \\w para encontrar caracteres alfanuméricos e não alfanuméricos.`[\\w\\W]`\n- `.` é considerado um coringa, pois com ele podemos encontrar qualquer caractere, menos quebras de linha.\n\n### Quantificadores\n\nOs quantificadores, também podem ser conhecidos como repetidores, dizem quantas vezes determinada ocorrência pode se repetir. Até o momento fizemos buscas por letras ou números, mas não chegamos a especificar quantas letras seguidas queremos encontrar, ou quantos números seguidos.\n\nPense na seguinte situação, precisamos encontra o número de uma placa de carro em um texto qualquer.\n\n![Placa de carro](/assets/img/placa-de-carro.jpeg \"Placa de carro\")\n\nUma placa de carro tem a seguinte estrutura: **ABC-1234** (3 letras 1 hífen e 4 números). Note que apenas com o que aprendemos até agora é impossível encontrar o número da placa no texto abaixo:\n\n_O carro com a placa de número ABC-1234 foi furtado na manhã de domingo._\n\nÉ ai que os quantificadores entram! Nós vamos dizer exatamente quantas vezes cada caractere vai se repetir para atender ao nosso padrão. Logo, nossa regex ficaria assim: `/[a-zA-Z]{3}-\\d{4}/g`\n\nA expressão regular é bem simples! Podemos separar ela em 3 partes para ficar mais fácil de entender:\n\n- `[a-zA-Z]{3}` Essa parte diz que qualquer coisa de a-z tem que aparecer 3 vezes\n- `-` Aqui indica que é preciso ter um hífen\n- `\\d{4}` Essa parte diz que 4 números quaisquer devem aparecer seguidos.\n\n![](/assets/img/captura-de-tela-de-2021-01-26-21-49-35.png)\n\nAgora que você já tem uma ideia de como um quantificador pode ser usado, veja uma lista com outros quantificadores importantes:\n\n- `{n}` exatamente `n` repetições/ocorrências.\n- `{n,m}` no mínimo `n` ocorrências e no máximo `m` ocorrências.\n- `{n, }` no mínimo `n` ocorrências e o limite máximo não existe.\n- `{, m}` no máximo `m` ocorrências. Nesse caso o mínimo é 0.\n- `?` 0 ou 1 ocorrência; a mesma coisa que `{, 1}`\n- `+` 1 ou mais ocorrências; mesma coisa que `{1, }`\n- `*` 0 ou mais ocorrências.\n\n### Âncoras\n\nÂncoras definem posições para que os caracteres sejam correspondidos. Uma âncora pode definir o início, o fim ou um limite para que o match seja feito. Vamos a seguinte situação: temos que encontrar arquivos que tenham um formato `.gif`. Pra que isso funcione precisamos garantir que o nome do arquivo sempre vai terminar com .`gif`. Nossa regex ficaria assim: `/\\w+.gif$/`\n\n![Uso da âncora $](/assets/img/captura-de-tela-de-2021-01-30-16-07-35.png)\n\n**Explicando nossa regex...**\n\n- `\\w+` essa parte quer dizer para encontrar um ou mais letrar, números e underline.\n- `.gif$` essa parte quer dizer que a ocorrência deve terminar com `.gif`\n\nAgora que você já tem uma ideia de como uma âncora pode ser usado, veja uma lista com outras âncoras importantes:\n\n- `^` inicio de um texto ou de uma linha, caso esteja utilizando a flag para multiline(`m`)\n- `\\A` inicio de um texto\n- `$` fim de um texto ou de uma linha, caso esteja utilizando a flag para multiline(`m`)\n- `\\Z` fim de um texto\n- `\\b` indica uma \"borda\" para a ocorrência, ou no inicio da palavra, ou no fim.\n\n**Um pequeno exemplo utilizando a âncora `\\b`:**\n\nNossa missão é encontrar todas às vezes que a preposição **de** aparece na frase abaixo.\n\n![Match com a preposição de](/assets/img/captura-de-tela-de-2021-01-30-16-18-23.png)\n\nNote que com a expressão `/de/` conseguimos pegar tudo que tem **de**, incluindo as palavras dez e desânimo. Uma solução é mudar nossa expressão para `/\\bde\\b/`.\n\n![Match com a preposição de usando âncora](/assets/img/captura-de-tela-de-2021-01-30-16-25-10.png)\n\n### Alternância\n\nEsse é bem simples, pois existem casos onde queremos capturar uma ou outra ocorrência. Onde queremos encontrar o número 1 ou o número 2, a palavra rei ou a palavra rato. Pra isso só precisamos colocar que queremos encontrar entre parenteses e separar por uma `|`.\n\nVamos ao exemplo onde queremos encontrar as palavras rato e rei no texto abaixo. A expressão regular vai ficar assim: `/(rato|rei)/`\n\n![Alternância entra duas palavras](/assets/img/captura-de-tela-de-2021-01-30-16-33-50.png)\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nTudo que abordei até aqui é apenas o começo desse assunto tão vasto , mas acredito que seja o suficiente para que você dê um pontapé inicial e não fique tão perdido quando o assunto for expressões regulares. Recomendo dar uma conferida nos links que vou deixar mais abaixo, caso queira se aprofundar mais no assunto.\n\n### Links importantes\n\n- [Expressões Regulares](https://www.regular-expressions.info/index.html)\n- [Expressões Regulares: introdução](http://turing.com.br/material/regex/introducao.html)\n- [Regex 101](https://regex101.com/)\n- [Expressões Regulares: Mozila Developers](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Generics","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":879,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-12-18-typescript-uma-breve-introducao-generics","datePublished":"2020-12-17 08:24:27","dateModified":"2020-12-17 08:24:27","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNos artigos anteriores nós vimos um pouco sobre tipos básicos, enums, type assertions , interfaces, type aliases, classes e type utilities. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n- [Typescript - Uma breve introdução - Interfaces](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)\n- [Typescript - Uma breve introdução - Type Aliases](https://www.cristiano.dev/blog/2020-09-05-typescript-uma-breve-introducao-type-aliases)\n- [Typescript - Uma breve introdução - Classes](https://www.cristiano.dev/blog/2020-10-20-typescript-uma-breve-introducao-classes)\n- [Typescript - Uma breve introdução - Type utilities - Parte 1](https://www.cristiano.dev/blog/2020-10-30-typescript-uma-breve-introducao-type-utilities)\n- [Typescript - Uma breve introdução - Type utilities - Parte 2](https://www.cristiano.dev/blog/2020-12-07-typescript-uma-breve-introducao-type-utilities-parte-2)\n\nNos últimos artigos nós aprendemos a criar tipos e logo em seguida a utilizar esses tipos nas nossas funções, classes ou variáveis, mas até aqui só usamos tipos \"estáticos\". O que eu quero dizer com \"estáticos\" é que se criarmos uma interface, ao longo do nosso código ela vai permanecer a mesma em todos os lugares que a gente utilizar(a não ser que a gente reescreva essa interface, mas isso não vem ao caso). Porém, uma das nossas atribuições como programadores e programadoras é escrever códigos que possam ser reaproveitados na maior parte dos casos. O ideal seria que um trecho de código feito para um dado X pudesse ser facilmente adaptado ou reutilizado para um dado Y no futuro. Existem muitas formas de alcançar esse feito e uma delas é utilizando generics.\n\n### O que é um generic?\n\nTá, mas o que é um generic? Basicamente, um generic é uma forma de passar algum \"argumento\" de tipo para uma função, classe ou interface fazendo com que eles possam ser utilizados de maneiras diferentes e/ou em cenários diferentes. Uma forma clara de entender um generic é pensando em uma função, então vamos ao exemplo.\n\n```typescript\nfunction showInfo(value: string) {\n console.log({ value });\n}\n\nshowInfo(\"Ok\"); // {value: \"Ok\"}\n```\n\nNo trecho de código acima temos uma função simples para mostrar logs, mas note que por hora ela recebe apenas um argumento do tipo string. E se eu quiser utilizar essa função para mostrar logs numéricos?\n\n```typescript\nfunction showInfo(value: string | number) {\n console.log({ value });\n}\n\nshowInfo(42); // {value: 42}\n```\n\nProblema resolvido! E se agora eu quiser mostrar logs de um tipo `Person` que tem a seguinte estrutura `{name: string; age: number`}? Eu poderia simplesmente adicionar esse tipo na minha função, mas note que isso já começa a se tornar algo muito trabalho... Outra solução seria tipar como any, mas assim vamos perder toda a segurança dos nossos tipos.É ai que entram os generics e a nossa função fica da seguinte forma.\n\n```typescript\nfunction showInfo(value: MeuTipo) {\n console.log({ value });\n}\n\ninterface Person {\n name: string;\n age: number;\n}\n\nconst umaPessoa: Person = {\n name: \"Cris\",\n age: 25,\n};\n\nshowInfo(umaPessoa);\n```\n\nOs generics são \"argumentos\" passados entre `<>` igualzinho ao que vimos com [type utilities](https://www.cristiano.dev/blog/2020-10-30-typescript-uma-breve-introducao-type-utilities). No exemplo acima dizemos que a função `showInfo` vai receber um generic chamado `MeuTipo` e esse generic vai ser usado como tipo para o argumento `value` da minha função. É como se após invocar a função ela ficasse assim:\n\n```typescript\nshowInfo(umaPessoa);\n\n// A função ficaria assim\n\nfunction showInfo(value: Person) {\n console.log({ value });\n}\n```\n\nNo nosso exemplo eu utilizei `MeuTipo`, mas o comum é encontrar apenas letras como T, U, etc. Vale lembrar que podemos passar mais de um argumento pro nosso generic, basta separar por vírgula.\n\n```typescript\nfunction showOtherValues(value: T, otherValue: U): T {\n console.log({ value, otherValue });\n return value;\n}\n\nshowOtherValues(false, false); // Erro! Argument of type 'boolean' is not assignable to parameter of type 'String'.\n\nshowOtherValues(\"Cris\", false); // A função retorna a string 'Cris'\n```\n\nMais um ponto importante é que caso nenhum tipo seja informado o typescript vai tentar fazer a inferência de tipos e utilizar any quando não conseguir.\n\n```typescript\nfunction showInfo(value: MeuTipo) {\n console.log({ value });\n}\n\nshowInfo(false); // Aqui value vai ser do tipo boolean\nshowInfo(42); // Aqui value vai ser do tipo number\n```\n\n### Só consigo usar generics com funções?\n\nNão, a gente consegue utilizar generics em classes e até para construir interfaces. A ideia é a mesma das funções, você passa os \"argumentos\" do seu generic logo após o nome da sua classe/interface. Vamos aos exemplos!\n\n```typescript\nclass GenericClass {\n constructor(value: T) {\n this.value = value;\n }\n\n value: T;\n\n changeValue(v: T) {\n this.value = v;\n }\n\n getValue(): T {\n return this.value;\n }\n}\n\nlet num = new GenericClass(0);\n\nnum.getValue(); // 0\n\nnum.changeValue(10); // 10\n\nlet str = new GenericClass(\"\");\n\nstr.getValue(); // ''\n\nstr.changeValue(10); // Erro! Argument of type 'number' is not assignable to parameter of type 'string'.\n\nstr.changeValue(\"Cris\"); // Cris\n```\n\nAgora veja um exemplo utilizando interfaces.\n\n```typescript\ninterface GenericInterface {\n value: T;\n getValue(): T;\n}\n\nconst myObj: GenericInterface = {\n value: 0,\n getValue() {\n return this.value;\n },\n};\n```\n\n### Finalizando...\n\nGeneric é uma forma de escrever algo genérico, assim como o nome sugere... Utilizando essa funcionalidade podemos construir tipos fáceis de serem aproveitados para as nossas aplicações. Isso que vimos aqui é apenas o essencial para que você não se assuste quando ver um código como esse que acabei de tirar da tipagem do React.\n\n![Generics na tipagem do React](/assets/img/hooks.png \"Generics na tipagem do React\")\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/docs/handbook/intro.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Mini-curso de Typescript do Willian Justen](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)\n- [TypeScript - Entendendo Generics por completo](https://oieduardorabelo.medium.com/typescript-entendendo-generics-por-completo-40a372aeea5)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Type utilities - Parte 2","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":412,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-12-07-typescript-uma-breve-introducao-type-utilities-parte-2","datePublished":"2020-12-06 09:31:06","dateModified":"2020-12-06 09:31:06","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\n![](/assets/img/ts-js.png)\n\nNos artigos anteriores nós vimos um pouco sobre tipos básicos, enums, type assertions , interfaces, type aliases, classes e type utilities. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n- [Typescript - Uma breve introdução - Interfaces](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)\n- [Typescript - Uma breve introdução - Type Aliases](https://www.cristiano.dev/blog/2020-09-05-typescript-uma-breve-introducao-type-aliases)\n- [Typescript - Uma breve introdução - Classes](https://www.cristiano.dev/blog/2020-10-20-typescript-uma-breve-introducao-classes)\n- [Typescript - Uma breve introdução - Type utilities - Parte 1](https://www.cristiano.dev/blog/2020-10-30-typescript-uma-breve-introducao-type-utilities)\n\n### Exclude\n\nSe funcionamento é muito simples. Esse utilitário cria um novo tipo removendo tudo que é passado na lista de keys.\n\n```typescript\ntype Tiers = \"Ferro\" | \"Bronze\" | \"Prata\" | \"Mestre\" | \"Desafiante\";\ntype LowTiers = Exclude;\n// LowTiers aceita os valores 'Ferro' | 'Bronze' | 'Prata'\n```\n\nO interessante é que além das keys, também podemos dizer quais tipos primitivos queremos excluir.\n\n```typescript\ntype GenericType = (() => number) | number | string | (() => void);\ntype NewGenericType = Exclude;\n\n// NewGenericType é um tipo que aceita number e string, sem as funções.\n```\n\nNo exemplo acima eu criei um novo `type` excluindo todas as funções que estavam presentes no nosso `type`base.\n\n### Extract\n\nO funcionamento não é tão diferente do `Exclude`. Aqui criamos um `type` usando apenas as keys que passarmos como argumentos. Vale lembrar que aqui podemos escolher tipos primitivos para extrair.\n\n```typescript\ntype GenericType = (() => number) | number | string | (() => void);\ntype NewGenericType = Extract;\n\n// NewGenericType é um tipo que aceita apenas funções.\n```\n\n### Parameters\n\nConstrói uma tupla com base nos parâmetros de uma função(tipagem da função) fornecida. Recomendo dar uma olhadinha nesse [artigo](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2), caso não esteja familiarizado com tuplas.\n\n```typescript\ntype GenericFunctionType = (a: string, b: number, c: boolean) => void;\n\ntype GenericType = Parameters;\n\n// GenericType é uma tupla com a seguinte estrutura [string, number, boolean]\n\nconst tupla: GenericType = [\"zero\", 1, false];\n```\n\n### ReturnType\n\nEsse utilitário recebe a tipagem de uma função e cria um `type` com base no retorno da mesma.\n\n```typescript\ntype GenericFunction = () => number;\n\ntype GenericType = ReturnType;\n\nconst tupla: GenericType = 1;\n```\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nExistem outros utilitários do typescript, porém, eles não são tão convencionais e acredito que as chances de você precisar usar um deles é muito remota. Mas basta acessar a [documentação](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype), caso queira conhecer a lista completa.\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/docs/handbook/intro.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Mini-curso de Typescript do Willian Justen](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Type utilities - Parte 1","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1064,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-10-30-typescript-uma-breve-introducao-type-utilities","datePublished":"2020-10-29 09:31:06","dateModified":"2020-10-29 09:31:06","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\n![Javascript|Typescript](/assets/img/ts-js.png)\n\nNos artigos anteriores nós vimos um pouco sobre tipos básicos, enums, type assertions , interfaces, type aliases e classes. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n- [Typescript - Uma breve introdução - Interfaces](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)\n- [Typescript - Uma breve introdução - Type Aliases](https://www.cristiano.dev/blog/2020-09-05-typescript-uma-breve-introducao-type-aliases)\n- [Typescript - Uma breve introdução - Classes](https://www.cristiano.dev/blog/2020-10-20-typescript-uma-breve-introducao-classes)\n\n### Type Utilities\n\nType utilities são um conjunto de utilitários que o typescript nos oferece para manusear tipos de forma simples. Esses utilitários são disponíveis globalmente e conhece-los são de extrema importância pra que você não olhe um código typescript e fique voando.\n\nO padrão dos utilitários é `NOME`. É como se estivéssemos invocando uma função, porém usando <>.\n\n#### Partial\n\nEsse utilitário faz com que todas as propriedades de uma interface se tornem opcionais.\n\nSeu uso é bastante simples, basta passar o tipo como \"argumento\" `Partial`\n\n```typescript\ninterface Music {\n name: string;\n artist: string;\n duration: number;\n}\n\ntype newMusic = Partial;\n// É isso que newMusic representa\n// interface newMusic {\n// name?: string;\n// artist?: string;\n// duration?: number;\n// }\n\nconst song: newMusic = {\n name: \"yura yura \",\n};\n```\n\n#### Required\n\nFaz exatamente o oposto do `Partial`. Com eles todas as propriedades de um tipo se tornam obrigatórias.\n\n```typescript\ninterface User {\n name?: string;\n age?: number;\n}\n\nconst oldUser: User = {\n name: \"Cristiano\",\n};\n\nconst newUser: Required = {\n name: \"Cristiano\",\n};\n// Aqui vamos ter um pequeno erro\n\n//Property 'age' is missing in type '{ name: string; }' but required in type 'Required'.\n```\n\n#### Readonly\n\nConforme o nome sugere, esse utilitário faz com que todos os itens de um tipo sejam apenas de leitura. Isso impossibilita que um valor seja reatribuído em tempo de execução. Ou seja, você não consegue alterar um valor enquanto desenvolve, mas é possível fazer reatribuições depois que o typescript for compilado para javascript, pois no fim das contas o objeto não é congelado com [Object.freeze](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze).\n\n```typescript\ninterface Music {\n name: string;\n artist: string;\n duration: number;\n}\n\ntype newMusic = Readonly;\n\nconst song: newMusic = {\n name: \"re: re\",\n artist: \"Asian kung -u generation\",\n duration: 5.32,\n};\n\nsong.duration = 5.33;\n// Aqui vamos ter um pequeno erro\n// Cannot assign to 'duration' because it is a read-only property\n```\n\n![Playground typescript](/assets/img/Captura de tela de 2020-11-03 23-59-04.png \"Resultado do typescript compilado\")\n\nA imagem acima mostra lado a lado os códigos typescript e javascript. Note que o typescript apresenta um erro de compilação e isso falharia com nosso build, mas meu foco é apenas o javascript após uma compilação de sucesso... veja que eu tenho uma reatribuição e um console no meu javascript. Logo abaixo temos o resultado do console e você pode ver que consegui alterar a `duration` de `5.32` para `5.33`. É muito importante entender que o `Readonly` não substitui o [Object.freeze](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze).\n\n### Record\n\nO `Record` recebe dois \"parâmetros\" que são utilizados para construir uma nova interface. Os parâmetros são as keys, que serão as propriedades da interface, e o o type que vai ser usado como o tipo de cada uma das propriedades. É meio confuso, mas com os exemplos vai ser fácil de absorver a ideia.\n\n```typescript\ninterface Character {\n name: string;\n level: number;\n}\n\ntype Classes = \"mage\" | \"paladin\" | \"warrior\";\n\ntype TeamType = Record;\n\nconst team: TeamType = {\n mage: { name: \"Cris\", level: 1 },\n paladin: { name: \"Jon\", level: 5 },\n warrior: { name: \"Maria\", level: 22 },\n};\n```\n\nNo código acima declaramos o `TeamType` que seria equivalente a declarar a interface abaixo:\n\n```typescript\ninterface TeamType {\n mage: {\n name: string;\n level: number;\n };\n paladin: {\n name: string;\n level: number;\n };\n warrior: {\n name: string;\n level: number;\n };\n}\n```\n\nMas porque usar `Record` ao invés de simplesmente declarar uma interface? Usando o `Record` temos algo mais dinâmico, pense o seguinte: atualmente temos apenas as classes de rpg **mage**, **paladin** e **warrior**. E se futuramente as classes **barbarian** e **shaman** forem introduzidas? Com `Record` só precisamo alterar o nosso type Classes ao invés de criar 2 novas interfaces.\n\n### Pick\n\nCom esse utilitário nós podemos criar um tipo escolhendo quais partes de um tipo base queremos utilizar. Os \"argumentos\" que o `Pick` recebe são os mesmos do `Record`, um tipo e uma lista de chaves separadas por `|`.\n\n```typescript\ninterface Music {\n name: string;\n artist: string;\n duration: number;\n style: string;\n}\n\ntype Artist = Pick;\n\nconst newArtist: Artist = {\n artist: \"Emicida\",\n style: \"Rap\",\n};\n```\n\n### Omit\n\nO `Omit` faz exatamente o contrário do `Pick`. Ele extrai todas as propriedades de um tipo, com exceção das que forem passadas como argumento. Quando escolher omit ao invés do pick? Isso é simples, não faz sentido listar todas as propriedades de um tipo com pick, quando podemos apenas passar as propriedades que não queremos.\n\n```typescript\ntype Artist = {\n name: string;\n};\ninterface MovieDetails {\n name: string;\n poster: string;\n year: number;\n duration: number;\n category: string;\n rate: number;\n sinopse: string;\n casting: Artist[];\n}\n\ntype Movie = Omit;\n\nconst newmovie: Movie = {\n name: \"O Castelo Animado\",\n category: \"animation\",\n poster: \"https://castelo.png\",\n year: 2004,\n duration: 1.59,\n rate: 4.6,\n sinopse: \"Uma bruxa lança uma terrível maldição sobre a jovem Sophie...\",\n};\n```\n\nSeria bem mais trabalhoso se a gente usasse pick para listar todas as propriedades que iriamos reaproveitar no nosso tipo.\n\n### NonNullable\n\nEsse é um utilitário bem simples, pois ele apenas remove `null` e `undefined` do nosso tipo. Vale lembrar que se temos uma interface com uma propriedade null/undefined e usarmos o `NonNullable` nada irá acontecer.\n\n```typescript\n// Caso onde NonNullable funciona\ntype GenericType = string | number | undefined | null | boolean[];\n\nconst someThing: NonNullable = null;\n// Aqui vamos ter um pequeno erro\n//Type 'null' is not assignable to type 'string | number | boolean[]'.\n\ninterface User {\n name: undefined;\n age: number;\n}\n\n// Caso onde NonNullable não funciona\n\nconst newUser: NonNullable = {\n age: 22,\n};\n\n// Aqui vamos ter um pequeno erro\n//Property 'name' is missing in type '{ age: number; }' but required in type 'User'.\n```\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. 😊\n\nA lista de utilitários é grande, por isso resolvi dividir esse tópico em duas partes.\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/docs/handbook/intro.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Mini-curso de Typescript do Willian Justen](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Classes","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1230,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-10-20-typescript-uma-breve-introducao-classes","datePublished":"2020-10-19 01:00:27","dateModified":"2020-10-19 01:00:27","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNos artigos anteriores nós vimos um pouco sobre tipos básicos, enums, type assertions , interfaces e type aliases. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n- [Typescript - Uma breve introdução - Interfaces](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)\n- [Typescript - Uma breve introdução - Type Aliases](https://www.cristiano.dev/blog/2020-09-05-typescript-uma-breve-introducao-type-aliases)\n\nAntes prosseguirmos gostaria de deixar claro que não vamos abordar orientação a objetos nesse artigo! O objetivo aqui é apresentar algumas das funcionalidades que o typescript nos oferece para trabalhar com classes.\n\n### Classes\n\n> Classes em JavaScript são introduzidas no ECMAScript 2015 e são simplificações da linguagem para as heranças baseadas nos protótipos. A sintaxe para classes **não** introduz um novo modelo de herança de orientação a objetos em JavaScript. Classes em JavaScript provêm uma maneira mais simples e clara de criar objetos e lidar com herança.\n>\n> _[MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes)_\n\n```typescript\nclass Student {\n constructor(name, n1, n2, n3) {\n this.name = name;\n this.n1 = n1;\n this.n2 = n2;\n this.n3 = n3;\n }\n\n getAverage() {\n return (this.n1 + this.n2 + this.n3) / 3;\n }\n}\n\nconst cristiano = new Student(\"Cristiano\", 7, 8, 9);\nconsole.log(cristiano); // {name: \"Cristiano\", n1: 7, n2: 7, n3: 7}\nconsole.log(cristiano.name); // Cristiano\nconsole.log(cristiano.getAverage()); // 8\n```\n\nAté aqui não tem nada de typescript... Todo código acima é vanilla js e você consegue executar ele no console do navegador sem grandes problemas. Recomendo conferir a [documentação do MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes), caso não esteja confortável com classes no javascript.\n\n### Tá, mas onde tem typescript?\n\n![Will Smith pensativo](https://media1.tenor.com/images/8ba280cf79c3a988bfb7cce7258e39d6/tenor.gif?itemid=4813460)\n\nCerto, é hora de focar no que o typescript oferece, além do básico de classes que você já deve conhecer. Vamos aprender um pouco sobre modificadores de acesso e classes abstratas.\n\n> Em programação orientada a objetos,**modificador de acesso**, também chamado de **visão de método** ou ainda **visão de atributo**, é a palavra-chave que define um atributo, método ou classe como público, privado ou protegido.\n>\n> _[Wikipédia](https://pt.wikipedia.org/wiki/Modificador_de_acesso)_\n\n#### Público(public)\n\nPor padrão tudo no typescript é público até que você diga o contrário. Isso quer dizer que conseguimos acessar e manipular os métodos e propriedades(atributos) das nossas classes livremente. É interessante utilizar a palavra-chave `public` de forma explicita para deixar tudo padronizado, mas você verá que é algo opcional.\n\n```typescript\nclass Employee {\n public name: string;\n public salary: number;\n\n public constructor(name: string, salary: number) {\n this.name = name;\n this.salary = salary;\n }\n}\n\nconst programmer = new Employee(\"John\", 12000);\n\nconsole.log(programmer.name); // John\nconsole.log(programmer.salary); // 12000\n\nprogrammer.salary = 9999;\n\nconsole.log(programmer.salary); // 9999\n```\n\nCom o modificador public(ou não utilizando nenhum modificador) conseguimos pintar e bordar com nosso objeto. Você notou que conseguimos alterar até o salário depois que instanciamos a classe e criamos o objeto `programmer`?\n\nA classe declarada abaixo tem o **MESMO** efeito da que declaramos anteriormente, a única diferença é que não estamos explicitando que as propriedades são públicas.\n\n```typescript\nclass Employee {\n name: string;\n salary: number;\n\n constructor(name: string, salary: number) {\n this.name = name;\n this.salary = salary;\n }\n}\n\nconst programmer = new Employee(\"John\", 12000);\n\nconsole.log(programmer.name); // John\nconsole.log(programmer.salary); // 12000\n```\n\n#### Privado(private)\n\nTambém podemos declarar propriedades e métodos como privado, isso fará com que eles não sejam acessíveis fora da sua classe.\n\n```typescript\nclass User {\n private username: string;\n private password: string;\n\n constructor(name: string, pass: string) {\n this.username = name;\n this.password: pass;\n }\n};\n\nconst admin = new User('Cristiano', '123');\nconsole.log(admin.username); // Property 'username' is private and only accessible within class 'User'.\n```\n\nAqui só conseguimos acessar `username` ou `password` expondo por meio de algum método, ou atributo público.\n\n```typescript\nclass User {\n private username: string;\n private password: string;\n\n constructor(name: string, pass: string) {\n this.username = name;\n this.password: pass;\n }\n\n public getInfo() {\n return {\n username: this.username,\n password: this.passowrd\n\n }\n }\n};\n\nconst admin = new User('Cristiano', '123');\nconsole.log(admin.getInfo());\n```\n\n#### Protegido(protected)\n\nMétodos e atributos protegidos são semelhantes aos privados. A única diferença é que conseguimos acessá-los em classes derivadas.\n\nComo assim?\n\n```typescript\nclass User {\n protected username: string;\n\n constructor(name: string) {\n this.username = name;\n }\n}\n\nconst user = new User(\"Cristiano\");\n\nuser.username; //Property 'username' is protected and only accessible within class 'User' and its subclasse\n```\n\nO código acima nos gera um erro, pois estamos tentando acessar uma propriedade protegida que só pode ser acessada na própria classe ou nas classes derivadas dela.\n\nSegue o exemplo:\n\n```typescript\nclass User {\n protected username: string;\n\n constructor(name: string) {\n this.username = name;\n }\n}\n\nclass Employee extends User {\n private salary: number;\n\n constructor(username: string, salary: number) {\n super(username);\n this.salary = salary;\n }\n\n getInfo() {\n return `${this.username} recebe o salário de ${this.salary}`;\n }\n}\n\nconst admin = new Employee(\"Cristiano\", 999);\nconsole.log(admin.username); // Property 'username' is protected and only accessible within class 'User' and its subclasse\nconsole.log(admin.getInfo());\n```\n\nA classe `Employee` é derivada de `User`, por isso ela consegue acessar `username` no método `getInfo.` Porém, vamos ter um erro ao tentar acessar `username` em um objeto criado de `Employee.`\n\n#### Apenas leitura(readonly)\n\nPropriedades e métodos readonly são públicos, mas apenas para leitura. Não conseguimos fazer alterações no seu valor depois de iniciados.\n\n```typescript\nclass User {\n readonly username: string;\n\n constructor(name: string) {\n this.username = name;\n }\n}\n\nconst user = new User(\"Cristiano\");\nconsole.log(user.username); // Cristiano\nuser.username = \"João\"; // Cannot assign to 'username' because it is a read-only property.\n```\n\n### Estática(static)\n\nAté o momento só vimos propriedades que vão aparecer no objeto quando uma classe for instanciada, mas também podemos declarar propriedades visíveis apenas a classe e para uso inter. Pra isso basta utilizar a palavra-chave `static` e para acessar ao invés do `this` usamos o nome da classe.\n\n```typescript\nclass User {\n static id = \"22\";\n public username: string;\n\n constructor(name: string) {\n this.username = name;\n }\n\n getInfo() {\n console.log({ id: User.id, name: this.username });\n }\n}\n\nconst user = new User(\"Cristiano\");\nuser.getInfo(); // { id: \"22\", name: \"Cristiano\" }\n```\n\n### Classes Abstratas(abstract)\n\nClasses abstratas são classes bases que outras classes podem ser derivadas, porém, não podemos fazer instância de uma classe abstrata. É algo que você pode usar **APENAS** como \"inspiração\" para criar outras classes.\n\nPara criar uma classe abstrata basta usar a palavra reservada `abstract` e quando você tentar fazer uma instância receberá um erro.\n\n```typescript\nabstract class Player {\n jump(): void {\n console.log(\"jumping\");\n }\n}\n\nconst player1 = new Player(); // Cannot create an instance of an abstract class.\n```\n\nPorém, você pode estender essa classe e usar os seus métodos ou propriedades.\n\n```typescript\nabstract class Player {\n jump(): void {\n console.log(\"jumping\");\n }\n}\n\nclass PlayerOne extends Player {\n walk() {\n console.log(\"walking\");\n }\n}\n\nconst p1 = new PlayerOne();\np1.jump(); // \"jumping\"\np1.walk(); // \"walking\"\n```\n\nTambém podemos criar métodos abstratos sem nenhuma implementação, fazendo isso na classe derivada.\n\n```typescript\nabstract class Player {\n abstract attack(): void;\n\n jump(): void {\n console.log(\"jumping\");\n }\n}\n\nclass Boss extends Player {\n constructor() {\n super();\n }\n\n attack() {\n console.log(\"attacking\");\n }\n}\n\nconst finalBoss = new Boss();\nfinalBoss.jump(); // \"jumping\"\"\nfinalBoss.attack(); // attacking\n```\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. =]\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/v2/docs/handbook/basic-types.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Mini-curso de Typescript do Willian Justen](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Type Aliases","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":824,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-09-05-typescript-uma-breve-introducao-type-aliases","datePublished":"2020-09-05 01:10:03","dateModified":"2020-09-05 01:10:03","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNos artigos anteriores nós vimos um pouco sobre tipos básicos, enums, type assertions e interfaces. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n- [Typescript - Uma breve introdução - Interfaces](https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces)\n\nHoje vamos aprender um pouco sobre `type aliases`(type alias), mais uma forma oferecida pelo typescript para criar tipos reutilizáveis de maneira bastante simples.\n\nEm poucas palavras, `type aliases` nos permite dar \"apelidos\" para tipos primitivos, tuplas, tipos personalizados e qualquer outro tipo que você desejar. Em alguns casos um `type aliase` pode ser semelhante às interfaces, mas ambos tem peculiaridades que vamos entender ao longo deste artigo.\n\n### Criando nosso primeiro type aliase\n\nPara criar uma `type aliase` é muito simples, basta usar a palavra reservada `type`, inserir um nome e um valor. Igualzinho a declaração de uma variável. Um caso clássico para seu uso é quando precisamos que uma variável possa assumir o valor de dois ou mais tipos primitivos.\n\n```typescript\ntype numberOrString = number | string;\n\nlet val: numberOrString = 10;\n\nval = \"olá\";\nval = false; // error\n```\n\nMas esse não é o único caso de uso... pra ficar mais claro vamos supor que temos uma função que retorna o faturamento diário, semanal e mensal de uma empresa.\n\nPS: Isso é baseado em um caso real...\n\n```typescript\nfunction getRevenue(type: \"daily\" | \"weekly\" | \"monthly\") {\n api.get(type); // busca na api...\n}\n\nlet revenueType: \"daily\" | \"weekly\" | \"monthly\" = \"daily\";\n\ngetRevenue(revenueType);\n```\n\nAté aqui tudo bem... Mas vamos supor que agora temos uma função que retorna o total de despesas diário, semanal e mensal de uma empresa.\n\n```typescript\nfunction getExpenses(type: \"daily\" | \"weekly\" | \"monthly\") {\n api.get(type); // busca na api...\n}\n\nlet expenseType: \"daily\" | \"weekly\" | \"monthly\" = \"weekly\";\n\ngetExpenses(expenseType);\n```\n\nAgora as coisas já começam a ficar complicadas... Imagine que nosso sistema também vai fornecer informações anuais. Nós precisamos alterar o código acima em pelo menos 4 lugares. Utilizando `type aliases` nós podemos resolver esse problema facilmente, basta concentrar nosso tipo em um único ponto do código.\n\n```typescript\ntype period = \"daily\" | \"weekly\" | \"monthly\" | \"yearly\";\n\nfunction getRevenue(type: period) {\n api.get(type); // busca na api...\n}\n\nlet revenueType: period = \"daily\";\n\ngetRevenue(revenueType);\n\nfunction getExpenses(type: period) {\n api.get(type); // busca na api...\n}\n\nlet expenseType: period = \"weekly\";\n\ngetExpenses(expenseType);\n```\n\nEsse foi um caso muito comum para uso de `type aliases`, mas podemos fazer seu uso em diversas outras situações.\n\nDaqui pra frente vou mostrar algumas comparações entre interfaces e `type aliases` para facilitar sua compreensão.\n\n### Type Aliases x Interfaces\n\nUm `type aliases` pode se comportar como uma interface, porém com algumas diferenças bem notáveis.\n\n##### Tipos primitivos\n\nAs interfaces não se dão muito bem com tipos primitivos... Quando queremos ter um tipo que aceite múltiplos tipos primitivos `type` é a melhor opção.\n\n```typescript\n// usanto type\ntype id = number | string;\n```\n\nEm contra-partida, interfaces são uma ótima pedida quando queremos fazer representação e composição de tipos que são objetos.\n\n##### Extends\n\nOutra grande diferença é a forma que fazemos a junção de dois tipos(estendemos). Com interfaces usamos o `extends` e com o `type aliase` usamos o `&`.\n\n```typescript\n// Com interfaces\ninterface Person {\n name: string;\n age: number;\n}\n\ninterface PowerInfo {\n power: string[];\n weakness: string[];\n}\n\ninterface Hero extends Person, PowerInfo {}\n\n// Com type aliases\ntype Person = {\n name: string;\n age: number;\n};\n\ntype PowerInfo = {\n power: string[];\n weakness: string[];\n};\n\ntype Hero = Person & PowerInfo;\n```\n\n##### Tuplas\n\nInterfaces não funcionam para declaração de tuplas.😅 Você pode até tentar simular, mas logo vai ver que não funciona como esperado...\n\n```typescript\ntype tuple = [number, boolean, number];\nlet myTuple: tuple = [0, true, 1];\nmyTuple = [0, 1]; // error\n```\n\n##### Merge\n\nNão podemos declarar duas `type aliases` com o mesmo nome em um escopo, isso gera um erro, enquanto duas interfaces declaradas com o mesmo nome são mergeadas(mescladas).\n\n```typescript\ninterface Person {\n name: string;\n}\n\ninterface Person {\n age: number;\n}\n\n// Agora person é:\ninterface Person {\n name: string;\n age: number;\n}\n\ntype Animal = {\n name: string;\n};\n\ntype Animal = {\n // Error. Já existe um tipo declarado com o nome Animal\n specie: string;\n};\n```\n\n### Quando usar type e quando usar interface?\n\nAssim como pra quase toda pergunta da vida... A resposta pra pergunta acima é **DEPENDE**. Sim, depende do seu time e depende do seu objetivo.\n\nGeralmente `type aliases` vai te atender 100% e de quebra vai ter dar a segurança de não fazer merges sem intenção, pois usando interfaces pode acontecer de você fazer uma redeclaração sem querer e acabar bagunçando sua tipagem...\n\nMas como eu disse, tudo depende do seu objetivo. Por exemplo, em uma lib pode ser que existam tipos que precisam ser facilmente extensíveis.\n\nE por último, mas não menos importante, siga o padrão do seu time. Ele usa interface? Siga o padrão! Não existe a necessidade de sair mudando tudo pra type, pois não vai fazer tanta diferença assim.\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. =]\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/v2/docs/handbook/basic-types.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Mini-curso de Typescript do Willian Justen](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Interfaces","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":1321,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-08-10-typescript-uma-breve-introducao-interfaces","datePublished":"2020-08-09 10:02:04","dateModified":"2020-08-09 10:02:04","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNos artigos anteriores a gente viu um pouco sobre tipos básicos, enums e type assertions. Recomendo dar uma conferida neles, caso não se sinta confortável com esses conceitos.\n\n- [Typescript - Uma breve introdução](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao)\n- [Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion](https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2)\n\nEm quase todos os cenários apenas os tipos básicos não vão ser suficientes para que consigamos escrever uma aplicação robusta usando typescript, pois a medida que os nossos dados ficam mais complexos as tipagem tendem a seguir o mesmo caminho. É pensando nesse cenário que o typescript nos oferece as interfaces para a criação de tipos customizados.\n\n### Duck typing\n\nAntes de prosseguir preciso explicar um pouco sobre [Duck typing](https://pt.wikipedia.org/wiki/Duck_typing)(tipagem pato), pois é um conceito importante para entender o funcionamento de interfaces.\n\nO uso do duck typing ou structural subtyping(tipagem estrutural) foca exatamente na forma que os valores apresentam, ela segue o princípio de que se anda como um pato, voa como um pato e grasna como um pato então é um pato. O nome desse conceito é associado ao [teste do pato](https://pt.wikipedia.org/wiki/Teste_do_pato) de [James Whitcomb Riley](https://pt.wikipedia.org/w/index.php?title=James_Whitcomb_Riley&action=edit&redlink=1 \"James Whitcomb Riley (página não existe)\").\n\n> Suponha que você vê um pássaro andar por volta de uma fazenda. Este pássaro não tem nenhuma placa que diz 'pato'. Mas o pássaro certamente parece a um pato. Também, ele vai ao tanque e você nota que ele nada como um pato. Então ele abre o seu bico e grasna como um pato. Bem, agora você conseguiu provavelmente a conclusão que o pássaro é um pato, mesmo que ele esteja usando uma placa ou não Harv,Immerman,1982, p.102\n\nIsso pode não ter feito muito sentido pra você, mas siga lendo o textinho que logo vai ficar claro como isso se comporta em termos de código.\n\n### Criando nossa primeira interface\n\nPense que temos uma função que recebe um usuário como argumento e esse usuário precisa ter sempre nome e idade. A função ficaria assim:\n\n```typescript\nfunction showUser(user: { name: string; age: number }) {\n console.log(user.name + \"tem \" + user.age + \" anos de idade\");\n}\n\nshowUser({ name: \"Cristiano\", age: 25 });\n```\n\nAgora imagine que precisamos fazer operações com user em várias partes do nosso código e também precisamos garantir que ele sempre tenha name e age. A gente poderia simplesmente sair reescrevendo o objeto `{name: string, age: number}` em todo lugar que a gente precisar ou então poderíamos extrair isso em uma interface:\n\n```typescript\ninterface User {\n name: string;\n age: number;\n}\n\nfunction showUser(user: User) {\n console.log(user.name + \"tem \" + user.age + \" anos de idade\");\n}\n\nconst newUser: User = {\n name: \"Cristiano\",\n age: 25,\n};\n```\n\n### Tá, mas cadê o duck typing?\n\nCalma... Vamos supor que temos uma função que recebe o nome e o tipo de um pokemon e imprime um dos seus counters.\n\n```typescript\ninterface Pokemon {\n name: string;\n type: \"fogo\" | \"agua\" | \"grama\";\n}\n\nfunction showPokemonCounter(pokemon: Pokemon) {\n const counters = {\n fogo: \"agua\",\n agua: \"grama\",\n grama: \"fogo\",\n };\n\n console.log(pokemon.name + \" é fraco contra \" + counters[pokemon.type]);\n}\n\nconst charmander = { name: \"charmander\", type: \"fogo\" };\nshowPokemonCounter(charmander); // charmander é fraco contra agua\n```\n\nO typescript verifica se o argumento passado para a função `showPokemonCounter` é exatamente um objeto que possuí uma propriedade `name` do tipo string e uma propriedade `type` do tipo 'fogo', 'agua' ou 'grama'.\n\nAté aqui tudo bem... E agora que entra o **duck typing**. O que acontece se eu adicionar mais uma propriedade no argumento que vou passar para `showPokemonCounter` ?\n\n```typescript\ninterface FullPokemon {\n name: string;\n type: \"fogo\" | \"agua\" | \"grama\";\n pokeNumber: number;\n}\n\nconst squirtle: FullPokemon = { name: \"squirtle\", type: \"agua\", number: 7 };\nshowPokemonCounter(squirtle); // squirtle é fraco contra grama\n```\n\nOpa... Nenhum erro aconteceu! Isso graças a ação do **duck typing**, pois mesmo tendo a propriedade `number`, o pokemon que passamos ainda tem o `name` e o `type` exatamente como a função esperava.\n\nÉ como se a gente tivesse um pato que voa, nada, grasna e fica invisível. Ele ta fazendo uma coisa diferente..., mas ele ainda faz as coisas que definimos como essenciais para classificá-lo como um pato.\n\n### Interfaces híbridas\n\nAté aqui você já deve ter percebido que as interfaces podem ser compostas por diversos tipos. Number, strings, booleans, functions, etc e até tipos customizados.\n\n```typescript\ninterface Addres {\n city: string;\n country: string;\n}\n\ninterface User {\n name: string;\n address: Addres;\n sayHi(): string;\n}\n\nconst user: User = {\n name: \"Cris\",\n address: { city: \"Alagoinhas\", country: \"Brasil\" },\n sayHi: () => \"olá\",\n};\n```\n\n### Propriedades opcionais\n\nPodem existir casos em que algumas propriedades podem existir ou não e é muito fácil de definir isso, basta adicionar um `?` depois do nome da propriedade. Só é preciso tomar cuidado, pois uma propriedade não definida tem o seu valor `undefined`.\n\n```typescript\ninterface User {\n name: string;\n age?: number;\n}\n\nconst user = (User = { name: \"Cris\" });\nuser.name; // Cris\nuser.age; // undefined\n```\n\n### Propriedade de apenas leitura\n\nPara casos em que uma propriedade não pode ser alterada depois da sua definição a gente pode usar o `readonly`.\n\n```typescript\ninterface User {\n readonly id: number;\n name: string;\n age?: number;\n}\n\nconst user: User = { id: 1, name: \"Cris\" };\n\nuser.name = \"Cristiano\"; // tudo ok\nuser.id = 2; // Erro! Cannot assign to 'id' because it is a read-only property.\n```\n\n### Tipando funções\n\nAs interfaces permitem tipar objetos de diversas formas, mas elas também são ótimas para descrever tipos de funções.\n\n```typescript\ninterface SumType {\n (a: number, b: number): number;\n}\n\nconst sum: SumType = (a, b) => a + b;\nsum(\"a\", 2); // Erro! Argument of type '\"a\"' is not assignable to parameter of type 'number'.\n\nsum(2, 2); // 4\n```\n\n### Estendendo interfaces\n\nAssim como classes, as interfaces podem ser estendidas e isso permite que a gente crie interfaces genéricas e reaproveitáveis.\n\n```typescript\ninterface User {\n name: string;\n email: string;\n}\n\ninterface Admin extends User {\n isAdmin: boolean;\n}\n```\n\n## Interfaces com tipos Indexáveis\n\nOs tipos indexáveis tem uma _assinatura de índice_ que descreve os tipos que podemos usar para indexar em um objeto, exemplo `a[10]` (usa um número como índice) `a['name']`(usa string como índice).\n\n```typescript\ninterface NumberOrStringDictionary {\n [key: number]: number | string;\n}\n\nconst array: NumberOrStringDictionary = [1, 2, \"a\"];\n\nconsole.log(array[1]); // 2\nconsole.log(array[\"2\"]); // Erro\n```\n\nÉ interessante que se tentarmos fazer um `array.push('b')` vamos ter um erro de tipo, pois `push` não foi definido na interface `NumberOrStringDictionary`. Teríamos que fazer algo assim:\n\n```typescript\ninterface NumberOrStringDictionary {\n [key: number]: number | string;\n push(val: number | string): number;\n}\n\nconst array: NumberOrStringDictionary = [1, 2, \"a\"];\narray.push(\"b\");\nconsole.log(array[3]); // b\n```\n\nTambém podemos usar tipos indexáveis para trabalhar com objetos ou array de objetos que as propriedades são dinâmicas. Eu costumo usar isso com uma certa constância.\n\n```typescript\ninterface DynamicObject {\n [key: string]: number;\n}\n\nconst array: DynamicObject[] = [{ one: 1, two: 2 }, { three: 3 }, { four: 4 }];\n\nconsole.log(array); // [ { \"one\": 1, \"two\": 2 }, { \"three\": 3 }, { \"four\": 4 } ]\n```\n\n### Devo usar classes ou interfaces\n\nExiste a possibilidade de tipar nossos dados utilizando classes, porém quando nosso typescript é transformado em javascript a gente acaba tendo uma classe inútil, pois ela é declarada e não é usada em local nenhum. Isso acontece porque o typescript só fazia uso em tempo de execução. Veja as imagens abaixo.\n\n![Tipagem usando interfaces](/assets/img/Screenshot from 2020-08-23 19-11-31.png \"Tipagem usando interfaces\")\n\nA imagem acima mostra o resultado de um código javascript tipado usando interfaces, note que a interface foi descartada e não poluí o nosso código final.\n\n![Tipagem usando classes](/assets/img/Screenshot from 2020-08-23 19-22-38.png \"Tipagem usando classes\")\n\nA imagem acima mostra um código javascript tipado usando classes, note que uma classe é criada, mas não é usada em momento algum no nosso código final.\\\n**PS: eu precisei iniciar as propriedades com um valor, pois o typescript reclamou que elas não tinham sido inicializadas no construtor.**\n\nAcredito que ficou claro qual opção escolher quando queremos apenas ter a segurança de tipos.\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. =]\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/v2/docs/handbook/basic-types.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n- [Classes x Interfaces](https://imasters.com.br/desenvolvimento/typescript-classes-vs-interfaces)\n- [TypeScript and Duck Typing](https://medium.com/@ajay.bhosale/typescript-and-duck-typing-7b3d7bb6f03c)\n- [Typescript Indexable Types](https://medium.com/@ole.ersoy/typescript-indexable-types-1e08780e5e13)\n"},{"@type":"BlogPosting","headline":"Baby steps com webpack","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2103,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-08-03-baby-steps-com-webpack","datePublished":"2020-08-02 10:28:25","dateModified":"2020-08-02 10:28:25","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nAntes de iniciar, você pode acessar o código final desse artigo [aqui](https://github.com/crisgon/webpack-basic).\n\nUltimamente tem se tornado cada vez menos comum configurar o webpack do zero em algum projeto, principalmente quando falamos de pessoas que estão iniciando no desenvolvimento e se deparam com uma imensidão de coisas para estudar. Ferramentas como create-react-app, vue-cli, angular-cli e outras alternativas tornam toda configuração de um projeto bastante transparente e vemos apenas a mágica acontecer... Geralmente elas vão resolver nossos problemas, mas tem momentos em que precisamos fazer uma configuração mais específica e isso nem sempre é algo trivial, pois apesar da simplicidade, escrever um arquivo webpack.js pode ser meio confuso para um inciante.\n\n### O que é?\n\n![Webpack](/assets/img/webpack.png)\n\nDe forma bem resumida, **o webpack é um empacotador de módulos**. Ele vai cuidar de pegar uma série de arquivos de entrada(com todas as suas dependências), trabalhar em cima desses arquivos(geralmente com ajudas de terceiros) e te oferecer um(ou vários) arquivo(s) de saída. Claro que essa ferramente não se resume apenas a isso, mas a imagem que você viu logo acima é um print do [webpack](https://webpack.js.org/) que ilustra bem o seu funcionamento base.\n\n### O que iremos fazer?\n\nÉ muito comum encontrar tutoriais em português ensinando a configurar um projeto react, vue ou qualquer coisa do tipo, mas hoje vamos apenas fazer uma configuração básica que pode ser utilizada em diversos cenários.\n\nNosso ponto de partida será essa a estrutura de pastas abaixo.\n\n![Estrutura inicial de pastas](/assets/img/webpack-basic-folder.png \"Estrutura inicial de pastas\")\n\nTodos os arquivos foram criados manualmente e vazios, com exceção dos `packages` que gerei utilizando o comando `npm init -y` .\n\nOs arquivos estão com o seguinte conteúdo até o momento:\n\n- O index.html tem uma estrutura padrão de html.\n- O global.scss tem apenas a definição do background do meu body.\n\n```scss\n$red: red;\n\nbody {\n font-size: 4rem;\n background-color: $red;\n}\n```\n\n- O sum.js tem uma função de soma:\n\n Nos arquivos javascript eu tenho o seguinte código:\n\n```jsx\nexport function sum(a, b) {\n return a + b;\n}\n```\n\n- O index.js faz uso do arquivo sum.js e está da seguinte forma:\n\n```jsx\nimport { sum } from \"./sum.js\";\n\nconst body = document.querySelector(\"body\");\n\nconst value = sum(2, 3);\n\nbody.innerHTML += value;\n```\n\nAgora que estamos devidamente alinhados, vamos ao que interessa!\n\n### Configurando o webpack\n\nA primeira coisa que precisamos é fazer a instalação de duas dependências no nosso projeto, o webpack e o webpack-cli com o seguinte comando `npm install —save-dev webpack webpack-cli`. Também é interessante fazer a instalação global com o seguinte comando `npm install --global webpack`. Agora vamos trabalhar apenas no nosso arquivo `webpack.config.js` , que tem basicamente a exportação de um objeto onde cada propriedade será uma parte da nossa configuração final.\n\n```jsx\nmodule.exports = {};\n```\n\n### Entry\n\nNosso ponto de partida é com propriedade entry, que basicamente informa ao webpack onde ele deve começar a fazer o empacotamento. Desse arquivo em diante ele vai caminhando na árvore de arquivos buscando cada dependência até que não exista mais nenhum. No nosso caso, o ponto de entrada é o nosso `index.js` que faz uso do arquivo `sum.js` que não faz uso de mais nenhum arquivo.\n\n```jsx\nmodule.exports = {\n entry: \"./src/modules/index.js\",\n};\n```\n\n### Output\n\nJá tivemos o arquivo de entrada, agora precisamos definir o arquivo de saída. Aqui basicamente declaramos um objeto com duas propriedades bem intuitivas.\n\n- path: que se refere ao caminho da pasta que nosso arquivo final vai ocupar. Caso a pasta não exista o webpack irá criá-la.\n- filename: que se refere ao nome do nosso arquivo de saída.\n\nNote que aqui fazemos uso da biblioteca path para definir qual é o caminho da nossa pasta. O resultado seria `\"./public\"`, bastante simples e poderíamos simplesmente digitar esse endereço, porém o path vai cuidar dos problemas que podem acontecer em sistemas operacionais diferentes por conta do uso de `\\\\` ou `/`\n\n```jsx\n// Dependência para nos auxiliar com caminho dos arquivos\nconst path = require(\"path\");\n\nmodule.exports = {\n // Arquivo de entrada\n entry: \"./src/modules/index.js\",\n\n // Arquivo de saída\n output: {\n path: path.resolve(__dirname, \"public\"),\n filename: \"bundle.js\",\n },\n};\n```\n\nNesse ponto já conseguimos gerar um arquivo `bundle.js` de saída com o seguinte comando `webpack --config webpack.config.js`, porém ainda não faz sentido, pois nosso código não passou por nenhum processo de modificação e é basicamente o mesmo. É ai que entram os loaders...\n\n### Loaders\n\nPor padrão o webpack só consegue trabalhar com arquivos javascript e json, para contornar essa limitação fazemos uso dos loaders, que são responsáveis por dar \"super poderes\" ao nosso webpack e permitir que ele transforme outros tipos de aquivos em módulos validos que possam ser adicionados na árvore de dependência. Com a ajuda dos loaders também conseguimos transpilar nosso javascript para diferentes versões, essa é uma das tarefas mais comuns e que vamos fazer a seguir.\n\nA primeira coisa que precisamos fazer é a instalação do loader mais famoso desse ecossistema, o babe/loader, que é de longe um dos melhores transpiladores javascript que temos no mercado.\n\n`npm --save-dev babel-loader @babel/core @babel/preset-env`\n\nCom ele o webpack vai conseguir transformar nosso javascript moderno em uma versão compatível com a maioria dos navegadores antes de gerar o arquivo final.\n\nAs instruções para fazer uso do babel serão passadas em um array na propriedade chamada `rules` que fica dentro de outra propriedade chama `modules`.\n\n```jsx\nmodule.exports = {\n entry: ...\n\tmodules: {\n\t\trules: [],\n\t},\n output:...\n};\n```\n\nA propriedade `rules` recebe um array de objetos que podem conter as seguintes propriedades:\n\n- test: recebe uma regex responsável por verificar a extensão dos arquivos que a configuração vai ser aplicada.\n- exclude: também recebe uma regex, mas para informar quais pastas devem ser ignoradas.\n- use: aqui definimos as regras do loader que vão ser aplicadas nos arquivos que fizeram match com nosso test\n- options: é uma propriedade que pode mudar para cada loader. No nosso caso iremos usá-la para que o babel cuide de tudo e não exista a necessidade de definir quais funcionalidades do JS devem ser ou não.\n\nAté agora nosso webpack.config.js está assim:\n\n```jsx\n// Dependência para nos auxiliar com caminho dos arquivos\nconst path = require(\"path\");\n\nmodule.exports = {\n // Arquivo de entrada\n entry: \"./src/modules/index.js\",\n module: {\n // Configurações de loaders\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel-loader\",\n options: {\n presets: [\"@babel/preset-env\"],\n },\n },\n },\n ],\n },\n // Arquivo de saída\n output: {\n path: path.resolve(__dirname, \"public\"),\n filename: \"bundle.js\",\n },\n};\n```\n\nAgora iremos fazer uso de mais alguns loaders para lidar com nosso css/sass, aqui eu optei em não tratar assuntos como auto-prefix ou minificação para não alongar muito o artigo.\n\nPra isso vai ser necessário que você instale as seguintes dependências: `npm --save-dev sass sass-loader css-loader`\n\n- css-loader: vai ser responsável por lidar com todas as nossas importações @import em arquivos css.\n- sass-loader: vai transformar todos os nossos arquivos sass em css.\n\nA configuração para esses loaders ficou assim:\n\n```jsx\n{\n test: /\\.scss$/,\n use: [\n {\n loader: \"css-loader\",\n },\n {\n loader: \"sass-loader\",\n },\n ],\n}\n```\n\n### Plugins\n\nPodemos utilizar os plugins para executar uma gama imensa de tarefas, como otimizar pacotes, limpar diretórios, inserir variavéis de ambientes, etc. Aqui iremos utilizar um plugin para extrair todo o nosso css em um arquivo único chamao style.css. Para isso vai ser necessário instalar o seguinte plugin `npm install --save-dev mini-css-extract-plugin`\n\nPara usar um plugin precisamos fazer a importação usando o `require` e depois fazer o uso na seção de `plugins` que fica dentro da propriedade `module` e logo abaixo da propriedade `rules`.\n\n```jsx\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n entry: ...\n\tmodules: {\n\t\trules: ...,\n\t\tplugins: [\n\t\t\tnew MiniCssExtractPlugin({\n filename: \"style.css\",\n }),\n\t\t]\n\t},\n output:...\n};\n```\n\nLogo em seguida podemos encadear esse plugin nos nossos loaders:\n\n```scss\n{\n test: /\\.scss$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n },\n {\n loader: \"css-loader\",\n },\n {\n loader: \"sass-loader\",\n },\n ],\n},\n```\n\nNo código acima os loaders estão encadeados, então o processo que acontece com nosso css seria mais ou menos assim:\n\n1. O css é separado dos arquivos JS\n2. Os `@imports` são resolvidos com o `css-loader`\n3. Todo sass é transformado em css\n\nSó pra garantir que você ainda não se perdeu... nosso `webpack.config.js` deve está assim:\n\n```jsx\nconst path = require(\"path\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n entry: \"./src/modules/index.js\",\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel-loader\",\n options: {\n presets: [\"@babel/preset-env\"],\n },\n },\n },\n {\n test: /\\.scss$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n },\n {\n loader: \"css-loader\",\n },\n {\n loader: \"sass-loader\",\n },\n ],\n },\n ],\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: \"style.css\",\n }),\n ],\n output: {\n path: path.resolve(__dirname, \"public\"),\n filename: \"bundle.js\",\n },\n};\n```\n\nPra finalizar iremos utilizar um loader para lidar com imagens, fonts e etc, porém vamos focar apenas nas imagens. Você vai precisar instalar o file-loader `npm install —save-dev file-loader` e partir pra configuração.\n\n```jsx\n{\n test: /\\.(jpe?g|png|svg|gif)$/,\n use: [\n {\n loader: \"file-loader\",\n options: {\n outputPath: \"images\",\n },\n },\n ],\n },\n```\n\nO código acima não tem nenhum bicho de 7 cabeças, estamos fazendo a mesma coisa que fizemos com outros loaders.\n\n1. Testamos se a imagem termina com alguma das extensões da regex\n2. Usamos o file-loader para transformar as imagens em um módulo válido pro webpack\n3. Salvamos essas imagens em uma pasta chamada images, que vai aparecer lá dentro da nossa pasta public.\n\nÉ interessante notar como o webpack vai tratar nossas imagens... No nosso arquivo `scss` eu fiz o uso de uma imagem da seguinte forma:\n\n```scss\nbackground-image: url(\"../images/bg.jpg\");\n```\n\nLogo após executar o webpack nossa imagem vai ter o nome com um hash e vai ser usada no css da mesma forma.\n\n```css\nbackground-image: url(images/1a9e635a5b3b216d5970a6686071f80f.jpg);\n```\n\nPra trabalhar com fonts seria exatamente igual, você só precisa alterar a regex do test e a pasta de saída. Fica o desafio!\n\n### Isso é tudo, pessoal!!\n\nMuito obrigado por ter chegado até aqui!! Espero que esse artigo tenha te ajudado de alguma forma!\n\nO objetivo desse artigo não foi te incentivar a parar de usar boilerplates, muito pelo contrário... O uso dessas soluções é super recomendada, pois vão facilitar a nossa vida. Porém, é interessante saber ao menos o básico de como funciona aquela solução que usamos no nosso dia a dia, dessa forma vamos ficar tão presos a mesma.\n\nEsse artigo bebeu das seguintes fontes:\n\n[](https://webpack.js.org/)\n\n[](https://dev.to/pixelgoo/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5)\n\n[](https://survivejs.com/webpack/what-is-webpack/)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução - Tuplas, Enums e Type Assertion","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":984,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-07-23-typescript-uma-breve-introducao-parte-2","datePublished":"2020-07-22 10:25:50","dateModified":"2020-07-22 10:25:50","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNo [artigo anterior](https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao) descobrimos como tipar o básico com javascript, number, string, boolean, null, undefined, void, any e never. Dessa vez iremos prosseguir com conceitos básicos e aprender um pouco sobre tuples(tuplas), enums e type assertion.\n\n## Tuplas\n\nTuplas são utilizadas para representar um array onde sabemos a quantidade exata de elementos, mas queremos tipos específicos para cada um desses elementos.\n\nVamos supor que eu queira guardar nome, idade e se a pessoa está empregada ou não.\n\nTalvez usar uma tupla não seja a melhor abordagem para armazenar essas informações, mas podemos fazer algo assim:\n\n```typescript\nlet person: [string, number, boolean];\n\nperson = [\"Cristiano\", 25, true]; // Ok\n\nperson = [\"Cristiano\", 25]; // Erro!\n\nperson = [true, 25]; // Erro!\n```\n\nAlgo interessante é que poderíamos recuperar os valores de `person` armazenando em variáveis de forma bem simples através de uma desestruturação.\n\n```typescript\nperson = [\"Cristiano\", 25, true];\n\nconst [name, age, isEmployed] = person;\n\nname === \"Cristiano\"; // true\n\nage === 25; // true\n\nisEmployed === true; // true\n```\n\nUm exemplo prático:\n\n```typescript\nfunction useAbobora(a: string): [string] {\n return [a];\n}\n\nconst [salada] = useAbobora(\"abobora é bom\");\n\nconsole.log(salada); // abobora é bom\n```\n\nNo trecho de código acima o `useAbobora` está retornando um array de uma posição, onde o primeiro item desse array é exatamente uma string.\n\nUm uso real dessa tipagem pode ser encontrada no [useState do React](https://pt-br.reactjs.org/docs/hooks-state.html) que retorna uma tupla de tamanho 2.\n\n```typescript\nconst [name] = useState(\"Cris\");\n```\n\n## Enums\n\nO uso de enums pode ser novidade para quem teve contato apenas com JS, mas é algo bem comum pra quem vem de outras linguagens como Java, C, etc.\n\nUm enum é basicamente uma forma de criar um conjunto de contantes com valores pré-definidos de uma maneira bastante legível e fácil de acessar.\n\nVamos aos exemplos que tudo vai fazer sentido...\n\n**Suponha que precisamos armazenar alguns dos [elos](https://www.ligadosgames.com/league-of-legends-elo-mmr-pdl/) disponíveis no[ League of Legends](https://br.leagueoflegends.com/pt-br/).**\n\nLogo de cara eu pensei em guardar tudo em um array da seguinte forma:\n\n```typescript\nconst elos = [\"Ferro\", \"Bronze\", \"Prata\", \"Ouro\", \"Platina\", \"Diamante\"];\n```\n\nMas essa não me parece a melhor abordagem...\n\n- Não queremos fazer nenhuma operação de array, queremos apenas guardar os valores e usar quando necessário.\n- Só conseguimos acessar os elos por meio dos índices do array e fica difícil saber qual a posição de um elo apenas por seu nome.\n\nÉ aí que entram os enums, pois poderíamos armazenar esses valores da seguinte forma:\n\n```typescript\nenum Elos {\n Ferro = 1,\n Bronze, // Bronze terá o valor 2\n Prata, // Prata terá o valor 3\n Ouro, // Ouro terá o valor 4\n Platina, // Platina terá o valor 5\n Diamante, // Diamante terá o valor 6\n}\n```\n\nE acessar os valores assim:\n\n```typescript\nconsole.log(Elos[2]); // Bronze\nconsole.log(Elos.Ouro); // 4\nconsole.log(\n `Você é ${Elos[2]} e se encontra na divisão de número ${Elos.Bronze}`,\n);\n\nElos.Ouro = 199; // Erro!\n```\n\nNo exemplo acima, nós iniciamos dizendo que ferro tinha o valor 1 e os valores seguintes assumiram um valor incremental de forma automática. Caso ferro não tivesse sido iniciado seu valor seria 0 e os outros teriam um valor incremental(1,2,3...)\n\nNote que podemos acessar um valor a partir da chave ou do seu valor, como nos consoles acima. Também não conseguimos alterar o valor de um enum em tempo de execução, pois ele permite apenas leitura.\n\n_Atenção, é muito importante entender que `Elos[0]` não se refere exatamente a posição 1 como em um array, 0 vai se referir a chave que tiver seu valor. Ao decorrer do artigo isso vai ficar mais evidente._\n\n### Tipos de Enums\n\nExistem basicamente três tipos de enums. Os numéricos, os de texto e os heterogêneos.\n\n#### Numéricos\n\nConforme vimos no exemplo anterior, os enum numéricos podem ser iniciados ou não e seguem um valor incremental caso os valores seguintes não sejam definidos.\n\n```typescript\nenum Cartas {\n As = 1,\n J = 11,\n Q, // Q tem o valor 12\n K, // K tem o valor 13\n}\n\nconsole.log(Cartas[11]); // J\nconsole.log(Cartas.As); // 1\n```\n\n#### Texto (String)\n\nEnums de strings não possuem o auto-incremento, logo todas as propriedades precisam ser inicializadas obrigatoriamente.\n\n```typescript\n// VAI DAR ERRO!! =[\nenum Cores {\n RED = \"#F00\",\n GREEN = \"#0F0\",\n BLUE = \"#00F\",\n PINK, // ERROOO\n}\n\n// NÃO VAI DAR ERRO! =]\nenum Cores {\n RED = \"#F00\",\n GREEN = \"#0F0\",\n BLUE = \"#00F\",\n}\n\nconsole.log(Cores.BLUE); // #00F\n```\n\nUsando strings conseguimos acessar seus valores usando apenas o nome de cada chave, aqui não conseguimos fazer o mapeamento reverso como em enums numéricos. Ou seja... não da pra fazer `Cores[\"#0F0\"]`sem receber um errão na cara.\n\n#### Heterogêneos\n\nEsse tipo de enum é basicamente a mistura dos dois anteriores, seu uso não parece ser muito comum, mas da pra criar algo como:\n\n```typescript\nenum BooleanLikeHeterogeneousEnum {\n No = 0,\n Yes = \"YES\",\n}\n```\n\nSó pra matar sua curiosidade, logo abaixo tem uma imagem com o javascript que é gerado quando usamos um enum do typescript.\n\n![Resultado da transpilação de um enum para JS](/assets/img/Screenshot from 2020-07-25 02-13-45.png \"Resultado da transpilação de um enum para JS\")\n\n### Type Assertion\n\nExistem algumas situações em que \"sabemos\" mais que o typescript, ou simplesmente queremos forçar uma conversão de tipo, nesses casos precisamos recorrer às asserções de tipos(type assertion).\n\nO type assertion é uma forma de falarmos para o compilador confiar no que estamos escrevendo e que ele não precisa se preocupar fazendo qualquer tipo de verificação.\n\n```typescript\n// Forma 1\nlet someValue: any = \"this is a string\";\nlet strLength: number = (someValue).length;\n\n// Forma 2\nlet someValue: any = \"this is a string\";\nlet strLength: number = (someValue as string).length;\n```\n\nÀs duas formas demonstradas logo acima são válidas, porém é mais comum encontrar códigos utilizando a forma 2.\n\nAtenção... Muito cuidado quando você for usar uma type assertion, pois o compilador vai usar a informação que você passou como \"a mais pura verdade\" e não vai fazer qualquer tipo de verificação. Logo, pode acontecer de você acabar criando alguma inconsistência acidentalmente.\n\n```typescript\nlet someValue: any; // someValue tem o valor undefined\nlet strLength: number = (someValue as number) + 2;\n\nconsole.log(strLength); // NaN\n```\n\n### Isso é tudo pessoal!\n\n![Isso é tudo pessoal!](https://i.pinimg.com/originals/2a/82/1e/2a821ee45ca3cbc384c0b70f730248ae.gif)\n\nObrigado por chegar até aqui!! Espero que tenha conseguido te ajudar de alguma forma. =]\n\nEm breve irei escrever mais conteúdo sobre Typescript.\n\nEntão... Até mais!\n\n### Links importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/v2/docs/handbook/basic-types.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n"},{"@type":"BlogPosting","headline":"Typescript - Uma breve introdução","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":912,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2020-03-02-typescript-uma-breve-introducao","datePublished":"2020-03-02 11:30:10","dateModified":"2020-03-02 11:30:10","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nUm tempo atrás eu fazia cara feia só de ouvir o nome typescript... Pra mim não fazia sentido deixar de aproveitar a tipagem dinâmica nativa do javascript e usar uma tipagem estática e \"engessada\". Era um pensamento bem nada a ver, mas isso mudou quando a pouco mais de 1 ano aceitei o desafio de trabalhar com typescript e hoje não me sinto tão confortável em utilizar javascript puro.\n\nJavascript é uma linguagem muito permissiva e simples, ela não tem tipagem forte e isso torna seu aprendizado mais fácil, porém, **com grandes poderes vem grandes responsabilidades**. Toda a liberdade que o javascript oferece pode ser muito perigosa caso você não saiba exatamente o que está fazendo.\n\n> “Apesar do JavaScript ser talvez uma das linguagens mais fáceis de se começar, suas excentricidades fazem com que o domínio sólido da linguagem seja muito menos comum do que em outras linguagens. Enquanto se precisa um conhecimento aprofundado em linguagens como C ou C++ para escrever um programa em grande escala, uma aplicação similar em JavaScript pode ser desenvolvida, e muitas vezes é, apenas arranhando parte do que a linguagem pode fazer de verdade”\n>\n> Kyle Simpson\n\n### Antes de prosseguir acho importante deixar claro dois termos:\n\n- Linguagens tipadas: também conhecidas como fortemente tipadas, são linguagens onde você é obrigado a declarar o tipo do dado. Ex: Java, C++, C#\n- Linguagens não tipadas: também conhecidas como fracamente tipadas ou de tipagem dinâmica, são linguagens onde a conversão é feita durante a execução do programa e sem a necessidade do programador forçar a conversão. Ex: PHP, Javascript, Ruby, Python.\n\nTrabalhar com a tipagem dinâmica do javascript é como andar no escuro em um labirinto... Você não sabe onde está e quando pensa que sabe tudo pode mudar muito rápido e acabar te deixando confuso. Recomendo dar uma olhada [nesse](https://www.cristiano.dev/blog/2018-04-30-coercao-de-tipos-em-javascript) artigo que escrevi em outro momento sobre coerção de tipos.\n\nÉ com a premissa de resolver esses problemas que o Typescript surgiu, mas o que é exatamente Typescript?\n\n## O que é?\n\nÉ um superset para javascript que adiciona tipagem forte e alguns outros recursos para a linguagem. Ela foi criada pela Microsoft em meados de 2012 e vem caindo no gosto dos programadores. Segundo a [pesquisa do stackoverflow](https://insights.stackoverflow.com/survey/2019#technology) o typescript esteve entre as linguagens mais amadas de 2019, perdendo apenas para rust e python.\n\n![Pesquisa do stack overflow sobre as linguagens mais amadas em 2019.](/assets/img/most-love.png \"Pesquisa do stack overflow sobre as linguagens mais amadas em 2019.\")\n\n## Como funciona?\n\nTypescript funciona apenas em tempo de execução. O que isso quer dizer? Enquanto você estiver escrevendo seu código ele vai ser typescript, mas quando você fazer o build e acessar no seu navegador ele será exatamente o javascript comum que você já conhece. Tá! Pode não ter ficado tão claro assim, mas vamos ao código.\n\nNo javascript a gente simplesmente declara uma variável e o seu tipo é inferido e pode ser alterado em todo nosso código.\n\n```javascript\nlet name = \"Cristiano\"; // name é uma string\nname = 22; // agora name é um number\n```\n\nNo typescript a inferência de tipos também acontece, a diferença é que nele, podemos apontar qual o tipo e não conseguimos alterá-lo mais.\n\n```typescript\nlet name = \"Cristiano\"; // name é uma string\nname = 22; // Isso vai gerar um erro. number\n//Type '22' is not assignable to type 'number'.\n```\n\n## Tipando o básico\n\nComo eu disse anteriormente, podemos apontar um tipo de forma explicita usando alguns tipos já conhecidos do javascript e alguns tipos \"estranhos\": `number, string, boolean, null, undefined, any, never e void.`\n\n```typescript\nlet age: number = 24;\nlet fullName: string = \"Cristiano\";\nlet married: boolean = false;\nlet isNull: null = null;\nlet isUndefined: undefined = undefined;\nlet isObject: object = {};\n\n// Todas as atribuições abaixo geram erros\n\nage = \"Cris\";\nfullName = false;\nmarried = 24;\nisNull = {};\nisUndefined = null;\nisObject = undefined;\n```\n\n## Any\n\nAny é exatamente a tradução literal: **qualquer**. Em outras palavras, algo declarado como `any` pode receber um number e depois uma string sem nenhum problema.\n\n```typescript\nlet someThing: any = 22;\nsomeThing = \"Hello\";\nsomeThing = false;\n\n// Todas as atribuições acima são válidas\n```\n\n## Void\n\nNão é apenas variáveis que podemos tipar, também conseguimos tipar o retorno de uma função ou os parâmetros que ela vai receber. Utilizamos o `void` quando queremos representar o vazio, quando uma função não tem retorno, por exemplo.\n\n```typescript\nfunction someFunction(a: number, b: number): void {\n console.log(a, b);\n}\n\nsomeFunction(\"1\", \"2\");\n// Error!\n\nconst someThing = someFunction(1, 2);\n// O type de someThing agora é void\n```\n\n## Never\n\nO never representa valores que nunca ocorrem, por exemplo, o retorno de uma função com `while(true)`. Algo interessante é que `never` pode ser atribuído para qualquer tipo, porém algo do tipo `never` só aceita valores `never`.\n\n```typescript\nfunction infiniteLoop(): never {\n while (true) {}\n}\n\nlet age: number = 24;\nage = never;\n\nlet someThing: never = infiniteLoop();\nsomeThing = \"Hello\";\n//Error\n```\n\n## Tipando arrays\n\nTipar arrays é algo bem simples, basicamente podemos definir um array type de duas formas.\n\n```typescript\nconst numbers: number[] = [1, 2, 3, 4];\nconst colors: string[] = [\"red\", \"black\", \"white\"];\n\n// O código acima é equivalente ao código abaixo\n\nconst numbers: Array = [1, 2, 3, 4];\nconst colors: Array = [\"red\", \"black\", \"white\"];\n```\n\n## Finalizando...\n\nEsse foi apenas uma introdução bem sucinta. O principal objetivo era apresentar a ferramenta para quem nunca teve contato, espero que tenha ajudado. Se você se interessou por typescript, continua me acompanhando que vou criar mais conteúdo sobre ele, ou então vai direto na fonte no link que deixarei a seguir.\n\nLembrando que o Typescript tem bem mais poder do que isso que mostrei aqui, em um próximo artigo vou abordar sobres tipos personalizados usando,`interface/types`, `enums` e `assertions.`\n\n\\\nObrigado por ler até aqui!\n\n## Links Importantes\n\n- [Typescript HandBook](https://www.typescriptlang.org/v2/docs/handbook/basic-types.html)\n- [Typescript Playground](https://www.typescriptlang.org/play/index.html)\n- [You Dont Know Js](https://github.com/getify/You-Dont-Know-JS)\n"},{"@type":"BlogPosting","headline":"Entendendo Escopo no Javascript - Parte 2","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":346,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-06-30-entendendo-escopo-no-javascript-parte-2","datePublished":"2018-06-30 20:41:00","dateModified":"2018-06-30 20:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nSe você caiu aqui de paraquedas recomendo ler a [parte 1](https://www.cristiano.dev/blog/2018-05-28-entendendo-escopo-no-javascript-parte-1) desse artigo, lá eu expliquei o que é escopo e como acontece a sua geração. Hoje vou falar sobre escopo léxico, escopo de função e escopo de bloco. Apenas para refrescar a mente de quem já leu o artigo, escopo é um conjunto de regras que definem onde as variáveis podem ser acessadas após seu armazenamento.\n\n### Escopo léxico?\n\nÉ o escopo definido no local onde as funções são declaradas! \nNa análise léxica da compilação é possível definir onde cada identificador vai estar e onde ele pode ser buscado.\n\n```javascript\nfunction foo(a) {\n let b = 1;\n console.log(a + b);\n}\nfoo(2); // 3\n```\n\nTudo entre `{ }` é o escopo de foo, onde `a` e `b` estão disponíveis, gerando algum erro se tentarmos acessar qualquer uma dessas variáveis fora desse escopo.\n\n### Escopo de função x Escopo de bloco\n\nQuando falamos de escopo pensamos logo em escopo de função, porém existe outra maneira de criar escopo, através de blocos `{…}`. Com a chegada do `let` no ES6, podemos fazer com que nossas variáveis sejam do escopo de declarações como `if`, `for` e etc.\n\n```javascript\n// Com var\nif (true) {\n var a = 5;\n console.log(a); // 5\n}\nconsole.log(a); // 5\n\n// Com let\nif (true) {\n let b = 8;\n console.log(b); // 8\n}\nconsole.log(b); // Reference error\n```\n\nCom `var` uma variável criada em um bloco não faz parte do escopo,podendo ser acessada fora do bloco. Enquanto com `let` a variável passa a ter como escopo o bloco em questão.\n\n### Concluindo\n\nAté aqui vimos a importância de entender sobre escopo, o que pode nos dar um norte na resolução de alguns problemas. Escopo é um assunto relativamente simples, mas seu entendimento é indispensável para o domínio da linguagem javascript. Espero que esse material tenha sido de alguma valid. :D\n\nEsse artigo foi menor que o normal, pois pretendo escrever artigos menos sempre que puder.\n\n#### [Minha referência para esse conteúdo:\n\n[Livro You Dont Know JS](https://github.com/cezaraugusto/You-Dont-Know-JS/)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Entendendo Escopo no Javascript - Parte 1","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":944,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-05-28-entendendo-escopo-no-javascript-parte-1","datePublished":"2018-05-28 20:41:00","dateModified":"2018-05-28 20:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nDesenvolver com javascript é algo aparentemente simples, mas que pode trazer muita dor de cabeça pra quem não entende o real funcionamento da linguagem, ocasionando situações onde o código apresenta problemas que podem ser difíceis de identificar, pois muitas vezes não estão ligados a sintaxe, mas sim a conceitos fundamentais da linguagem, como o **escopo**.\n\n![Escopo aninhado e analogia com um prédio](https://i.imgur.com/rOZuQfr.png)\n\n### Afinal, o que é escopo?\n\nÉ basicamente um conjunto de regras que permitem o armazenamento de variáveis em algum lugar para que posteriormente ela possa ser acessada.\n\n### Mas como o escopo funciona?\n\nPara entendermos o escopo é preciso entender que, apesar do javascript ser considerado uma linguagem interpretada, existe um processo de compilação do programa antes da execução do mesmo. \nO processo de compilação é algo bem complexo, mas que a grosso modo é composta de pelo menos os seguintes passos: Tokenização/Análise Léxica, Análise e Geração de código.\n\n#### Tonekinzação/Análise Léxica\n\nÉ basicamente a quebra de cada trecho do código em tokens, pedaços com significado para a linguagem.\n\n**Exemplo:** \nO código `let a = 2;` seria quebrado em `let | a | = | 2 | ;`. Os espaços em brancos são mantidos quando tem algum significado para a linguagem.\n\n#### Análise\n\nEssa etapa pega um conjunto de tokens(array de tokens) e gera uma árvore de elementos aninhados que representam a estrutura do programa. Essa árvore é conhecida como AST (Abstract Syntax Tree).\n\n**Exemplo:** Para um array de tokens gerados de `let a = 2;` teríamos : Um nó chamado variableDeclaration, que tem um filho chamado identifier e outro filho chamado assigmentExpression que tem um filho chamado numericLiteral. \nFicou um pouco confuso, mas a imagem deixa tudo mais claro.\n\n![Árvore sintática abstrata](https://i.imgur.com/bAymtdV.png)\n\n#### Geração de código\n\nEsse é o processo em que a árvore AST é transformada em código executável. Esse processo pode ser diferente em cada linguagem.\n\n### Certo, mas cadê o escopo?\n\nComo eu tinha dito anteriormente, o escopo é basicamente um conjunto de regras que definem onde uma variável pode ser buscada e acessada. Essa busca pode ser de dois tipos: **LHS**(left-hand-side) ou **RHS**(right-hand-size), que tem como tradução livre, lado esquerdo e lado direito. Mas lado de que? Lado da atribuição, ou seja, do sinal de igual (=).\n\n**E como essas buscas funcionam?** \nA busca **LHS** tem o objetivo de atribuição, ela verifica se existe uma referência para uma variável. Já a busca **RHS** procura por um valor para leitura.\n\n### Ainda tá meio confuso? Agora não vai ficar mais!\n\n**Vamos analisar o seguinte código:**\n\n```javascript\nfunction myFunction() {\n a = 42;\n console.log(a);\n}\n\nmyFunction(); // 42\n```\n\nSe não estivermos usando o modo estrito(strict), não vai acontecer nenhum erro e o que temos aqui é uma busca **LHS**(busca por referência). O motor do javascript vai perguntar ao escopo se já existe algum referência para a, como não existe ele mesmo cria e não retorna erros.\n\n**Agora vamos analisar esse outro trecho:**\n\n```javascript\nfunction myFunction() {\n let a = 42;\n}\n\nmyFunction();\nconsole.log(a); // Reference Error\n```\n\nNesse caso vamos ter um erro de referência, pois vamos ter uma busca **LHS** em que o motor vai receber uma resposta negativa do escopo. Pois não existe nenhuma variável chamada `a` no alcance no console. A única variável `a` que temos no nosso código está no escopo de myFunction, com suas regras de que ela só pode ser acessada naquele local.\n\n**Vamos ver um caso diferente:**\n\n```javascript\nfunction myFunction() {\n let a = b;\n console.log(a);\n}\nmyFunction(); // Reference Error\n```\n\nAqui é um caso onde temos uma busca **RHS**(busca por valor), pois precisamos do valor de b. O motor vai perguntar para o escopo qual o valor de b, porém b não existe e não tem valor, o que gera um Reference Error.\n\n#### Escopos aninhados\n\nQuando uma busca não é bem sucedida, uma nova busca é feita no próximo escopo superior ao atual, até chegar ao escopo global. \nPara entender escopos aninhados podemos fazer uma alusão com um prédio. Onde o escopo atual é o térreo e caso não encontremos o que queremos nele, vamos para o próximo andar(escopo) até chegar no último andar(escopo global).\n\n**Vamos ver um exemplo:**\n\n```javascript\nfunction myFunction() {\n let a = 2;\n function otherFunction() {\n console.log(a + b);\n }\n otherFunction();\n}\nlet b = 3;\nmyFunction(); // 5\n```\n\nNo código acima acontece uma busca **LHS** e uma **RHS** em relação as variáveis `a` e `b`, como elas não foram encontradas no escopo de otherFunction a busca é feita novamente, mas agora no escopo superior, o de myFunction. São encontrados referência e valor para `a`, porém a busca continua para `b` e agora ela é feita no escopo global, onde o valor de `b` é encontrado e a soma é executada.\n\n### Até a próxima pessoal…\n\nAté aqui vimos um pouco sobre o que acontece antes do código javascript ser executado, também vimos que o escopo é um conjunto de regras que define onde uma variável pode ser buscada e manipulada. Por fim vimos sobre escopo aninhado e como as buscas **LHS** e **RHS** funcionam. \nTudo isso pode parecer só abobrinha e você pode até achar que não precisa saber nada disso pra criar seu programa. E de certa forma você tem razão, não é necessário entender todas essas peculiaridades da linguagem para sair escrevendo um código javascript, porém esse conhecimento pode ser o que vai te salvar de perder horas sem saber o que tá acontecendo com a sua aplicação.\n\n#### E a parte 2 ?\n\nNa próxima parte do artigo eu vou falar sobre escopo léxico, escopo de função e escopo de bloco.\n\n[Parte 2](https://www.cristiano.dev/blog/2018-06-30-entendendo-escopo-no-javascript-parte-2)\n\n**Espero que tenha aprendido algo com esse pequeno post :D**\n\n#### Minha referência para esse conteúdo:\n\n[Livro You Dont Know JS](https://github.com/cezaraugusto/You-Dont-Know-JS/)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Coerção de tipos em javascript","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":731,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-04-30-coercao-de-tipos-em-javascript","datePublished":"2018-04-30 20:41:00","dateModified":"2018-04-30 20:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nComecei a leitura do excelente livro [You Dont Know JS](https://github.com/cezaraugusto/You-Dont-Know-JS) e resolvi ir escrevendo pequenos posts sobre as coisas interessantes que for aprendendo. Hoje vou falar sobre coerção de tipos, esse é um assunto que a princípio parece ser bem simples, mas que é de extrema importância para entender como o javascript se comporta em diversas situações, evitando pequenas dores de cabeça no futuro.\n\n![Javascript - Comparação estrita entre um número e uma string retornando falso](https://i.imgur.com/M4BaTpn.png)\n\n### Coerção? Explicita e Implicita?\n\nCoerção, no javascript, se refere ao ato de converter tipos de valores, como converter a string “42” para o number 42. No javascript temos dois tipos de coerção:\n\n**Coerção explícita:** Quando usamos algum artifício da linguagem para forçar uma coerção. Um exemplo é o uso do `` parseInt(“42”)`, que resulta no number 42. **Coerção implícita:** Essa coerção acontece nos bastidores, sendo fruto de alguma operação, como a de comparação.` ``\n\n```javascript\n42 \\== \"42\" // true\n```\n\n### Comparações\n\nFazer comparações no javascript é algo que aprendemos logo ao iniciarmos com a linguagem,porém precisamos ficar atentos ao que acontece quando comparamos dois valores. \nTemos 4 operadores para fazer comparações: igual `(==)` , diferente `(!=)`, estritamente igual `(===)` e estritamente diferente `(!==)`.\n\n```javascript\n// Caso 1\n42 == \"42\"; // true\n\n// Caso 2\n42 === \"42\"; // false\n```\n\nA primeira coisa que pensamos é que no caso 1, usando `(==)`, é testado apenas o valor e no caso dois , usando `(===)`, é testado o valor e depois o tipo. Mas na verdade não é isso que realmente acontece… O que realmente acontece é a permissão ou não da coerção de tipos. No primeiro caso, o operador de igualdade permite a coeração, então nos bastidores teremos uma comparação assim:\n\n```javascript\n// Nossa comparação -> 42 == \"42\"\n// Nos bastidores -> 42 == 42\n```\n\nNo segundo caso, quando usamos o operador estritamente igual `(===)`, não acontece a coerção, logo teremos uma comparação entre um number e uma string, que retorna falso.\n\n```javascript\n// Nossa comparação -> 42 === \"42\"\n// Nos bastidores -> 42 === \"42\"\n```\n\nOBS: Tudo dito anteriormente também se aplica aos operadores de diferença != e !==.\n\n#### Comparações relacionais\n\nTambém possuímos os operadores relacionais, são eles: menor que `(<)`, maior que `(>)`, menor ou igual que `(<=)` e maior ou igual que `(>=)`. Eles podem ser utilizados para numbers ou strings, no segundo caso usando regras alfabéticas.\n\n```javascript\n3 < 4; // true\n\"bar\" < \"foo\"; // true\n```\n\n#### E a coerção?\n\nEla acontece com todos os operadores relacionais, pois não existe nenhum operador relacional estrito, `<==` não existe.\n\n```javascript\nlet a = 41,\n b = \"42\",\n c = \"43\";\n\n// Caso 1\na < b; // true\n\n// Caso 2\na < c; // true\n\n// Caso 3\nb < c; // true\n```\n\nNo caso 3 ambos são comparados de forma alfabética, pois são strings. Já no caso 1 e 2, quando temos um número e um texto, existe uma coerção de string para number.\n\n#### E a comparação entre tipos que não podem virar números?\n\n```javascript\nlet a = 42,\n b = \"foo\";\n\n// Caso 1\na > b; // false\n\n// Caso 2\na < b; // false\n\n// Caso 3\na == b; // false\n```\n\n![Furutama meme - Algo de errado não está certo](/assets/img/deolho.jpg)\n\n#### Não, não tem nada errado! Mas essa é uma grande pegadinha!!\n\n**Lembra que eu falei que as comparações relacionais permitem coerção?** Logo nos 3 casos o javascript tenta converter “foo” para um número e o que recebemos não é um número (`NaN`). \nA especificação diz que o `NaN` não pode ser maior, menor ou igual a um número. Na verdade,um NaN não é maior, menor ou igual nem a outro `NaN`.\n\n**O que acontece nos bastidores é algo assim:**\n\n```javascript\n// Caso 1\n42 > NaN; // false\n\n// Caso 2\n42 < NaN; // false\n\n// Caso 3\n42 == NaN; // false\n```\n\n### Concluindo…\n\nAté aqui aprendemos um pouco sobre a importância de entender como o javascript se comporta quando executamos algum tipo de comparação. Ter um entendimento não superficial sobre a linguagem pode ser o que vai impedir que fiquemos horas e horas presos em pequenos problemas que são simples, mas que podem ser uma pedra no sapato de quem não faz ideia do que esteja acontecendo.\n\nEm breve trarei mais postagens sobre Javascript, estava meio atolado de tarefas da faculdade, mas estou me organizando pra gerenciar tudo da melhor forma.\n\n#### [](#Minha-referencia-para-esse-conteudo \"Minha referência para esse conteúdo:\")Minha referência para esse conteúdo:\n\n[Livro You Dont Know JS](https://github.com/cezaraugusto/You-Dont-Know-JS/)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Uma breve introdução à Template Strings","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":670,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-03-12-uma-breve-introducao-a-template-strings","datePublished":"2018-03-12 20:41:00","dateModified":"2018-03-12 20:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\n**Esse artigo é uma adaptação do [texto](http://wesbos.com/javascript-template-strings/) do [Wes Bos](http://wesbos.com)**\n\nNo javascript, quando precisamos inserir uma variável em uma string, pensamos logo em fazer uma concatenação, mas isso pode ser uma dor de cabeça a depender do tamanho da nossa string e da quantidade de variáveis que iremos inserir. Pense bem no processo necessário para isso:\n\n1 - Abrimos nossa string. \n2 - Fechamos nossa string. \n3 - Concatenamos com nossa variável. \n4 - Abrimos nossa string. \n5 - Fechamos nossa string. \n6 - Repetimos o processo caso existam mais variáveis.\n\nExemplo:\n\n```javascript\nlet nome = \"Bob\";\nlet age = 2;\nlet sentence = \"Meu cachorro \" + name + \" tem \" + age * 7 + \" anos de idade.\";\n// Result \"Meu cachorro Bob tem 14 anos de idade.\"\n```\n\nAgora pense nos problemas com fechamento de string. Pensou? \nPense também que precisamos usar \\n ou \\n\\ para pular linhas.\n\n```javascript\nlet string = 'Essa é \\n\\\n uma sring \\n\\\n com quebra \\n\\\n de linha.';\n// Result \"Essa é\n uma sring\n com quebra\n de linha.\"\n```\n\nDiversas linguagens tem a possibilidade de simplesmente colocar suas variáveis dentro de strings e interpretá-las, com a chegada do ES6 o javascript ganhou esse novo poder, chamado de Template Strings.\n\n#### Como funciona?\n\nNo javascript podemos criar uma string com aspas duplas(“ ”), aspas simples(‘ ’) e agora também com um par de acentos graves (``). Utilizando os acentos estamos criando um template string e podemos adicionar placeholders. Estes são indicados por um cifrão seguido de chaves \\${expressão}.\n\nDentro do \\${ } podemos executar qualquer código javascript, seja uma variável ou a invocação de uma função.\n\nVeja como ficaria o exemplo anterior com o uso de um template string.\n\nExemplo:\n\n```javascript\nlet name = \"Bob\";\nlet age = 2;\nlet sentence = `Meu cachoror ${name} tem ${age * 7} de idade.'`;\n// Result \"Meu cachorro Bob tem 14 anos de idade.\"\n```\n\n**Percebeu como nosso código ficou mais limpo e fácil de ler?**\n\nEssa foi uma abordagem básica sobre Template Strings, existem mais coisas que podem ser feitas com essa nova funcionalidade do javascript, recomendo que façam a leitura desse [material.](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings)\n\nAntes de finalizar vou deixar um exemplo muito interessante do uso do Template String. Eu gosto muito dessa abordagem, pois ela facilita a criação de trechos HTML.\n\n```javascript\ncard = `\n
\n $\"Sprite$ \n
\n
\n
Name: ${pokemon.name}
\n
Nº ${pokemon.id}
\n
Type: ${pokemon.types\n .map(item => \" \" + item.type.name)\n .toString()}
\n
Skills: ${pokemon.moves\n .map(item => \" \" + item.move.name)\n .toString()}
\n
Weight: ${pokemon.weight / 10}kg
a\n
Height: ${pokemon.height / 10}m
\n
`;\n```\n\nComo eu havia dito, podemos executar qualquer código javascript dentro de \\${ }. Nesse exemplo eu estava consumindo uma API e realizei diversas operações, desde calculos simples até manipulação de arrays.\n\n## Issto é tudo, pessoal!!\n\nMinhas referências foram:\n\n- [An Intro to Template Strings](http://wesbos.com/javascript-template-strings/)\n- [MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Criando um CSS do BEM - Parte 2","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2251,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-03-02-criando-um-css-do-bem-parte-2","datePublished":"2018-03-02 13:41:00","dateModified":"2018-03-02 13:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\n# Criando Um CSS Do BEM - Parte 2\n\nNa [parte 1](https://www.cristiano.dev/blog/2018-02-22-criando-um-css-do-bem-parte-1) desse artigo falamos um pouco sobre como nomear uma classe significativa e reaproveitável utilizando BEM, porém existem mais alguns pontos importantes para escrever um CSS seguindo essa metodologia, como a organização de arquivos, um dos assuntos que iremos ver por aqui.\n\n![Logo do BEM](/assets/img/bemlogo.png \"Logo do BEM\")\n\n#### Algumas considerações importantes\n\nNão basta simplemente criar uma classe separada por (\\_\\_) para ter um CSS no padrão BEM, por isso listei algumas informações importantes:\n\n- Nem todo bloco precisa ter um elemento.\n\n ```html\n \n ```\n\n- Todo elemento precisa fazer parte de um bloco.\n\n- Um elemento pode ter outro elemento aninhado, porém o seu nome deve ser referente ao bloco.\n\n```html\n
\n
\n \n \n
\n
\n```\n\n- Um bloco pode conter outros blocos.\n\n- Os modificadores são opcionais .\n\n- Crie um bloco quando o mesmo não depender de outros componentes para ser reutilizado.\n\n- Crie um elemento quando o mesmo não puder ser reutilizado fora do bloco em que faz parte.\n\n### Estrutura de arquivos\n\n![Uma mão deslizando sobre livros em uma prateleira](/assets/img/books.jpg \"Estante com muitos livros\")\n\nA estrutura de arquivos do BEM é tão peculiar quanto a forma em que suas classes são nomeadas, porém existe uma lógica por trás de tudo. Os arquivos são bem fragmentados, o que pode facilitar na manutenção, pois quando existir algum problema você pode ir direto no arquivo do bloco em questão.\n\n#### Algumas diretrizes para a estrutura de arquivos de um projeto BEM\n\n- Os projetos são divididos em níveis.\n- Os blocos são implementados em arquivos separados.\n- Os arquivos são agrupados por significado e não por tipo.\n\n#### Os projetos são divididos em níveis\n\nOs projetos são divididos em níveis e não existe uma quantidade máxima para isso. Em outras palavras, podemos ter diversas pastas com diversos níveis de hierarquia. \nExemplo:\n\n```\nproject/\n common.blocks/ # Diretório para blocos do projeto\n library.blocks/ # Diretório para blocos da biblioteca\n\n```\n\n#### Os blocos são implementados em arquivos separados\n\nCada bloco tem seu css implementado em um arquivo único. Por exemplo, se criarmos um bloco formulario, seu css deve ser armazenado em um arquivo formulario.css.\n\nExemplo:\n\n```\nproject\n common.blocks/\n input.css # CSS para o bloco input\n```\n\nO código dos elementos e modificadores também são armazenados em arquivos separados. Dessa forma conseguimos incluir apenas os elementos e modificadores necessários para a implementação do bloco em questão.\n\nExemplo:\n\n```\nproject\n common.blocks/\n input.css # CSS para o bloco input\n input_theme_sun.css # CSS para o modificador input_theme_sun\n input__clear.css # CSS para o elemento input__clear\n```\n\n#### Os arquivos são agrupados por significado e não por tipo\n\nCada bloco possui uma pasta onde todos os arquivos referentes a ele são agrupados, seja arquivos css ou js.\n\nExemplo:\n\n```\nproject\n common.blocks/\n input/ # Diretório para o bloco input\n input.css # CSS para o bloco input\n input.js # JavaScript para o bloco input\n popup/ # Diretório para o bloco popup\n popup.css # CSS para o bloco popup\n popup.js # JavaScript para o bloco popup\n\n```\n\nTambém podemos criar uma pasta para modificadores de blocos que possuem mais de um valor. \nExemplo:\n\n```\nproject\n common.blocks/ # Diretório para os blocos\n input/ # Diretório para o bloco input\n _type/ # Diretório para o modificador input_type\n input_type_search.css # CSS para o modificador input_type\n input_type_pass.css # CSS para o modificador input_type\n input.css # CSS para o bloco input\n input.js # JavaScript para o bloco input\n popup/ # Diretório para o bloco popup\n```\n\n### Na metodologia BEM os arquivos podem ser organizados de três maneiras:\n\n- Nested\n- Flat\n- Flex\n\n#### Nested\n\nUma abordagem clássica do projeto BEM, usada nos projetos [bem-core](https://github.com/bem/bem-core/tree/v4.2.1/common.blocks/page) e [bem-components](https://github.com/bem/bem-components/tree/v6.0.0/common.blocks/button). Essa abordagem segue algumas diretrizes:\n\n- Cada bloco corresponde a um diretório.\n- Os arquivos de elementos e modificadores são escritos separadamentes e em diretŕoios separados.\n- O diretório do bloco é a raiz dos subdiretórios de seus elementos e modificadores.\n- O nome dos diretórios de elementos começam com um duplo sublinhado (\\_\\_).\n- O nome dos diretórios dos modificadores começam com um sublinhado único (\\_).\n\nExemplo:\n\n```\nproject\n common.blocks/ # Diretório para os blocos\n input/ # Diretório para o bloco input\n _type/ # Diretório para o modificador input_type\n input_type_search.css # CSS para o modificador input_type\n __clear/ # Diretório para o elemento input__clear\n _visible/ # Diretório para o modificador input__clear_visible\n input__clear_visible.css # CSS para o modificador input__clear_visible\n input__clear.css # CSS para o elemento input__clear\n input__clear.js # JavaScript para o elemento input__clear\n input.css # CSS para o bloco input\n input.js # JavaScript para o bloco input\n```\n\n#### Flat\n\nEssa é uma versão simplificada, onde os blocos, elementos ou modificadores não possuem diretórios. \nElementos e modificadores são implementados em arquivos separados ou no arquivo do bloco principal.\n\nExemplo:\n\n```\nproject\n common.blocks/\n input_type_search.css # CSS para o modificador input_type_search modifier\n input_type_search.js # Javascript para o modificador input_type_search\n input__clear.js # Elemento opicional para o bloco input\n input.css\n input.js\n popup.css\n popup.js\n popup.png\n```\n\n#### Flex\n\nEssa é uma combinação entre nested e o flat. Blocos simples usam flat e blocos com a estrutura maior usam nested. Ou seja, se o bloco possuir vários elementos e modificadores, usamos o nested, caso o bloco não possua nada disso, usamos o flat.\n\n- Cada bloco corresponde a um diretório.\n- Elementos e modificadores podem ser implementados em arquivos de bloco ou em arquivos separados.\n\nExemplo:\n\n```\nproject\n common.blocks/\n input/ # Diretório para o bloco input\n _type/ # Diretório para o modificador input_type\n input_type_search.css # CSS para o modificarod input_type\n __clear/ # Diretório para o elemento input__clear\n _visible/ # Diretório para o modificador input__clear_visible\n input__clear_visible.css # CSS para o modificador input__clear_visible\n input__clear.css # CSS para o elemento input__clear\n input__clear.js # JavaScript para o elemento input__clear\n input.css # CSS para o bloco input\n input.js # JavaScript para o bloco input\n popup/ # Diretório para o bloco popup\n popup.css\n popup.js\n popup.png\n```\n\n### BEM, isso é tudo pessoal.\n\nEsse foi meu apanhado sobre a metodologia BEM, existe muito mais informações que você pode conferir na [documentação](https://en.bem.info) do BEM.\n\nEu particularmente não curto a forma que os arquivos são organizados com o BEM, acho que é por falta de familiriadade, pois entendo o problema que ele vem resolver e os benefícios que essa abordagem proporciona para o desenvolvedor. Enfim, acredito que toda essa questão de organização seja algo que pode ser adaptado e combinado com a equipe, caso esteja trabalhando com uma.\n\nEu fiz um pequeno projeto utilizando BEM, incluindo a parte de organização de arquivos, é algo bem simples e deve ter muita coisa errada, mas você pode dar uma conferida no meu [github](https://github.com/crisgon/control-panel/tree/gh-pages).\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Usando Arrays com JavaScript","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2618,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-03-01-usando-arrays-com-javascript","datePublished":"2018-02-03 18:41:00","dateModified":"2018-02-03 18:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nVamos supor que estou criando um programa e que preciso armazenar o nome de 10 pessoas. A primeira coisa que podemos pensar é em criar uma variável para cada nome, simples, não? **Não!!** Criar uma variável para cada nome é gastar recursos desnecessários, pois estamos alocando memória 10 vezes e ainda vamos ter um certo trabalho para manipular 10 variáves que no fim das contas servem para mesma coisa.\n\n```javascript\n// Bad Code\nvar nome1 = \"Cristiano\";\nvar nome2 = \"Maria\";\nvar nome3 = \"João\";\nvar nome4 = \"Cirilo\";\nvar nome5 = \"Joaquina\";\nvar nome6 = \"Manuel\";\nvar nome7 = \"Valentina\";\nvar nome8 = \"Enzo\";\nvar nome9 = \"Samanta\";\nvar nome10 = \"Suelen\";\n```\n\n### Uma das melhores alternativas seria utilizar um array com todos esses nomes.\n\n```javascript\n// Good code\nvar nomes = [\n \"Cristiano\",\n \"Maria\",\n \"João\",\n \"Cirilo\",\n \"Joaquina\",\n \"Manuel\",\n \"Valentina\",\n \"Enzo\",\n \"Samanta\",\n \"Suelen\",\n];\n```\n\nBasicamente, os arrays são mapas que possuem posições numeradas e cada posição pode guardar um determinado valor de qualquer tipo. Vale lembrar que no Javascript os arrays não são arrays de verdade, eles não possuem um tamanho finito alocado na memória, como em algumas linguagens, os arrays dos javascript são objetos, com algumas regalias, pois oferecem formas de acessar suas propriedades por meio de índices e contam com algumas métodos para manipulação do mesmo. A performance dos arrays em javascript é um pouco inferior a de outras linguagens, porém isso é compensado com sua facilidade de uso.\n\n#### Criando um array\n\nPodemos declarar um array das seguintes formas\n\n```javascript\n// Na forma literal\nvar meuArray = []; // Com um array vazio\nvar meuArray = [1, 2, \"string\"]; // Com uma coleção de dados\n\n// Com o construtor new Array\n\nvar meuArray = new Array(); // Array vazio\nvar meuArray = new Array(1, 2, \"string\"); // Com uma coleção de dados\nvar meuArray = new Array(10); // Ou passando o tamanho do array\n```\n\n> OBS: Podemos passar qual o tamanho do array, mas esse não é o tamanho máximo, como ocorre em outras linguagens, pois os arrays do javascript não possuem um tamanho máximo, possuem apenas um tamanho inicial.\n\n#### Alimentando um array\n\nAntes de alimentar um array é preciso entender que a contagem de posições de um array começa do zero, ou seja, a primeira posição de um array é o 0, a segunda é o 1 e assim por diante.\n\nPodemos alimentar um array na hora da sua criação, ou simplesmente indicando uma posição e qual valor queremos armazenar.\n\n```javascript\nvar carros = []; ou var carros = new Array();\ncarros[1] = 'Pálio';\ncarros[7] = 'Ka';\n```\n\nAlgo para se observar, é que não precisamos seguir a ordem das posições para colocar um valor, podemos simplesmente colocar um valor na posição 1 e depois um na posição 7 e teremos o seguinte resultado:\n\n```javascript\n[, \"Pálio\", , , , , , \"Ka\"];\n```\n\nO que aconteceu é que as outras posições carregam o valor undefined, isso indica que elas estão \"vazias\", pois ainda não receberam nenhum valor. Veja uma representação visual do mesmo array.\n\n```javascript\n[\n undefined,\n \"Pálio\",\n undefined,\n undefined,\n undefined,\n undefined,\n undefined,\n \"Ka\",\n];\n```\n\nExistem outras formas de alimentar e manipular um array, veremos algumas com a API do array.\n\n#### API do array\n\nEsses são apenas alguns dos métodos presentes no objeto array, coloquei os que são considerados mais usuais, porém você pode acessar a lista com todos os métodos no [site da Mozila](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array).\n\n- #### valueOf()\n\n \tRetorna o próprio array ou pode retornar o valor de alguma posição.\n\n \t```javascript\n \tvar meuArray = [1,2,3,4];\n \tmeuArray.valueOf(); // [1,2,3,4]\n \tmeuArray[1].valueOf(); // [2]\n \t```\n\n- #### lenght\n\n \tEsse não é um metódo do array, é uma propriedade que contém o tamanho do array.\n\n \t```javascript\n \tmeuArray.length; // 4\n \t```\n\n- #### push()\n\n \tEssa é um dos métodos mais utilizados, ele é usado para adicionar itens ao final do array.\n\n \t```javascript\n \tmeuArray = [1,2,3,4];\n \tmeuArray.push('casa'); // [1,2,3,4, 'casa']\n \t```\n \tPodemos adicionar quantos valores quisermos em um único push.\n\n- #### pop()\n\n \tRemove o ultimo item de um array.\n\n \t```javascript\n \tmeuArray = [1,2,3,4, 'casa'];\n \tmeuArray.pop(); // [1,2,3,4]\n \t```\n\n- #### unshift()\n\n \tAdiciona um item no inicio do array. Bem semelhante ao push.\n\n \t```javascript\n \tmeuArray = [1,2,3,4];\n \tmeuArray.unshifit('Primeiro'); // ['Primeiro', 1, 2, 3, 4]\n \t```\n\n- #### shift()\n\n \tRemove o primeiro item de um array. Semelhante ao pop.\n\n \t```javascript\n \tmeuArray = ['Primeiro', 1, 2, 3, 4];\n \tmeuArray.shift(); // [1,2,3,4]\n \t```\n\n- #### indexOf()\n\n \tRetorna a posição de um item, caso ele não exista o retorno é -1.\n\n \t```javascript\n \tmeuArray = [1,2,3,4];\n \tmeuArray.push('casa'); // [1,2,3,4, 'casa']\n \tmeuArray.indexOf('casa'); // 4\n \tmeuArray.indexOf('batata'); // -1\n \t```\n\n- #### splice()\n\n \tO splice tem 3 utilidades e cada utilidade vai depender dos argumentos que forem passados.\n\n ```javascript\n ;\n `\n *\n\n t\n ]\n `\n .\n .\n\n t\n ]\n `\n\n *\n\n t\n ;\n ]\n `\n .\n\n *\n\n t\n ;\n ]\n `\n\n .\n .\n ```\n\n* #### forEach()\n\n \tUma das muitas formas de percorrer um array, ele é uma ótima alternativa para substituir o clássico for.\n\n \t```javascript\n \tmeuArray = [1,2,3,4];\n\n \t//Percorrendo com o for:\n \tfor(var i = 0; i < meuArray.lenght; i ++ {\n \t\tconsole.log(meuArray[i]);\n \t}\n\n \t//Utilizando o forEach:\n \tmeuArray.forEach(function(item){\n \tconsole.log(item);\n \t});\n \t```\n\n* #### filter()\n\n \tUtilizado para fazer uma busca de forma simples. A função retorna os itens que estiverem de acordo com a condição passada.\n\n \t```javascript\n \tmeuArray = ['Batman', 'Superman', 'Capitão'];\n \t// Buscar Batman no array\n \tmeuArray.filter(function(item){\n \t\treturn item === 'Batman';\n \t});\n\n \t// Retorno ['Batman']\n \t```\n\n* #### every()\n\n \tPode ser usado quando queremos verificar se todos os itens do array atendem a uma determinada condição.\n\n \t```javascript\n \tmeuArray = [\n \t\t{nome: 'Cristiano', idade: 22},\n \t\t{nome: 'Marcia', idade: 27},\n \t\t{nome: 'Alan', idade: 12}\n \t];\n \t//Verificar se todas as pessoas tem uma idade maior que 18\n \tmeuArray.every(function(item){\n \t\treturn item.idade > 18;\n \t});\n \t// Retorno falso\n \t```\n\n* #### some()\n\n \tAo contrário do every, o some retorna true se ao menos um item atender as condições passadas.\n\n \t```javascript\n \tmeuArray = [\n \t\t{nome: 'Cristiano', idade: 22},\n \t\t{nome: 'Marcia', idade: 27},\n \t\t{nome: 'Alan', idade: 12}\n \t];\n \t//Verificar se alguma pessoas tem uma idade maior que 18\n \tmeuArray.some(function(item){\n \t\treturn item.idade > 18;\n \t});\n\n \t//Retorno Verdadeiro\n \t```\n\n* #### map()\n\n \tO map pode ser utilizado quando queremos criar um novo array a partir de outro, mas com algumas condições.\n\n \t```javascript\n \tmeuArray = [1,2,3,4,5,6,7,8,9,10,11,12];\n\n \tvar novoArray = meuArray.map(function(item){\n \t\treturn item * 2;\n \t});\n\n \t// novArray [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]\n \t```\n\n* #### reduce()\n\n \tO reduce tem basicamente a função de reduzir o valor a um único valor. Isso é feito com uma condição e inicialmente com 2 argumentos, acumulador e valor atual.\n\n \t```javascript\n \tmeuArray = [\n \t\t{nome: 'Cristiano', idade: 22},\n \t\t{nome: 'Marcia', idade: 27},\n \t\t{nome: 'Alan', idade: 12}\n \t];\n \t// Retonar a soma das idades de todas as pessoas\n \tmeuArray.reduce(function(prev, cur){\n \t\treturn prev + cur.idade;\n \t});\n\n \tRetorno // \"[object Object]2712\"]\n \t```\n\n \tTivemos esse retorno porque inicialmente o prev tem o valor undefine e é preciso definir em que valor iniciará a operação, no nosso caso será em 0.\n\n \t```javascript\n \tmeuArray.reduce(function(prev, cur){\n \t\treturn prev + cur.idade;\n \t},0);\n \t//Retorno 61\n \t```\n\n* #### concat()\n\n \tO concat é utilizado para concatenar dois arrays ou mais.\n\n \t```javascript\n \tmeuArray = [\n \t\t{nome: 'Cristiano', idade: 22},\n \t\t{nome: 'Marcia', idade: 27},\n \t\t{nome: 'Alan', idade: 12}\n \t];\n\n \tvar outroArray = [\n \t\t{nome: 'Marta', idade: 45},\n \t\t{nome: 'Ananda', idade: 17}\n \t];\n\n \tnovoArray = meuArray.concat(outroArray);\n\n //Resultado do novoArray\n [\n {nome: 'Cristiano', idade: 22},\n {nome: 'Marcia', idade: 27},\n {nome: 'Alan', idade: 12},\n {nome: 'Marta', idade: 45},\n {nome: 'Ananda', idade: 17}\n ];\n\n ```\n\n ```\n\nUma coisa interessante é que o array passado como argumento é sempre concatenado ao final.\n\n- #### slice()\n\n \tO slice é bem diferente do splice. Com o slice podemos fazer recortes do nosso array ao passar as posições de início e fim.\n\n \t```javascript\n \tmeuArray = ['manga', 'leite', 'abacaxi', 'ovo'];\n \tmeuArray.slice(0,2);\n \t//Retorno ['manga', 'leite']\n \t```\n\n \tSe analisarmos bem, esse não era o resultado esperado, pois a posição 2 é o abacaxi. Isso aconteceu porque o ultimo item a ser retornado com o slice é a posição - 1, ou seja, 2-1.\n \tSe quisermos imprimir o abacaxi nosso slice deve ir de 0 a 3( 3 - 1).\n\n \t```javascript\n \tmeuArray.slice(0,3);\n \t// Retorno ['manga', 'leite', 'abacaxi']\n\n \t```\n\n- #### reverse()\n\n \tEssa é mais uma das propriedades com um nome intuitivo. Essa função faz exatamente o que o nome sugere, ela reverte o nosso array.\n\n \t```javascript\n \tmeuArray = [10,20,30,40,50];\n \tmeuArray.reverse();\n \t// Retorno [50, 40, 30, 20, 10]\n \t```\n \tCuidado, pois essa é uma das operações que alteram o array.\n\n- #### sort()\n\n \tCom ela nós conseguimos ordenar um array.\n\n \t```javascript\n \tmeuArray = ['comida', 'roupa lavada', 'casa'];\n \tmeuArray.sort();\n \t// Resultado [\"casa\", \"comida\", \"roupa lavada\"]\n \t```\n \tPorém esse método vai muito além disso, podemos ordenar itens números na ordem crescente ou decrescente. A lógica da ordenação pode parecer confusa, mas é bem simples.\n\n \t\t1. Nós vamos ter dois argumentos A e B.\n \t\t2. A será o primeiro item do array e B o segundo.\n \t\t3. A ordenação acontece com base na subtração entre A e B.\n \t\t4. Se o resultado for negativo, A aparece antes de B.\n \t\t5. Se o resultado for 0, nada é alterado.\n \t\t6. Se o resultado for positivo, B aparece antes de A.\n\n \t```javascript\n \tmeuArray = [20, 1, 44, 109, 6, 21, 5];\n\n \tmeuArray.sort(function(a,b){\n \t\treturn a - b;\n \t});\n\n \t// Resultado [1, 5, 6, 20, 21, 44, 109]\n \t```\n \tSe quisermos que a ordenação seja em ordem decrescente só mudamos a subtração.\n\n \t```javascript\n \tmeuArray.sort(function(a,b){\n \t\treturn b - a;\n \t});\n \t// Resultado [109, 44, 21, 20, 6, 5, 1]\n \t```\n \tEsse método também altera o array.\n\n- #### join()\n\n \tO join nos permite transformar um array em uma string com um separado qualquer.\n\n \t```javascript\n \tmeuArray = ['Bahia', 'Maceió', 'Pernambuco'];\n \tmeuArray.join('-');\n \t// Resultado 'Bahia-Maceió-Pernambuco'\n \t```\n \tO join é como uma operação inversa do split. No split nós transformamos uma string em um array, já no join acontece o contrário.\n\n### Isso é tudo, pessoal!!\n\nCheguei ao fim de mais um post!! Em breve farei mais alguns sobre a linguagem. Esse ficou um pouco extenso, mas o objetivo era fazer um resumão bem completo pra entender o básico do uso dos arrays.\n\nTodo esse conteúdo foi feito com base nos seguintes links:\n[Canal do Rodrigo Branas](https://www.youtube.com/watch?v=093dIOCNeIc&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc&index=1)\n[W3school](https://w3schools.com)\n[Documentação da Mozila](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)\n[Imasters](https://imasters.com.br/artigo/21197/javascript/entendendo-arrays-no-javascript/?trace=1519021197&source=single)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Consumindo uma API de pokemon com Javascript","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2792,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-03-01-consumindo-uma-api-de-pokemon-com-javascript","datePublished":"2018-02-03 13:41:00","dateModified":"2018-02-03 13:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nEssa semana eu estava dando uma olhada em algumas vagas no [Front End Brasil](https://github.com/frontendbr/) e notei que muitas vagas pediam **experiência com o uso de API's**. Fui correndo pro fórum do Front End Brasil e perguntei: \"Como saber se tenho Experiência com API's?\"\nCom a contribuição do pessoal eu consegui entender um pouco mais sobre API's e resolvi compartilhar um pouco do meu aprendizado.\nEsse artigo foi inspirado em [How to connect to an api with javascript](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/) e nele vou mostrar como consumir e manipular os dados de uma API com informações sobre pokemons.\n\nCaso queira já pode dar uma olhada no que será construído nesse artigo.\n\n- [Demonstração](https://crisgon.github.io/pokeinfo)\n- [Códigos](https://github.com/crisgon/pokeinfo)\n\n### O que é uma API?\n\n**Se dermos uma \"googlada\" vamos dar de cara com a seguinte descrição no wikipedia:**\n\n_\"Interface de Programação de Aplicações (português europeu) ou Interface de Programação de Aplicação (português brasileiro)), cujo acrônimo API provém do Inglês Application Programming\nInterface, é um conjunto de rotinas e padrões estabelecidos por um software para a utilização\ndas suas funcionalidades por aplicativos que não pretendem envolver-se em detalhes da implementação do software, mas apenas usar seus serviços.\nDe modo geral, a API é composta por uma série de funções acessíveis somente por programação, e que permitem utilizar características do software menos evidentes ao utilizador tradicional.\"_\n\nDe forma mais crua, uma API provê uma interface que permite que um software se comunique com outro software sem que seja necessário ter conhecimento do que acontece por de baixo dos panos.\nOu seja, uma API pode permitir que tenhamos acesso a geolocalização sem que precisemos saber que blocos de códigos são executadas para que essa geolocalização seja fornecida, pode permitir que seja possível criar contas utilizando o facebook, google ou twitter, ou pode simplismente nos fornecer informações sobre livros.\n\nVale ressaltar que as API's não se limitam apenas a WEB, elas estão presentes em diversos outros cenários, como o dos SO's, dos embarcados e vários outros. Porém se tratando do cenário WEB as API's se baseiam em requisições e respostas HTTP (requests e responses), que na maioria das vezes seguem o padrão XML ou JSON.\n\n**Para entender sobre API's de forma mais clara faça a leitura desses artigos:**\n\n- [O que é API](https://canaltech.com.br/software/o-que-e-api/)\n- [Nobody introduced me to the API](https://www.robinwieruch.de/what-is-an-api-javascript/).\n- [Interface de programação de aplicações](https://pt.wikipedia.org/wiki/Interface_de_programação_de_aplicações)\n\n## Hey! Oh!, let's go!\n\n**Antes de iniciar quero deixar claro que essa aplicação foi totalmente desenvolvida por mim, então é capaz de conter pequenos bugs e também pode ser que as técnicas que utilizei não tenham sido as melhores, porém senti a necessidade de compartilhar o conhecimento sobre API's que consegui até agora.**\n\nVamos construir uma pequena aplicação que recebe o nome ou o número de um pokemon e retorna algumas informações sobre o mesmo.\n\n![Print da aplicação](https://i.imgur.com/bXGuv94.png \"Aplicação utilizando dados de pokemons\")\n\nVamos utilizar os dados da [pokeapi](https://pokeapi.co), toda informação adicional necessária se encontra na documentação da API.\n\n#### O HTML e o CSS\n\nO foco desse artigo é o javascript, então não vou explicar sobre o HTML e CSS, mas basicamente temos o seguinte HTML:\n\n```html\n
\n \n\n
\n \n \n \n\n
\n Not Found!\n
\n```\n\nAlém do form, temos uma section que irá receber os dados dos pokemons e um span que irá aparecer quando uma busca não for bem sucedida.\n\nCaso queira pode fazer o download do [HTML](https://github.com/crisgon/pokeinfo/blob/gh-pages/index.html) e do [CSS](https://github.com/crisgon/pokeinfo/blob/gh-pages/pokemons.css)\n\n#### O Javascript\n\nA primeira coisa que iremos fazer é definir uma constante(também pode ser uma variável) com o URL da API, que também é chamada de endpoint.\n\n```javascript\n// API endpoint\nconst baseUrl = \"https://pokeapi.co/api/v2/pokemon/\";\n```\n\nAgora iremos criar uma pequena função para diminuir a escrita na hora de pegar os elementos HTML.\n\n```javascript\nfunction getElement(element) {\n return document.querySelector(element);\n}\n```\n\nLogo em seguida iremos capturar os elementos HTML e criar 3 variáveis globais que usaremos futuramente.\n\n```javascript\n// Get Elements\nconst searchInput = getElement(\".search-input\"),\n searchButton = getElement(\".search-button\"),\n container = getElement(\".pokemon\"),\n erroMessage = getElement(\".error\");\n\nvar pokeName, // Nome ou numero passado na caixa de busca\n pokemon, // Responsavel por guardar os dados recebidos da API\n card; // Responsavel por receber o HTML\n```\n\n**Você pode dar um console.log() em cada uma das constantes para verificar se a captura foi feita corretamente.**\n\nAgora vamos estabelecer nossa primeira conexão com a API. Existem diversas maneiras de fazer isso, uma bem usual é utilizando o XMLHttpRequest(), porém utilizaremos o fetch por sua praticidade.\n\n```javascript\nfetch(\"https://pokeapi.co/api/v2/pokemon/pikachu\")\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(err => console.log(err));\n```\n\n**Abra o console do seu navegador e veja que agora temos um objeto com informações sobre o pokemon pikachu.**\n\n> Uma explicação rápida sobre o fetch: Ele é composto por [promisses](https://braziljs.org/blog/promises-no-javascript/) javascript, e basicamente o primeiro .then() recebe a resposta da requisição e por meio de uma função transformamos essa resposta em um json, logo depois o segundo .then() recebe essa resposta, e a imprime no console. Por fim temos o catch que só é executado caso aconteça algum erro na operação e a imprime uma mensagem de erro console.\n\nAgora já sabemos como fazer uma requisição! Se você se atentou, precisamos apenas mudar a URL para conseguir informações sobre outro pokemon. Faça o teste substituindo pikachu por outro nome ou algum número.\n\n#### Vamos fazer algumas alterações no nosso código e ele deve ficar assim:\n\n```javascript\n// API endpoint --------------------------------------------\nconst baseUrl = \"https://pokeapi.co/api/v2/pokemon/\";\n\n// Get Elements --------------------------------------------\nconst searchInput = getElement(\".search-input\"),\n searchButton = getElement(\".search-button\"),\n container = getElement(\".pokemon\"),\n erroMessage = getElement(\".error\");\n\nvar pokeName, // Nome ou numero passado na caixa de busca\n pokemon, // Responsavel por guardar os dados recebidos da API\n card; // Responsavel por receber o HTML\n\n// Build Functions --------------------------------------------\n\n// Função para reduzir a escrita na captura de elementos HTML\nfunction getElement(element) {\n return document.querySelector(element);\n}\n\n// Função responsavel por fazer requisições para a API e inserir as respostas na variavel pokemon\nfunction requestPokeInfo(url, name) {\n fetch(url + name)\n .then(response => response.json())\n .then(data => {\n pokemon = data;\n })\n .catch(err => console.log(err));\n}\n\nconsole.log(pokemon); // Execute o console para verificar os dados no console\n```\n\nJá sabemos como receber os dados de um pokemon, porém ainda não temos nada dinâmico... Então vamos pegar o valor da caixa de pesquisa e utiliza-lo para pesquisar por um pokemon. Para isso vamos adicionar um evento de click ao botão e atribuir o valor do input para a variável pokeName, que será passada como argumento para nossa função que faz a requisição para a API.\n\n```javascript\nsearchButton.addEventListener(\"click\", event => {\n event.preventDefault();\n pokeName = searchInput.value.toLowerCase();\n /* A api só aceita nomes minusculos, então vamos usar a função toLowerCase para garantir que nenhuma letra maiuscula seja passada. */\n requestPokeInfo(baseUrl, pokeName);\n});\n```\n\n**Agora podemos escrever o nome de um pokemon e receber dados sobre ele no console do navegador. Faça o teste!! Eai, funcionou?**\n\nAgora vamos trazer os dados que estão no console para o nosso documento HTML, pois ninguém quer ficar abrindo o console pra ficar visualizando informações. 😃\n\n> A nossa resposta é um objeto, então podemos acessar suas propriedades como em qualquer objeto javascript. Para recuperarmos o nome do pokemon podemos executar pokemon.name, para o número usamos o pokemon.id e todas as outras informações seguem a mesma lógica.\n\nVamos criar uma função que irá montar um HTML. Recomendo que pesquise por [template strings](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings) caso ache a sintaxe \\${} estranha.\n\n```javascript\nfunction createCard() {\n card = `\n
\n $\"Sprite$ \n
\n
\n
Name: ${pokemon.name}
\n
Nº ${pokemon.id}
\n
Type: ${pokemon.types\n .map(item => \" \" + item.type.name)\n .toString()}
\n
Skills: ${pokemon.moves\n .map(item => \" \" + item.move.name)\n .toString()}
\n
Weight: ${pokemon.weight / 10}kg
\n
Height: ${pokemon.height / 10}m
\n
`;\n return card;\n}\n```\n\n> O weight e o height (peso e altura) eles vem multiplicados por 10, descobri isso comparando as informações com as do site oficial do Pokemon. Por isso estou dividindo ambos por 10. Outra coisa importante são as informações type e skills (tipo e habilidades). Ambas podem conter um valor ou vários, sendo retornadas como um array. Então utilizei o map para criar um novo array com espaços e logo em seguida converti tudo em string.\n\nLogo em seguida adicione esse pequeno trecho `container.innerHTML = createCard();` na\nfunção do addEventListener do botão, atualize a página e pesquise por um pokemon. Ocorreu algum erro? Certo, vamos corrigir!\n\nO erro acontece porque a função que cria o HTML foi executada antes da requisição terminar, logo temos a mensagem de que não podemos acessar propriedades de undefined. Para resolver isso precisamos fazer com que nossa função que cria o HTML espere um pouco antes de ser executada, vamos utilizar o setTimeout, porém recomendo que pesquise sobre [javascript assíncrono](https://braziljs.org/blog/tag/javascript-assincrono/).\n\nCriaremos uma função principal que será responsável por fazer a chamada de todas as outras funções existentes.\n\n```javascript\n// Função que faz a chamada das principais funções e inicia o app\nfunction startApp(pokeName) {\n requestPokeInfo(baseUrl, pokeName);\n\n // A função que cria o HTML só será executada 2 segundos depois que a função startApp for executada\n setTimeout(function() {\n container.innerHTML = createCard();\n }, 2000);\n}\n```\n\nFaça uma mudança na função de click do botão, faça com que a única função a ser executada seja a startApp.\n\n#### Com as alterações feitas nosso código deve ficar assim\n\n```javascript\n// API endpoint --------------------------------------------\nconst baseUrl = \"https://pokeapi.co/api/v2/pokemon/\";\n\n// Get Elements --------------------------------------------\nconst searchInput = getElement(\".search-input\"),\n searchButton = getElement(\".search-button\"),\n container = getElement(\".pokemon\"),\n erroMessage = getElement(\".error\");\n\nvar pokeName, // Nome ou numero passado na caixa de busca\n pokemon, // Responsavel por guardar os dados recebidos da API\n card; // Responsavel por receber o HTML\n\n// Build Functions --------------------------------------------\n\n// Função para reduzir a escrita na captura de elementos HTML\nfunction getElement(element) {\n return document.querySelector(element);\n}\n\n// Função responsavel por fazer requisições para a API e inserir as respostas na variavel pokemon\nfunction requestPokeInfo(url, name) {\n fetch(url + name)\n .then(response => response.json())\n .then(data => {\n pokemon = data;\n })\n .catch(err => console.log(err));\n}\n\n// Função responsavel por montar o HTML exibido na pagina\nfunction createCard() {\n card = `\n
\n $\"Sprite$ \n
\n
\n
Name: ${pokemon.name}
\n
Nº ${pokemon.id}
\n
Type: ${pokemon.types\n .map(item => item.type.name)\n .toString()}
\n
Skills: ${pokemon.moves\n .map(item => \" \" + item.move.name)\n .toString()}
\n
Weight: ${pokemon.weight / 10}kg
\n
Height: ${pokemon.height / 10}m
\n
`;\n return card;\n}\n\n// Função que faz a chamada das principais funções e inicia o app\nfunction startApp(pokeName) {\n requestPokeInfo(baseUrl, pokeName);\n\n setTimeout(function() {\n container.innerHTML = createCard();\n }, 2000);\n}\n\n// Add Events --------------------------------------------\nsearchButton.addEventListener(\"click\", event => {\n event.preventDefault();\n pokeName = searchInput.value.toLowerCase();\n startApp(pokeName);\n});\n```\n\n#### Já podemos dar o nosso APP como finalizado, então o que vem a seguir é opcional.\n\n**A primeira grande mudança que iremos fazer é na função principal**\n\n```javascript\nfunction startApp(pokeName) {\n requestPokeInfo(baseUrl, pokeName);\n\n setTimeout(function() {\n //Exibe uma mensagem caso o pokemon pesquisado não exista\n if (pokemon.detail) {\n erroMessage.style.display = \"block\";\n container.style.display = \"none\";\n } else {\n erroMessage.style.display = \"none\";\n container.style.display = \"flex\";\n container.innerHTML = createCard();\n }\n }, 2000);\n}\n```\n\nQuando uma pesquisa é mal sucedida o retorno é a informação detail. Então verificamos se existe o detail no objeto pokemon, caso exista nós mudamos o display da tag que contém a mensagem de erro para block e mudamos o display da section com as informações do pokemon para none.\nSe a propriedade detail não existir, significa que a busca foi bem sucedida, então escondemos a mensagem de erro, mostramos a section com as informações e chamamos a função que monta o html.\n\n**A próxima grande mudança é no evento de click**\n\n```javascript\n// Add Events --------------------------------------------\nsearchButton.addEventListener(\"click\", event => {\n event.preventDefault();\n pokeName = searchInput.value.toLowerCase();\n startApp(pokeName);\n container.classList.add(\"fade\");\n\n // Reseta o efeito fade removendo a classe fade\n setTimeout(() => {\n container.classList.remove(\"fade\");\n }, 3000);\n});\n```\n\nAqui estamos adicionando a classe 'fade' ao nosso container, essa classe é responsável por fazer um efeito de transição suave.\nLogo depois utilizamos o `setTimeout()` para remover a classe fade depois de 3 segundos para que ela possa ser adicionada novamente no próximo evento de click.\n\n#### No fim de tudo o código deve ficar assim\n\n```javascript\n// API endpoint --------------------------------------------\nconst baseUrl = \"https://pokeapi.co/api/v2/pokemon/\";\n\n// Get Elements --------------------------------------------\nconst searchInput = getElement(\".search-input\"),\n searchButton = getElement(\".search-button\"),\n container = getElement(\".pokemon\"),\n erroMessage = getElement(\".error\");\n\nvar pokeName, // Nome ou numero passado na caixa de busca\n pokemon, // Responsavel por guardar os dados recebidos da API\n card; // Responsavel por receber o HTML\n\n// Build Functions --------------------------------------------\n\n// Função para reduzir a escrita na captura de elementos HTML\nfunction getElement(element) {\n return document.querySelector(element);\n}\n\n// Função responsavel por fazer requisições para a API e inserir as respostas na variavel pokemon\nfunction requestPokeInfo(url, name) {\n fetch(url + name)\n .then(response => response.json())\n .then(data => {\n pokemon = data;\n })\n .catch(err => console.log(err));\n}\n\n// Função responsavel por montar o HTML exibido na pagina\nfunction createCard() {\n card = `\n
\n $\"Sprite$ \n
\n
\n
Name: ${pokemon.name}
\n
Nº ${pokemon.id}
\n
Type: ${pokemon.types\n .map(item => item.type.name)\n .toString()}
\n
Skills: ${pokemon.moves\n .map(item => \" \" + item.move.name)\n .toString()}
\n
Weight: ${pokemon.weight / 10}kg
\n
Height: ${pokemon.height / 10}m
\n
`;\n return card;\n}\n\n// Função que faz a chamada das principais funções e inicia o app\nfunction startApp(pokeName) {\n requestPokeInfo(baseUrl, pokeName);\n\n setTimeout(function() {\n //Exibe uma mensagem caso o pokemon pesquisado não exista\n if (pokemon.detail) {\n erroMessage.style.display = \"block\";\n container.style.display = \"none\";\n } else {\n erroMessage.style.display = \"none\";\n container.style.display = \"flex\";\n container.innerHTML = createCard();\n }\n }, 2000);\n}\n\n// Add Events --------------------------------------------\nsearchButton.addEventListener(\"click\", event => {\n event.preventDefault();\n pokeName = searchInput.value.toLowerCase();\n startApp(pokeName);\n container.classList.add(\"fade\");\n\n // Reseta o efeito fade removendo a classe fade\n setTimeout(() => {\n container.classList.remove(\"fade\");\n }, 3000);\n});\n```\n\n### Isso é tudo, pessoal!!\n\nEsse artigo foi um pouco mais extenso que o normal, mas foi muito enriquecedor para mim, espero que tenha acrescentado algo nos seus estudos. Provavelmente eu devo ter me equivocado em algum momento ou deixado alguma informação confusa, caso tenha visto algo do tipo é só me avisar, isso vai ajudar muito na minha caminhada para ser um Front End Developer!\n\nTodo esse conteúdo foi feito com base nos seguintes links:\n\n- [How to connect to an api with javascript](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)\n- [O que é API](https://canaltech.com.br/software/o-que-e-api/)\n- [Nobody introduced me to the API](https://www.robinwieruch.de/what-is-an-api-javascript/).\n- [Interface de programação de aplicações](https://pt.wikipedia.org/wiki/Interface_de_programação_de_aplicações)\n- [Front End Brasil](https://github.com/frontendbr/forum/issues)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Criando um CSS do BEM - Parte 1","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":801,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-02-22-criando-um-css-do-bem-parte-1","datePublished":"2018-02-02 13:41:00","dateModified":"2018-02-02 13:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nProvavelmente você, assim como eu, deve passar por dificuldades ao nomear uma classe CSS e depois de muito esforço cria essa classe com um nome nada legal e com pouco significado. Com a classe criada você inicia a escrita do CSS, gera um arquivo com centenas de linhas e finaliza seu trabalho. A princípio tudo está sob controle, pois o layout ficou do exatamente do jeito que você queria. Depois disso passam-se alguns meses e surge a necessidade de fazer mudanças no seu CSS, mas você demora um certo tempo tentando entender o que cada classe faz, após um tempo buscando entender seu própio CSS você decide criar uma nova seção no seu projeto e essa seção tem alguns elementos que já foram criados anteriormente, mas você não consegue fazer reuso e é levado a copiar todas as regras para uma nova classe que você precisou criar, aumentando ainda mais seu CSS.\n\nQue processo complicado, não? Se para quem escreveu o CSS essa situação já é confusa, imagine para um colega de trabalho ou para alguém da comunidade que quer contribuir com seu projeto e não consegue pois seu código não possui um padrão. E mesmo que alguém resolva contribuir com seu projeto, sem um padrão as coisas só tendem a piorar. É por isso que nesse artigo iremos ver um pouco sobre como padronizar o CSS utilizando a metodologia BEM.\n\n![Programador com as mãos na cabeça em frente ao computador](/assets/img/frustrated_man.jpg)\n\n### BEM ( Block\\_\\_Element_Modifier)\n\nCriado pelo [Yandex](https://www.yandex.com), site de buscas russo, o BEM é uma entre as diversas metodologias para organização do CSS, segundo a descrição do própio [site](http://getbem.com) o BEM é focado em ajudar na criação de componentes reutilizaveis e no compartilhamento de código no desenvolvimento Front End.\nSua estrutura é dividida em **B**loco, **E**lemento e **M**odificador.\n\n- Bloco\n Um bloco é um algo que tem um significado mesmo sozinho. Ou seja, ele por si só consegue passar a informação de sua funcionalidade.\n **Exemplos:** Menu, Cabeçalho, Formulário, Button, Input, Card, etc.\n\n ```html\n E-mail: \n ```\n\n- Elemento\n O elemento não consegue passar uma informação sozinho. Ele faz parte de um bloco e pode precisar de outros elementos para ter um significado.\n **Exemplos:** Input checkbox ou radio, Label, Item de uma lista ou menu.\n\n ```html\n \n ```\n\n- Modificador\n\n Utilizado para mudar a aparência, visibilidade, tamanho ou comportamento de um bloco ou elemento.\n **Exemplos:** Small, Big, Hidden, Error, alert, Fixed, Red, Green.\n\n#### Criando classes\n\nAgora já sabemos de que uma classe é composta ao utilizar a metodologia BEM, porém ainda existe outro ponto importante, responsável pela estranheza e pela grande sacada do BEM.\n\nAs classes com BEM são escritas dessa forma **Block\\_\\_Element_Modifier**, existem algumas variações como essa **Block\\_\\_Element--Modifier**, mas irei utilizar a primeira forma, pois é a utilizada nos exemplos da documentação.\n\nO bloco é separado pelo elemento com o uso de 2 underlines(\\__) e o modificador é separado por 1 underline(_), quando necessário o valor de um modificador é separado por 1 traço (-).\n\n**Vamos ao exemplo:**\n\n```html\n
\n \n \n \n \n
\n```\n\nAqui temos um bloco, 4 elementos e 2 modificadores.\n\n```\n.form (Bloco)\n.form__name (elemento)\n.form__email (elemento)\n.form__button_red (elemento com modificador)\n.form__button_green (elemento com modificador)\n```\n\nNesse exemplo temos apenas um modificador, mas podemos combinar vários.\n\n```\n.form__button_green .form__button_size-small;\n```\n\nVocê pode conferir um exemplo mais detalhado no meu [codepen](https://codepen.io/crisgon/pen/YeedJo).\n\n#### Mas isso é muito estranho...\n\n**Pode parecer bem estranho, mas essa estranheza tem suas vantagens:**\n\n- Ao \"bater o olho\" você consegue entender a estrutura. É fácil perceber que .form\\_\\_name é um elemento do bloco .form.\n- Cada elemento tem seu nome, permitindo que uma alteração não afete outro elemento do mesmo tipo.\n- Problemas com especificidade são raros, pois só usamos classes e evitamos o aninhamento.\n- Existe melhoria no desempenho, pois seletores CSS são lidos da direita para esquerda e no BEM temos apenas uma classe, o que torna a leitura mais rápida.\n- Os códigos podem ser fácilmente reaproveitados.\n\n**E também possui desvantagens**\n\n- As classes podem ficar extensas e deixar o HTML poluído.\n- O HTML fica com mais mais linhas, tornando o arquivo final maior.\n- Frameworks como Bootstrap não utilizam BEM, então a mistura de padrões pode tornar tudo confuso.\n\n#### Concluindo BEM discretamente\n\nAté aqui vimos um pouco sobre a estrutura de classes do BEM e como ela pode ser algo bem estranha logo no primeiro contato, pois as classes ficam bem extensas. Também vimos que criar classes bem descritas facilitam no entendimento do código, porém tornam o HTML mais extenso, mas que esse pequeno aumento do HTML é compensado ao mantermos um CSS bem organizado, fácil de dar manutenção e com grande possibilidade de reaproveitamento de código.\n\n**No próximo artigo irei abordar sobre a convenção para criação dos nomes das classes, sobre aninhamentos e quando criar blocos ou elementos.**\n\n#### Alguns links importantes:\n\n[BEM](http://getbem.com)\n\n[Usando BEM CSS](https://imasters.com.br/front-end/css/usando-bem-css/?trace=1519021197&source=single)\n\n[Learning to love bem](http://mono.company/journal/frontend/learning-to-love-bem/)\n"},{"@type":"BlogPosting","headline":"Desenhando com box shadow","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":837,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-02-22-desenhando-com-box-shadow","datePublished":"2018-02-02 11:41:00","dateModified":"2018-02-02 11:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nSempre gostei de admirar o trabalho de outras pessoas, para conseguir inspiração, saber o quanto eu sei ou simplesmente para apreciar a arte. Nesses pequenos momentos de apreciação eu sempre me deparei com uma ou outra pixel art e meus primeiros pensamentos eram que eu não conseguiria fazer, que era muito difícil e que meu conhecimento não era o suficiente. Infelizmente carreguei esse pensamento por um bom tempo e isso me prejudicava, pois eu via todo aquele código e nem tentava entender, porque na minha cabeça aquilo era algo fora do meu alcance, mas essa semana eu eu precisava desenhar alguns heróis para o [dailycssimages](https://codepen.io/collection/DjydKR) e resolvi que era a hora de aprender a criar meus desenhos usando a propriedade `box-shadow.`\n\n#### Essa foi a primeira tentativa\n\nhttps://codepen.io/crisgon/pen/mXyREW\n\n#### Esse foi um dos ultimos trabalhos\n\nhttps://codepen.io/crisgon/pen/bLVgpq\n\nSei que muitas pessoas já passaram por uma situação parecida com a minha, então decidi criar esse post com o objetivo de ajudar o pessoal que tem vontade de fazer trabalhos desse tipo e não sabe por onde começar.\n\n## Chega de papo e vamos ao que interessa!\n\nAntes de continuar queria deixar claro que não aprendi fazendo nenhum curso, apenas li esse [artigo](http://joshnh.com/weblog/drawing-things-with-box-shadow/) e bisbilhotei alguns códigos no [codepen](https://codepen.io), leia muito código e veja como o pessoal constrói determinadas coisas e tente reproduzir, você vai aprender muito, pode confiar.\n\n### A propriedade box-shadow\n\nEssa é uma propriedade muito versátil e que na maioria das vezes não usamos todo potencial dela, digo isso pois sou um dos que faz o uso básico da mesma. Ela é composta por 4 atributos: Deslocamento horizontal da sombra, Deslocamento vertical da sombra, esfumaçado da sombra e cor da sombra.\n\n```css\nbox-shadow: 0 0 10px #000;\n/*Aqui temos uma sombra*/\n```\n\nEsse foi o uso básico de uma sombra, porém esse uso pode ir um pouco além com o uso de multiplas sombras.\n\n```css\nbox-shadow:\n 0 0 10px #000,\n 10px 10px 50px #ff0;\n/*Aqui temos duas sombras*/\n```\n\n**Podemos ter a quantidade de sombras que desejarmos apenas as separando por uma vírgula.**\n\n### Agora vamos criar algo usando o box-shadow\n\nIremos criar 4 quadrados coloridos, um quadrado será o próprio elemento e os outros três serão criados com as sombras.\n\n```html\n
\n```\n\n```css\n.quadrado {\n background: #00cec9;\n width: 40px;\n height: 40px;\n box-shadow:\n /*Linha 1 coluna 2*/\n 40px 0 #55efc4,\n /*Linha 2 coluna 1*/ 0px 40px #00b894,\n /*Linha 2 coluna 2*/ 40px 40px #00cec9;\n}\n```\n\nO resultado será o seguinte:\n![Quadrados com box-shadow](https://i.imgur.com/RGAseeE.png)\n\n#### Explicando o código\n\nA explicação é algo bem simples:\n\n- Todos os quadrados vão ter o tamanho do próprio elemento, 40px por 40px, no nosso caso.\n- O primeiro valor vai se referir ao deslocamento horizontal, usamos um deslocamento de 40px para que o quadrado fique ao lado do elemento.\n- O segundo valor vai se referir ao deslocamento vertical, podemos usar um deslocamento de 40px para que o quadrado fique em baixo do elemento ou 0 para que ele fique na mesma linha.\n\nSe quisermos criar um elemento 3x3 o código ficará assim:\n\n```html\n
\n```\n\n```css\n.quadrado {\n background: #00cec9;\n width: 40px;\n height: 40px;\n box-shadow:\n /*Linha 1 coluna 2*/\n 40px 0 #55efc4,\n /*Linha 1 coluna 3*/ 80px 0px #00cec9,\n /*Linha 2 coluna 1*/ 0px 40px #00b894,\n /*Linha 2 coluna 2*/ 40px 40px #00cec9,\n /*Linha 2 coluna 3*/ 80px 40px #00b894;\n}\n```\n\nO resultado será o seguinte:\n![Matriz 3x3 com box-shadow](https://i.imgur.com/VZE0KmN.png)\n\nTambém podemos transformar esses quadrados em circulos adicionando um `border-radius` no elemento.\n\n![Matriz 3x3 de circulos com box-shadow](https://i.imgur.com/gFWPwwQ.png)\n\n### Certo, mas como crio aquelas imagens maneiras?\n\nSe você entendeu como funciona o esquema do `box-shadow` os próximos passos são:\n\n- Tenha muita paciência, pois a construção é um processo demorado e no fim de tudo o css fica com centenas de linhas.\n- Procure uma referência para se basear!! É muito complicado sair desenhando e posicionando sem uma referência, por isso pesquise alguma pixel art e reproduza com css se atentando ao posicionamento das sombras.\n ![Pokebola Pixel Art](https://i.pinimg.com/736x/21/83/95/21839558dff090fc88e1b5756890bb85--pokemon-pokemon-pixel-art-pokemon.jpg)\n\nEssa imagem é um 15x15, é apenas uma versão maior do que criamos anteriormente.\n**Se possivel use um pre-processador para abusar das variáves!**\n\n### Só consigo desenhar pixel art? Não!!\n\nTambém podemos criar desenhos em outros estilos, da uma olhada nesse exemplo que fiz.\n\nhttps://codepen.io/crisgon/pen/oEjGjq\n\n## ATENÇÃO!!!\n\nUsar o `box-shadow` para desenhar é muito divertido, porém é algo que você deve evitar usar em produção, pois nem todos os navegadores possuem suporte e sua renderização é uma das mais lentas. Se precisar de um ícone ou desenho prefira usar fonts ou SVG.\n\n#### Se não vou usar no meu trabalho, então por que aprender?\n\n**Por diversão!! Existe motivo melhor que esse?**\nClaro que vamos ser beneficiados ao aumentar nosso conhecimento em CSS, pois vamos ter um maior domínio em uma das suas propriedades, mas o prazer de criar alguns desenhos no estilo daqueles que fizeram parte da nossa infância é algo sensacional.\n\n
\n\n**Esse [post](http://joshnh.com/weblog/drawing-things-with-box-shadow/) foi uma das bases para o meu artigo, da uma olhada e complemente seus estudos.**\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Tipos de dados Javascript","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":2161,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-02-25-tipos-de-dados-javascript","datePublished":"2018-01-25 10:09:00","dateModified":"2018-01-25 10:09:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nComo já tinha comentado em outro [post](https://crisgon.github.io/posts/Todo-dia-um-blog-diferente/), esse blog foi criado para documentar e compartilhar meu estudo sobre tecnologias front end. Essa semana eu retomei os estudos sobre Javascript(JS) e decidi começar do básico, pois quero entender bem sobre os princípios da linguagem. Inicialmente eu estudei sobre os tipos primitivos da linguagem e resolvi compartilhar o “pequeno” resumo que fiz durante meus estudos, é algo bem introdutório, mas é um pouco do que entendi sobre o assunto.\n\n![Xícara com desenho do Javascript](/assets/img/javascriptWallpaper.jpg \"Xícara com desenho do Javascript\")\n\nAntes de falar sobre os tipos primitivos de dados é preciso comentar sobre algo de grande importância na linguagem Javascript. Ela não é uma linguagem fortemente tipada, isso quer dizer que não precisamos declarar o tipo da variável no ato da criação. Ou seja, não precisamos dizer se ela vai ser um inteiro, um caractere, simplismente declaramos um valor.\n\n**Exemplos:**\n\n```c\n//Declaração de variaves em C\nint numeroDeHoras = 0;\nfloat precoDoQuilo = 10.53;\ndouble taxaDoDolar = 1.8;\nchar nomeDoCliente[30] = \"Fulano\";\n```\n\n```javascript\n//Declaração de variaves em Javascript\nvar numeroDeHoras = 0;\nvar precoDoQuilo = 10.53;\nvar taxaDoDolar = 1.8;\nvar nomeDoCliente = \"Fulano\";\n```\n\nAo criarmos uma variável no Javascript, ela pode assumir valores de diversos tipos. Entre os tipos disponíveis na linguagem os principais são \\[number, string, boolean, object, function e undefined].\n\n### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Number \"Number\")Number\n\nAo contrário de algumas linguagens, o JS não define diferentes tipos de números, como interger, float, long e etc. Temos apenas dois tipos, os inteiros e os de ponto flutuante.\n\n**Exemplo:**\n\n```javascript\nvar num1 = 120; //Esse é um numero inteiro(int)\nvar num2 = 12.01; //Esse é um numero de ponto flutuante(float)\n```\n\nOs números inteiros são preciso até 15 dígitos\n\n**Exemplo:**\n\n```javascript\nvar num1 = 999999999999999; // num1 vai ser 999999999999999\nvar num2 = 9999999999999999; // num2 vai ser 10000000000000000.\n```\n\nOs números de ponto flutuante aceitam precisamente até 17 casas decimais\n\n**Exemplo:**\n\n```javascript\nvar num1 = 0.1234567891234568; // 0.1234567891234568\nvar num2 = 0.123456789123455555588; // 0.12345678912345555\n```\n\nPodemos utilizar os números para fazer as operações básicas (soma, subtração, divisão, multiplicação) e também podemos fazer cálculos mais complexos, como raiz quadrada, cosseno, seno e diversos tipos de operações utilizando o [Math](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Math) do javascript.\n\n### Quando tratamos de aritmética podemos ter 3 resultados principais:\n\n#### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Numero-inteiro-ou-com-casas-decimais \"Número inteiro ou com casas decimais\")Número inteiro ou com casas decimais\n\n**Exemplo:**\n\n```javascript\nnum1 = 0.5 - 0.5; // 0\nnum2 = 2 - 1; // 1\nnum1 = 2 * 3; // 6\nnum2 = 2 / 2; // 1\n```\n\nExistem casos em que a operação não é precisa:\n\n```javascript\nnum1 = 0.2 + 0.1; // 0.30000000000000004\n```\n\n> OBS: Números ‘somados’ a strings geram uma string com a concatenação dosvalores.\n\n**Exemplo:**\n\n```javascript\nnum1 = \"Letra\" + 1; // Letra1\nnum2 = 2 + \"numero\"; // 2numero\n```\n\nEm alguns casos, quando existir uma string na operação o resultado não será uma soma, mas sim uma concatenação.\\\n\\\n**Exemplo:**\n\n```javascript\n\"O resultado é igual a\" + 10 + 10; // O resultado é igual a1010\n```\n\nPorém o compilador JS funciona da esquerda para direita, podendo fazer uma soma antes da concatenação.\\\n\\\n**Exemplo:**\n\n```javascript\nnum1 = 10 + 20 + \"numero\"; // 30numero\n```\n\n#### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Numero-inteiro-ou-com-casas-decimais \"Número inteiro ou com casas decimais\")+ Infinito e - Infinito\n\nO infinito é utilizado para representar números que excedem a capacidade de representação númerica do JS, seja o menor ou o maior número.\n\n```javascript\nnum1 = 3 / 0; // Infinity\nnum2 = -3 / 0; // -Infinity\n```\n\n> OBS: Podemos verificar o maior e o menor número que podem ser representados com as seguintes propriedades.\\\n> _Number.MAX_VALUE e Number.MIN_VALUE_, basta executa-los no console do seu navegador.\n\n#### NaN (Not a Number - Não é um número)\n\nO NaN é utilizado para representar o resultado de uma tentativa de operação numérica, mas que não é um número.\n\n**Exemplo:**\n\n```javascript\nnum1 = 2 * \"string\"; // NaN\nnum2 = 2 - \"string\"; // NaN\nnum1 = 2 / \"String\"; // NaN\nnum2 = 0 / 0; //NaN\n```\n\n#### NaN não é igual a NaN\n\n```javascript\nNaN == NaN; //Falso\n```\n\nIsso acontece, pois o NaN é o resultado de uma operação que não “faz sentido”, logo o resultado de uma operação “sem sentido” não é igual ao resultado de outra operação “sem sentido”.\n\n#### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Numeros-em-forma-de-strings \"Números em forma de strings:\")Números em forma de strings:\n\nO JS faz conversão de tipos e em todos os casos que existir duas ou mais strings contendo números ele vai tentar fazer a conversão antes da operação.\n\n\\\n**Exemplo:**\n\n```javascript\nnum1 = \"10\" - \"10\"; // 0\nnum2 = \"10\" * \"10\"; // 100\nnum1 = \"10\" / \"10\"; // 1\nnum2 = \"10\" + \"10\"; // '1010'\n```\n\nApenas no caso do sinal de + que a conversão não acontece, pois quando existe uma string esse sinal é utilizado para concatenação.\n\n#### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Declarando-numeros \"Declarando números\")Declarando números\n\nNúmeros podem ser declarados de duas formas, da forma literal ou na forma de objetos.\\\n**Forma literal: var num = 10**\\\n**Forma de objeto: var num = new Number(10)**\n\nAparentemente, ambas as formas resultam em um número, porém elas tem tipos diferentes. Com a forma literal nós temos um tipo number e com a forma de objetos nós temos um tipo object.\n\n**Exemplo:**\n\n```javascript\nvar num1 = 2;\nvar num2 = new Number(2);\ntypeof num1; // number\ntypeof num2; // object\n```\n\nSe compararmos num1 a num2 teremos o seguinte resultado.\n\n```javascript\nnum1 == num2; // verdadeiro, pois só verificamos o valor\nnum1 === num2; // falso, pois possuem o mesmo valor, mas são de tipos diferentes\n```\n\nTambém temos um problema ao comparar dois números criados em forma de objetos, pois a comparação entre dois objetos sempre retorna falso.\n\n```javascript\nvar num1 = new Number(2);\nvar num2 = new Number(2);\nnum1 == num2; // falso\n```\n\nO recomendado é criar números da forma literal, pois eles são do tipo number e possuem a execução mais veloz.\n\n### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#String \"String\")String\n\nString é um tipo de dado, imutável, do JS que pode ser usado para armazenar e manipular caracteres e textos, podendo conter 0 ou mais caracteres.\n\nUma string pode ser declarada das seguintes formas:\n\n```javascript\nvar nome = \"Cristiano\";\nvar nome = String(\"Cristiano\");\nvar nome = new String(\"Cristiano\");\n```\n\nAs strings podem ser declaradas com aspas “string” ou apóstrofos(aspas simples) ‘string’, porém não podemos iniciar com um tipo e terminar com outro.\n\n```javascript\n//Errado\nvar nome = \"string';\n```\n\nPodemos também utilizar aspas ou apóstrofos dentro de uma string. Quando precisamos usar aspas dentro da string nós declaramos a mesma com apóstrofos e vice e versa.\n\n```javascript\nvar frase = 'Segundo fulano: \"A frase é boa\"';\n```\n\nExiste outra forma de utilizar aspas dentro de uma string, que é através do escape de caracteres com a (barra).\n\n**Alguns escapes:**\n\n```javascript\nvar nome = \"Cris\\\"\"; // \\\" (Cris\")\nvar nome = \"Cris\\'\"; // \\' (Cris')\nvar nome = \"Cris\\\\\"; // \\\\ (Cris\\\\)\nvar nome = \"Cri\\ns\"; // \\n (Cr\nis)\nvar nome = \"Cris\\ts\"; // \\t (Cri\t\ts)\n```\n\n#### Juntar strings (Concatenar)\n\nO ato de juntar duas strings é o que chamamos de concatenação, uma das formas de fazer isso é através do uso do sinal de +.\n\n**Exemplo:**\n\n```javascript\nvar nome = \"Cristiano\";\nvar sobrenome = \"Gonçalves\";\nnome + sobrenome; // CristianoGonçalves\nnome + \"Estudante\"; // CristianoEstudante\n```\n\nO resultado ficou junto porque espaço em branco também é um caractere.\n\n```javascript\nnome + \" \" + sobrenome; //Cristiano Gonçalves\n```\n\nAlgumas operações matemáticas podem ser feitas durante a concatenação:\n\n**Exemplo:**\n\n```javascript\nnome + 2 + 2 + sobrenome; // Cristiano22Gonçalves\n```\n\nPara obtermos a soma antes de concatenar poderíamos utilizar os parênteses\n\n```javascript\nnome + (2 + 2) + nome; // Cristiano4Gonçalves\n```\n\n#### Strings como objetos\n\nDeclarar strings em forma objetos pode nos dá problemos assim como declarar números em forma de objetos, pois o valor será uma string e o tipo será um objeto, logo podemos ter algumas complicações.\n\n**Exemplo:**\n\n```javascript\nvar nome = new String('Cris').\nvar nome2 = 'Cris';\n\nnome == nome2; // Verdadeiro\nnome === nome2; // Falso\n```\n\nUma alternativa é converter um objeto string em uma string utilizando o método `valueOf()`\n\n```javascript\nnome === nome2.valueOf(); // Verdadeiro\ntypeof nome2; // Object\ntypeof nome2.valueOf(); // String\n```\n\nComo uma string é imutável, ela continua sendo um objeto, e apenas nessa instrução é que conseguimos extrair um tipo string através de um objeto.\n\n```javascript\ntypeof nome2; // Object\n```\n\nA única forma de mudar uma string é atribuindo seu valor novamente.\n\n```javascript\nnome2 = nome2.valueOf();\ntypeof nome2; // String\n```\n\n#### API String\n\nExiste a [API](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String) da string onde podemos fazer diversas operações com uma string, como:\n\n```javascript\nnome.length; //Verificar seu tamanho\nnome.charAt(1); //Encontrar um caractere em uma determinada posição\nnome.indexOf(\"i\"); //Encontrar a posição de um caractere\n```\n\n### Boolean\n\nEsse é um tipo de dado lógico que pode assumir dois valores, true e false (verdadeiro e falso). Ele pode aparecer de diversas formas, uma das mais comuns é quando fazemos alguma operação de comparação.\n\n**Exemplo:**\n\n```javascript\n4 > 1; // (4 é maior que 1) Verdadeiro\n4 == 2; //(4 é igual a 2) Falso\n```\n\nPodemos verificar o valor lógico de alguns dados utilizando o !!. Essa dupla exclamação quer dizer que estamos negando algo duas vezes, logo acessamos o seu valor lógico. Isso quer dizer que, se temos uma sentenssa verdadeira e a negamos (invertemos seu valor lógico), passamos a ter uma sentenssa falso, agora se nergarmos outra vez vamos ter algo verdadeiro novamente.\n\n**Exemplo:**\n\n```javascript\nvar num1 = true; //Verdadeiro\nnum1 = !num1; //Antes era verdadeiro e agora é Falso\nnum1 = !num1; //Antes era Falso e agora é verdadeiro novamente\n\n//Essa é uma forma simplificada de realizar a mesma operação feita anteriormente\nvar num1 = true; //Verdadeiro\nnum1 = !!num1; //Verdadeiro\n\n//Esses são alguns valores falsos do JS. Outros valores falsos podem ser criados com comparações.\nvar num1 = !!false; //Falso é falso\nvar num1 = !!\"\"; //String vazia é falso\nvar num1 = !!0; //Zero é falso\nvar num1 = !!null; //Null é falso\nvar num1 = !!undefined; //Undefined é falso\nvar num1 = !!NaN; //NaN é falso\n```\n\nUma aplicação: Vamos supor que presisamos executar um código caso um determinado número seja diferente de zero. O comum seria verificar se o número é diferente de zero, porém podemos passar apenas o número como parâmetro para o if. E se o número for zero, ele tem o valor falso,e sabemos que o if só executa sentessas verdadeiras. Veja o código.\n\n```javascript\n// Esse seria a primeira coisa que pensariamos em fazer.\nIf(num != 0) {\n console.log('Zero é falso, por isso essa instrução não será executada');\n\n}\n\n// Essa é uma forma em que usamos do poder da linguagem e diminuimos um pouco a escrita.\n\nIf(num) {\n console.log('Instrução executada, se o número não for zero, pois qualquer número diferente de zero tem um valor verdadeiro.');\n\n}\n```\n\n### Object\n\nOs objetos são um tipo de dado do JS que nos permite armazenar diversos tipos de dados em uma única variável.\\\nPor exemplo, se temos que realizar o cadastro de uma pessoa e pegar nome, idade e sexo. Poderíamos criar uma variável para cada um dos dados. Porém podemos simplificar esse processo criando apenas o objeto pessoa.\n\n**Exemplo:**\n\n```javascript\nvar pessoa = { nome: \"Cristiano\", idade: 22, sexo: \"M\" };\nvar pessoa = new Object();\n```\n\nOs objetos são compostos por uma chave, dois pontos e logo depois o valor para essa chave. Cada chave-valor é separada por uma vírgula.\n\nPodemos acessar as propriedades de cada objeto de várias maneiras.\n\n```javascript\npessoa.nome; // Cristiano\npessoa[\"nome\"]; // Cristiano\n```\n\nEssa segunda forma é utilizada para dados dinâmicos ou compostos, como “cor dos olhos”\n\nTambém podemos acessar as propriedades através de um loop.\n\n```javascript\nfor (var item in pessoa) {\n console.log(pessoa[item]);\n //Cris\n}\n```\n\nÉ possível adicionar propriedades depois que o objeto for criado.\n\n```javascript\npessoa.bairro = \"Barreiro\";\npessoa[\"cidade\"] = \"Alagoinhas\";\n```\n\nOu podemos deletar\n\n```javascript\ndelete pessoa.idade;\n```\n\n> Obs: As chaves de um objeto podem receber todos os tipos de valores, inclusive outros objetos e funções.\n\n**Exemplo:**\n\n```javascript\nvar meuObjeto = {\n numeros: [1, 2, 3, 4],\n outrosObjetos: { objetoUm: \"Um\", objetoDois: 2 },\n funcao: function () {\n return \"Item de um objeto\";\n },\n};\n```\n\n### Function\n\nUma função é um bloco de código que executa comandos dentro dos {}\n\nExistem duas formas básicas de criar uma função.\n\nA function declaration:\n\n```javascript\nfunction soma(a, b) {\n return a + b;\n}\n```\n\nE a function expression\n\n```javascript\nvar soma = function soma(a, b) {\n return a + b;\n};\n// Ou\nvar soma = function (a, b) {\n return a + b;\n};\n```\n\nA principal diferença entre as duas formas é que com a function declaration podemos invocar a função antes mesmo de declarar, pois o JS carrega as funções antes de interpretar o documento.\n\n```javascript\n// Isso é possível\nsoma();\n\nfunction soma(a, b) {\n return a + b;\n}\n\n// Isso não é possível\nsoma();\n\nvar soma = function (a, b) {\n return a + b;\n};\n```\n\nAs funções do JS são de primeira classe, isso quer dizer que elas podem ser atribuídas a variáveis, ser passadas como parâmetros e podem ser retornadas por outras funções.\n\n```javascript\n// Uma passagem de argumentos comum.\nsoma(1, 2);\n\nfunction ola() {\n return \"ola\";\n}\n\n// Uma passagem de funções como argumentos.\nsoma(ola);\n```\n\n### Undefined\n\nBasicamente, undefined é um tipo de dado que carrega o valor undefined, quer quer dizer indefinido.\\\nUndefined também é uma propriedade do objeto global do javascript e carrega o valor de undefined. Porém ele não é uma palavra reservada, isso quer dizer que até podemos usa-la para identificar variáveis, desde que não seja no escopo global.\n\nUm exemplo simples de como podemos receber um valor undefined é quando declaramos uma variável, mas não a iniciamos.\n\n```javascript\nvar um;\ntypeof um; //undefined\n```\n\n### Null e undefined são a mesma coisa?\n\nApesar da expressão null == undefined retornar true, os dois tem significados diferentes.\\\nO undefined quer dizer que um valor ainda não foi definido, já o null quer dizer que o valor de algo é nulo. Vale lembrar que undefined é do tipo undefined, enquanto null é do tipo object.\n\n### [](https://crisgon.github.io/posts/Tipos-de-dados-Javascript/#Finalizando \"Finalizando\")Finalizando\n\nEsse foi um post com o resumo do que entendi até agora sobre os tipos primitivos do JS, provavelmente algo não foi bem explicado e ficou confuso, se isso aconteceu só deixar um comentário pra que eu possa estudar mais e tentar explicar melhor.\n\nMinhas referências foram:\\\n[Canal do Rodrigo Branas](https://www.youtube.com/watch?v=093dIOCNeIc&list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc&index=1)\\\n[W3school](https://w3schools.com/)\\\n[Documentação da Mozila](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.\n"},{"@type":"BlogPosting","headline":"Minha jornada criando 30 sites em 30 dias","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":913,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-02-23-minha-jornada-criando-30-sites-em-30-dias","datePublished":"2018-01-18 12:49:00","dateModified":"2018-01-18 12:49:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nQuem nunca achou uma vaga maneira e pensou em enviar um currículo, mas desistiu por não ter o que mostrar? E quantas vezes alegamos que não tivemos oportunidade de trabalhar com a tecnologia X ou Y?\n\nMuitas vezes damos a desculpa de não ter um portfólio por nunca ter trabalhado, algumas pessoas até alegam que não constroem projetos fictícios por falta de ideias. Pois bem, que bom que temos uma comunidade maravilhosa que está sempre disposta a criar formas de ajudar.\n\nNesse post eu vou contar um pouco sobre minha jornada com o desafio [30 Days 30 Sites](https://www.subscribepage.com/30days30sites).\n\n> Infelizmente o projeto que enviava os temas por email foi descontinuado, mas você pode conferir a lista com os temas [aqui](https://gist.github.com/crisgon/99b22f349944dc6b4b3c330d185b9ef1).\n\n![30 dias 30 sites](/assets/img/30days30sites.png \"30 dias 30 sites\")\n\n### Aceitando o desafio\n\nTudo começou quando descobri a hashtag #100DaysOfCode no twitter, fui navegando de post em post até que cheguei na hashtag #30Days30Sites e descobri esse projeto magnífico, que consiste em enviar um email por dia durante 30 dias com um tema e uma página de exemplo. Depois disso é só colocar a mão na massa e desenvolver.\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Novas-tecnologias \"Novas tecnologias\")Novas tecnologias\n\nUm dos pontos fortes desse desafio é a liberdade que é dada para o participante, pois ele nos entrega apenas um tema e deixa todo o resto a nosso critério, essa é uma boa forma de experimentar diversas tecnologias e isso vai nos permitir adquirir um conhecimento prático, coisa que não conseguimos apenas lendo um livro ou fazendo um curso.\nDurante a minha trajetória eu pude trabalhar na prática durante grande parte do desafio com PUG, SASS, GULP e Mobile First. A possibilidade de trabalhar com Mobile First em mais de 20 projetos me deu uma bagagem considerável sobre desenvolvimento responsivo, coisa que antes eu não tinha segurança para desenvolver e sempre ficava buscando algum framework para todas as ocasiões.\nNa reta final eu ainda tive a oportunidade de usar o CSS Grid e consegui bons resultados ao utiliza-lo.\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Trabalhando-com-temas-que-gosto \"Trabalhando com temas que gosto\")Trabalhando com temas que gosto\n\n![Site 26: Jogo do Star Wars](/assets/img/starwars.png \"Site 26: Jogo do Star Wars\")\n\nComo havia dito anteriormente, o desafio nos possibilita liberdade para construir aquilo que desejamos. Graças a isso pude construir sites de temas que gosto e isso dá uma certa motivação para continuar.\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Nem-tudo-sao-flores%E2%80%A6 \"Nem tudo são flores…\")Nem tudo são flores…\n\nO desafio propõe a criação de 30 sites em 30 dias, entretanto nem sempre é possível concluir durante o prazo. Sempre aparecem complicações que acabam atrapalhando o processo, porém não desanime e siga em frente.\nEu iniciei minha jornada no fim do semestre da faculdade, ou seja, fiz algo muito arriscado… Sempre precisava estudar para alguma prova ou fazer algum trabalho, e isso acabava comprometendo meu progresso com a criação dos sites. Fiquei alguns dias sem codar e teve momentos em que eu tirava 1 ou 2 horas para fazer um site, verificando todos os sites da para perceber quais foram feito nessa situação.\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Recebendo-e-dando-feedbacks \"Recebendo e dando feedbacks\")Recebendo e dando feedbacks\n\n~~Todo mundo precisa de um site~~ Todo mundo precisa de um feedback! Essa é uma das partes mais importantes do desafio, pois é com ela que encontramos a possibilidade de melhorar e até mesmo forças para continuar. Mas esteja preparado para receber criticas construtivas sobre o seu trabalho, também esteja preparado para não se inflar de orgulho quando receber elogios. Com os feedbacks também temos a oportunidade de conhecer novas pessoas e contribuir com o crescimento delas.\n\nOs feedbacks em geral são dados no Twitter ou por meio do grupo do facebook, onde você simplesmente compartilha seu trabalho e recebe opiniões sobre ele.\n\n![Feedbacks no facebook](/assets/img/feedbacks.png \"Feedbacks no facebook\")\n\nDurante os feedbacks, provavelmente você vai precisar explicar como fez determinada parte do site ou como utilizar determinada tecnologia. Isso é muito bom, pois é explicando que se aprende!\n\nComo eu disse logo ali em cima, “Todo mundo precisa de um feedback!”. Outras pessoas também estão fazendo o desafio e você não só pode, mas DEVE, dar feedbacks sobre os trabalhos, seja dando dicas de como melhorar ou simplesmente tirando dúvidas.\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Alguns-trabalhos \"Alguns trabalhos\")Alguns trabalhos\n\nOs temas que recebemos diariamente são bastante diversificados e nos dão a possibilidade de construir sites de vários tipos. Esses são alguns dos que mais curti o resultado.\n\n- [Blog](https://crisgon.github.io/30Days30Sites/blog/index.html)\n- [Celebridade](https://crisgon.github.io/30Days30Sites/celebrity/default.html)\n- [Evento](https://crisgon.github.io/30Days30Sites/events/default.html)\n- [Shop](https://crisgon.github.io/30Days30Sites/fashion/index.html)\n- [Game](https://crisgon.github.io/30Days30Sites/game/src/index.html)\n\nVocê pode conferir todos os trabalhos [aqui](https://crisgon.github.io/30Days30Sites/projects/index.html), onde eu listo as tecnologias que usei em cada site. E pode verificar os códigos no meu [github](https://github.com/crisgon/30Days30Sites).\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Outros-dailys \"Outros dailys\")Outros dailys\n\nEsse não é o único desafio, existem diversos outros e alguns deles estão listados nesse [repositório](https://github.com/AlexsandroSA/daily-programming-challenges), da uma olhada que provavelmente vai ter um que se encaixe no que você precisa.\n\nAtualmente eu estou fazendo mais um daily, o dailycssimages. Em breve vou fazer um post sobre ele, mas se quiser ver um pouco dos resultados é só olhar no meu [codepen](https://codepen.io/collection/DjydKR/).\n\n### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#Conclusao \"Conclusão\")Conclusão\n\nConcluir essa jornada não vai me garantir um emprego, mas me garantiu muito conhecimento e crescimento. É claro que os projetos não foram feitos da melhor forma possível e ainda tenho muito a melhorar, mas o importante do desafio é o comprometimento e a busca continua por melhorias.\nNessa caminhada**o que realmente importa não é o resultado final, mas sim o processo**. A conclusão desse desafio não mostra apenas que sou capaz de construir sites, ela mostra o comprometimento e a vontade de crescimento.\n\n#### [](https://crisgon.github.io/posts/Minha-jornada-criando-30-sites-em-30-dias/#E-voce-O-que-esta-esperando-para-se-desafiar \"E você? O que está esperando para se desafiar?\")E você? O que está esperando para se desafiar?\n\nObrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso inicie um desafio.\n"},{"@type":"BlogPosting","headline":"Todo dia um blog diferente","image":null,"editor":"Cristiano Gonçalves","genre":"Frontend Development","keywords":"frontend javascript typescript react css carreira","wordCount":574,"publisher":{"@type":"Organization","name":"Cristiano Gonçalves"},"url":"https://www.cristiano.dev/blog/2018-02-24-todo-dia-um-blog-diferente","datePublished":"2018-01-17 11:41:00","dateModified":"2018-01-17 11:41:00","author":{"@type":"Person","name":"Cristiano Gonçalves"},"description":null,"articleBody":"\nNo momento em que vivemos, não é tão difícil encontrar artigos sobre tecnologia, em especial sobre desenvolvimento. Basta dar uma pesquisada no google~~(bing, yahoo, duck duck go ou seja lá qual buscador você use)~~que vamos nos deparar com artigos dos mais diversos assuntos, sejam escritos em blogs pessoais ou até mesmo em uma plataforma como o [medium](https://medium.com/).\n\n![Notebook ao lado de um bloco de notas](/assets/img/wallpaperblog.jpg)\n\n### Mas se já existe tantos blogs, por que criar mais um?\n\nEu poderia fazer uma lista imensa com os motivos para você criar um blog ainda hoje, porém seria algo bastante cansativo e pode ser que nem todos os motivos se encaixassem na sua realidade. Então eu decidi listar os motivos que **me levaram a criar um blog**.\n\n- A possibilidade de fazer algo pela comunidade\n- Aprender mais ensinando mais\n- Documentar o aprendizado\n\n### [](https://crisgon.github.io/posts/Todo-dia-um-blog-diferente/#A-possibilidade-de-fazer-algo-pela-comunidade \"A possibilidade de fazer algo pela comunidade\")A possibilidade de fazer algo pela comunidade\n\nVocê já parou para pensar sobre a quantidade de conteúdo que consumimos de graça todos os dias? Por meio de cursos, tutoriais, podcasts, repositórios no github, grupos no facebook e até mesmo por meio de ferramentas como o [VS Code](https://github.com/Microsoft/vscode), editor que estou usando no momento.\n\nEscrever em um blog é uma das formas de retribuir tudo que a comunidade fez, e ainda faz, por você. Dessa forma você estará contribuindo com o aprendizado de outras pessoas, que futuramente poderão fazer o mesmo e continuar esse ciclo.\n\n### [](https://crisgon.github.io/posts/Todo-dia-um-blog-diferente/#Aprender-mais-ensinando-mais \"Aprender mais ensinando mais\")Aprender mais ensinando mais\n\nMuitas vezes estudamos um determinado assunto, mas não conseguimos assimilá-lo tão bem, gerando um certo desconforto emocional. Isso pode ser revertido escrevendo para a comunidade, pois quando vamos ensinar algo nós precisamos encontrar formas de passar o conteúdo de maneira clara e descomplicada, e isso só pode ser feito quando se tem um bom domínio do assunto.\n\nProvavelmente você já deve ter feito isso, de maneira involuntária, ao tentar explicar aquele conceito para um amigo com pouco ou nenhum conhecimento sobre o assunto.\n\nSe você ficou interessado, existe uma técnica chamada[“Técnica de Feyman”](https://www.youtube.com/watch?v=CN_SCpGuJ_w) que aborda exatamente essa forma de estudo.\n\n![Técnica Feyman](/assets/img/tecnicadefeyman.jpg \"Técnica Feyman\")\n\n### Documentar o aprendizado\n\nEsse é um ponto crucial para iniciantes como eu, pois com um blog estamos criando uma documentação pessoal da nossa evolução enquanto desenvolvedor. Essa mesma documentação também vai servir para tirar dúvidas futuramente.\n\n### [](https://crisgon.github.io/posts/Todo-dia-um-blog-diferente/#Bonus \"Bônus\")Bônus\n\nVocê deve ter pensado em criar um blog, mas logo depois deve ter pensado que não valia a pena, pois não tem conhecimento suficiente para isso. **ERRADO**! No inicio do aprendizado parece que só temos coisas bobas para compartilhar e chegamos a pensar que isso não vai ter relevância para a comunidade, mas sabe aquela conceito que você demorou pra aprender e agora já domina e consegue até dar exemplos que simplificam o entendimento? Será que coisas desse tipo não são relevantes?\n\nOutros motivos que me levaram a criar um blog foram: a possibilidade de ter um diferencial (não tão diferente assim ) na hora de me aventurar nas entrevistas que estão por vir e a honra de poder receber feedbacks para meu cresimento como profissional.\n\nNão sei se esses motivos que apresentei foram o suficiente para te fazer pensar em criar um blog, por isso vou deixar dois posts de gente grande que foram fonte de inspiração para criação do meu blog.\\\n[Devolva para as comunidades](https://woliveiras.com.br/posts/Devolva-para-as-comunidades/) do William Oliverira.\\\n[É 2017 e você deveria ter um blog](http://gabsferreira.com/e-2017-e-voce-deveria-ter-um-blog/) do Gabriel Ferreira\n\nObrigado por ler até aqui!! Esse é meu primeiro post, deixa ai um feedback pra que eu possa melhorar. :D\n"}]}

Cristiano Gonçalves

Front End Developer

Um baiano entusiasta por compartilhar conhecimento.