DEV Community: Letícia Pegoraro Garcez

[pt-BR] Hugo: Criando sua primeira aplicação

Letícia Pegoraro Garcez — Sun, 26 May 2024 14:25:12 +0000

No artigo anterior dessa série, falei um pouco sobre o que me levou a conhecer o Hugo, o que essa ferramenta é e algumas de suas features. Agora, quero mostrar como você pode criar sua primeira aplicação usando esse framework, e o quão fácil é fazer isso.

Configuração de ambiente

O primeiro passo para criar uma aplicação com o Hugo é, obviamente, ter o Hugo instalado. Para fazer isso, você pode visitar o site oficial do Hugo (gohugo.io), e acessar a sessão de downloads. Lá, você verá instruções específicas para a instalação desse framework no seu sistema operacional, seja ele Windows, MacOS ou alguma distribuição Linux.

Depois de fazer o processo de instalação descrito na documentação da ferramenta, você pode rodar o comando hugo --version no seu terminal, e se o resultado for uma versão do Hugo, isso significa que a instalação foi um sucesso.

⚙️ Criando o projeto

Vamos agora fazer a criação de um projeto com o Hugo e colocá-lo para rodar. Nessa etapa, vamos usar o terminal e quem usa Windows, precisa se atentar para um aviso da documentação do Hugo, que fala que os comandos a seguir devem ser rodados no PowerShell ou em um terminal Linux, como WSL ou Git Bash.

Dito isso, podemos fazer a criação do nosso site, ou seja, do nosso projeto Hugo. Para isso, basta rodar o comando hugo new site novo-site, onde novo-site é o nome que você quer dar ao projeto. O processo de criação de um projeto Hugo criará uma pasta com o nome novo-site com alguns arquivos de configuração do projeto que abordarei com mais detalhes no próximo tópico.

📁 Estrutura de pastas

Agora que já criamos o projeto, vamos entender como é a estrutura de pastas de projeto Hugo, e o que ela representa. Uma estrutura de pastas do Hugo se parece com a imagem abaixo:

E aqui está um breve resumo do que cada uma delas representa:

archetypes: Pasta onde definimos modelos que serão usados para a criação de conteúdos dentro do site.
content: Pasta que armazena o conteúdo do seu site.
data: Armazena arquivos que podem ser usados para injetar conteúdo dinâmico na aplicação.
themes: Pasta onde os temas da sua aplicação são armazenados. Esses temas são responsáveis pela formatação visual da sua aplicação.
layouts: Essa pasta contém modelos de partes do layout do página que irão sobrescrever os modelos existentes no tema. Se você tiver um tema instalado, não precisa se preocupar com essa página, a menos que você queira alterar algum dos arquivos de configuração do tema.
static: Arquivos estáticos que ficarão disponíveis para o site, como imagens.
config.toml ou hugo.toml: O arquivo de configuração do Hugo, onde são definidos parâmetros e variáveis da aplicação e também do tema.

🖌️ Inserindo um tema

Temas são conjuntos de arquivos que definem toda a estrutura visual do site. Existem vários temas diferentes para propósitos diferentes que você pode escolher colocar na sua aplicação. Uma lista completa desses temas pode ser acessada clicando aqui.

Para adicionar um tema na aplicação, precisaremos criar uma pasta dentro de themes para armazenar o tema, que comumente é nomeada com o mesmo nome do tema. Após criada essa pasta, basta adicionar dentro dela o conteúdo do repositório do GitHub que contém esse tema, que normalmente é acessível a partir do botão de Download na página do tema. Esse processo pode ser feito manualmente, mas utilizarei uma outra abordagem com os submódulos do Git.

Dentro do Git, um submódulo é um repositório adicionado dentro de outro, e meu objetivo aqui é adicionar o repositório do tema como submódulo ao meu site. Para isso, preciso fazer com que meu site seja um repositório do Git, o que pode ser feito com o comando git init e depois adicionar como submódulo o tema do projeto.

Para esse exemplo, utilizarei o tema flat*, e para adicioná-lo como submódulo, basta rodar o comando git submodule add https://github.com/leafee98/hugo-theme-flat.git themes/flat. Esse comando vai adicionar o repositório do tema como um submódulo no repositório atual, armazenando-o dentro da pasta themes/flat.

Depois de adicionar o tema do projeto (seja usando Git, ou não), é preciso adicionar o tema no arquivo de configuração. Para isso, adicione uma linha de texto com o código theme = 'flat' no arquivo hugo.toml e pronto, seu tema já estará aplicado. Vale lembrar aqui que o nome que será associado ao tema, deve ser o mesmo nome da pasta onde o tema foi salvo dentro de layouts.

Com isso, terminamos a configuração básica do projeto. Agora as coisas começam a ficar divertidas.

🗒️ Adicionando conteúdo

Para adicionar conteúdo no site, você deve digitar o comando hugo new content nome-conteudo.extensao. O nome do conteúdo pode ser qualquer coisa, já a extensão deve ser algo como md ou html. Eu criarei um arquivo chamado teste com o comando hugo new content teste.md.

Esse comando irá criar um novo arquivo de conteúdo na pasta content, que possuirá algumas linhas já preenchidas, como as mostradas abaixo:

+++
title = 'Teste'
date = 2024-05-26T10:13:13-03:00
draft = true
+++

Essas linhas têm alguns metadados que são referentes ao conteúdo que você acabou de criar, como o título (que é derivado do nome do arquivo), a data de criação, e se a página é um rascunho ou não. Por padrão, páginas marcadas como rascunho não são renderizadas pelo servidor, a menos que ele seja iniciado com uma flag para sinalizar isso.

Essas linhas de configuração são chamadas de front matter e são definidas dentro do arquivo archetype/default.md, que é um arquivo com a estrutura padrão do front matter para arquivos do tipo markdown. Isso quer dizer que sempre que você criar um novo arquivo markdown, ele usará por padrão a estrutura definida em archetype/default. Você pode criar diferentes archetypes para servirem de modelo para diferentes tipos de páginas, mas para isso será preciso estudar um pouco mais a fundo como esses arquivos são estruturados. Por enquanto, o modelo padrão será o suficiente.

Agora que já temos o arquivo, podemos adicionar qualquer texto markdown após o front matter, e trocar o valor de draft para false. O meu arquivo ficou assim:

+++
title = 'Teste'
date = 2024-05-26T10:13:13-03:00
draft = false
+++

## Teste

Eu sou um teste

Depois disso, basta iniciar o servidor com hugo serve e sua aplicação já estará disponível. Porém, ao acessar a URL indicada no servidor, localhost:1313, você verá o tema, mas não a sua página de teste.

Isso acontece porque o diretório content equivale ao / da sua aplicação, e se você quiser acessar a página teste que está dentro de content, o caminho correto no navegador seria /teste, e de fato acessando essa url você consegue ver o conteúdo que definiu:

Prontinho, agora você acaba de criar a uma primeira página dentro de um site Hugo. Fácil, não é? Eu poderia terminar esse artigo por aqui, mas ainda existem algumas particularidades relacionadas ao tema que são extremamente importantes.

🎨 O que eu ainda não te contei sobre temas

Anteriormente eu falei que um tema o Hugo é responsável pelo aspecto visual da sua aplicação. Isso é verdade, mas eu acabei não mencionando que um tema também é responsável por alguns aspectos funcionais da sua aplicação. Se olharmos o catálogo de temas do Hugo, veremos que muitos deles são feitos para um tipo de aplicação específica, como o tema que escolhi para esse exemplo, é um tema de blog. Nesses casos, o tema já contém funcionalidades específicas para um blog, como um menu de categorias e tags e a possibilidade de exibir os últimos posts.

Cada tema tem particularidades específicas que podem estar relacionadas ao seu funcionamento, a sua estrutura de arquivos e até mesmo às possibilidades de personalização que podem ser feitas. Por isso, sempre recomendo que você dê uma olhada na documentação do tema que você escolheu para ter uma noção maior das possibilidades e eventuais regras internas que o tema tem.

Dito isso, vamos começar a estruturar melhor a nossa aplicação para parecer um blog. Para isso, vou criar dentro de content uma pasta posts com alguns posts. Para isso, vou usar os comandos hugo new content posts/post1.mde hugo new content posts/post2.md. Aqui é importante dizer que eu não preciso criar a pasta posts manualmente, já que ela será criada automaticamente pelo Hugo.

Cada um dos posts foi inicializado com um front matter igual ao do arquivo teste.md que criamos anteriormente, e aqui eu irei fazer algumas modificações extras, então além de trocar a propriedade draft para false também adicionarei algumas tags e uma categoria ao arquivo já que essas são propriedades que o meu tema especificamente usa para criar comportamentos de busca. Os posts ficarão mais ou menos assim:

+++
title = 'Post1'
date = 2024-05-26T10:41:33-03:00
draft = false
tags = [
    "tag1", "tag2", "tag3"
]
categories = [
    "categoria1"
]
+++

## Post1

Primeiro Post

Mantive mais ou menos a mesma estrutura para o post2, fazendo uma pequena alteração na categoria. Agora, essas páginas estarão acessíveis a partir de localhost:1313/posts/post1 e localhost:1313/posts/post2 respectivamente, porém não iremos acessá-las ainda, já que quero fazer uma configuração específica do tema para já mostrar esses posts na página inicial. Para isso, irei até o meu arquivo hugo.toml e adicionarei o seguinte código:

[params]
mainSections = ['posts']

Esse código é referente a uma configuração específica do tema, que trará o conteúdo da pasta posts para uma sessão principal na página inicial. E aproveitando que já estou mexendo no arquivo de configuração, também irei alterar o título da aplicação para "Meu Blog" e a língua para "pt-br". Esse arquivo ficará mais ou menos assim:

languageCode = 'pt-br'
title = 'Meu Blog'
theme= 'flat'

[params]
mainSections = ['posts']

Depois disso, basta acessar a página principal da aplicação e pronto. Nosso blog já está disponível e não só mostrando os posts, mas também listando as categorias e tags que adicionei nos arquivos.

⌛ Considerações finais

Nesse artigo mostrei como você pode criar um site utilizando Hugo. O processo em si é bem tranquilo e espero que você tenha conseguido acompanhá-lo. Também falei aqui sobre os temas do Hugo, e quero ressaltar a importância de entender o tema que você está utilizando na sua aplicação, pois entendendo bem o funcionamento do tema, você poderá tirar um proveito muito maior da estrutura e funcionalidades que já disponíveis na aplicação.

Té mais! 🧑‍💻

[pt-BR] Hugo: a forma mais rápida de fazer um site

Letícia Pegoraro Garcez — Sun, 18 Feb 2024 02:43:29 +0000

No ano passado, eu me propus um desafio: montar uma oficina que envolvia programação e desenvolver uma aplicação para servir como material de apoio para essa oficina. A ideia é que os participantes da oficina pudessem utilizar essa aplicação para ver algumas explicações sobre o exemplo que seria apresentando, mas principalmente, copiar o código de cada exemplo.

Isso me pareceu uma ótima ideia, afinal a oficina não era introdutória, e as pessoas participantes deveriam ter conhecimento prévio, mas eu fiz uma escolha muito errada: resolvi implementar essa aplicação na mão, usando meus frameworks de desenvolvimento web e criando componentes do zero. Isso foi errado por vários motivos, e talvez eu até escreva um artigo específico sobre isso por aqui.

Confesso que a aplicação não ficou muito boa, mas funcionou bem o suficiente para que eu começasse a planejar uma segunda versão, e é nessa segunda versão que o personagem principal do nosso artigo entra: o Hugo, que não é um programador sênior disposto a dar dicas de programação, mas sim um framework para geração de sites estáticos que tem despertado a minha curiosidade.

🤔 O que é o Hugo?

O Hugo é uma ferramenta desenvolvida utilizando a linguagem Golang, também conhecida como Go, para a criação de sites estáticos, que são sites cujo conteúdo não muda, ou seja, é fixo. Em outras palavras, o conteúdo do site é definido durante o desenvolvimento e só pode ser alterado mudando o código.

Isso pode até parecer uma abordagem meio ultrapassada considerando a popularidade de sites dinâmicos, que apresentam conteúdos diferentes para cada usuário, mas ainda existem muitos casos onde essa abordagem se encaixa perfeitamente, como blogs, portifólios, e é claro, a aplicação que eu queria criar para minha oficina.

🤔 Por que usar o Hugo?

Como Dev frontend, confesso que no início tive uma certa resistência com relação ao Hugo, afinal, se eu queria criar um site, iria criar o MEU site, com o MEU código e mostrar as MINHAS habilidades. Essa foi a ideia na primeira versão, e era também a ideia na segunda. Até eu perceber o tempo que estava gastando para implementar coisas muito simples, com o intuito de deixá-las perfeitas. Então, achei o Hugo e resolvi dar uma chance a ele. Em outras palavras, cansei de reinventar a roda.

Fazendo uma pesquisa rápida, você consegue encontrar uma série de vantagens que o Hugo promove com relação à implementação de sites "na mão", e a principal delas é a velocidade de compilação. Quando falamos de desenvolvimento de sites que necessitam de frameworks, por exemplo, acabamos enfrentando muitas vezes um tempo longo de compilação da aplicação. Com o Hugo, a compilação foi quase instantânea. Fiquei bem impressionada com a velocidade da ferramenta, especialmente quando comparamos com o Next.js, que era o framework que estava usando na primeira versão.

Além disso, você também encontra outros pontos positivos para a utilização do Hugo, sendo um deles a velocidade de desenvolvimento, já que o Hugo já apresenta uma estrutura pronta para uso, o que permite que sua aplicação esteja funcionando em questão de minutos.

Outros pontos positivos dizem respeito à manutenção do site que se torna extremamente simples considerando que muitas páginas, no fim das contas, são apenas arquivos Markdown, o que é outro ponto que para o meu caso, foi extremamente positivo, afinal eu gostaria de escrever um pouco de texto e um pouco de código nessa aplicação.

No fim das contas, na minha experiência, o Hugo permite a criação de sites de uma maneira extremamente rápida, especialmente se comparado com outros frameworks que já tive contato, e a implementação e manutenção desses sites também é muito simples.

Mudando poucas linhas de código em um arquivo de configuração, por exemplo, você consegue alterar totalmente a interface da sua aplicação, o que nunca vi ser feito de uma forma tão rápida e sem riscos de efeitos colaterais na interface da aplicação.

🤔 Como se desenvolve uma aplicação com Hugo?

Para desenvolver uma aplicação com Hugo, é preciso fazer o download da ferramenta, criar um projeto, baixar um tema e começar a criar o conteúdo do seu site. O processo padrão são esses três passos mesmo, mas é claro que outros passos podem ser adicionados conforme a necessidade.

Um conceito muito importante que precisamos ter em mente quando falamos do Hugo, é o conceito de Tema, que nada mais é do que uma implementação de um layout completo que pode ser importado para sua aplicação com poucas linhas de código.

Depois de aplicar um tema ao seu site, você pode definir algumas configurações, ou parâmetros do tema no arquivo de configuração do site para fazer com que ele se modifique para atender as suas necessidades, ou então pode editar o tema manualmente, o que requer um entendimento mais profundo de como o Hugo funciona.

Muitos temas podem ser encontrados na galeria do Hugo, que pode ser acessada clicando aqui.É muito importante salientar que cada tema tem suas peculiaridades e possibilidades de personalização específicas, então é sempre importante ler a documentação do tema escolhido para ter mais informações acerca dos benefícios e das possibilidades que cada um tem.

Com relação ao conteúdo da aplicação, toda aplicação Hugo possui uma pasta chamada content onde o conteúdo do site, ou as páginas do site, são armazenadas. Um novo conteúdo pode ser adicionado facilmente através do terminal e são majoritariamente arquivos Markdown. O Hugo também aceita arquivos HTML que eu costumo utilizar para casos específicos onde quero adicionar algum código JavaScript na aplicação.

Cada arquivo de conteúdo do Hugo contém um cabeçalho com alguns metadados que o Hugo usa para renderizar a página. Esse cabeçalho é chamado de Front Matter, caso você queira pesquisar mais sobre o assunto. Eventualmente, algumas alterações precisam ser feitas nesses metadados, mas não vou entrar em detalhes disso agora.

Também é importante dizer aqui que o Hugo utiliza uma organização específica para os arquivos, havendo uma pasta para os conteúdos, outra para layouts, outra para temas, outra para arquivos estáticos, etc., o que acaba gerando uma certa familiaridade conforme utilizamos mais com a ferramenta.

⌛ Considerações finais

Nesse artigo, busquei trazer um pouco da motivação que me levou a ir atrás do Hugo, e algumas características dessa ferramenta que acho que podem ser muito úteis para algumas pessoas desenvolvedoras, assim como foi pra mim.

Acho que ficou perceptível ao longo do artigo o quão encantada eu estou por essa tecnologia, mas e você, querida pessoa que terminou de ler esse artigo? Já conhecia o Hugo? Já o usou em algum projeto? Como foi a sua experiência? Quais pontos positivos, ou negativos, você enxerga nessa ferramenta? Deixe aqui nos comentários!

Té mais. 🧑‍💻

[pt-BR] REDAMEs DO GITHUB: IDEIAS... E DICAS

Letícia Pegoraro Garcez — Wed, 02 Jun 2021 03:40:35 +0000

Olá pessoas! Estou meio sumida, mas continuo viva, a quem interessar hehe.

Neste artigo, quero conversar com você, pessoa desenvolvedora, pessoa curiosa de tecnologia, pessoa que por ventura do destino está lendo este artigo, sobre algo muito importante para seus repositórios que ficam armazenados em alguma plataforma com controle de versão. Algo que muitas vezes não recebe a atenção que deveria, o README do seu projeto.

Porque eu preciso de um README?

Se você não trabalha com desenvolvimento profissionalmente, pode até estar pensando "mas eu só uso o github pra guardar meus códigos mesmo, ninguém acessa meus projetos", mas ai é que temos um grande problema.

A documentação de um projeto nem sempre é algo "feito para os outros". Claro que muitas vezes a documentação é feita para ajudar outras pessoas a interagir com o seu projeto, mas uma boa documentação ajuda você a interagir com seu próprio projeto também. Seja agora, ou no futuro. Caso você já tenha revisitado um projeto antigo, sabe do que eu estou falando. Quem nunca abriu um projeto e não fez a mínima ideia do que estava acontecendo, não é mesmo? Você com certeza ficou olhando aquele projeto e pensando porque não escreveu ao menos pra que aquele código servia.

Além desse problema óbvio, imagine que você tem um projeto que pode solucionar perfeitamente o problema de um colega, e quando ele abre seu projeto, tudo que esse colega vê são vários arquivos e pastas aparentemente sem muita relação lógica. Divertido, não é? Bom, ainda não é um problema muito grande, porque você tem contato com o colega, mas... E se for você que abre um projeto apenas com arquivos e pastas na tela, mas você não tem contato de quem criou aquele código?

Bom, com esse problema exposto, vamos embarcar na aventura de criar um README interessante para o seu projeto. Para nortear essa parte da documentação, quero que você se faça a seguinte pergunta para quem é este README?

Se você está desenvolvendo algo para você mesmo no futuro, pode tentar uma abordagem mais simples. Se está fazendo um projeto que apresentará como portifólio para uma entrevista de emprego talvez você queira manter uma clareza e detalhamento maior. Se seu projeto é um tipo de software que você quer que as pessoas baixem e usem seu foco vai ser mais nas funcionalidades do projeto. Se seu projeto é algo que tem grandes chances de ser replicado pela comunidade talvez você queira explicar como o projeto funciona e o que você tem que saber para modificá-lo. Tudo depende do "público alvo" do seu projeto, e do direcionamento que você quer dar para ele.

Vale a pena lembrar que eu não sou nenhuma expecialista em READMEs (inclusive, alguns dos meus projetos antigos estão sem README), mas tenho me preocupado bastante com isso ultimamente. Já que meus READMEs tem sido bastante elogiados, resolvi compartilhar um pouco sobre como faço essas documentações. Então vamos à uma lista com alguns tópicos que você pode considerar quando estiver escrevendo o README do seu projeto.

Tópicos para você escrever sobre:

O que é este projeto?

Uma pergunta simples e rápida. O que é essa coisa que você desenvolveu? Qual o objetivo dela? É preferível que você informe para quem estiver lendo seu README o que seu projeto é, do que forçar essa pessoa a olhar vários arquivos de códigos (que muitas vezes não são de fácil entendimento) para descobrir.

O que esse projeto faz?

Neste tópico, você pode fazer uma descrição breve do seu projeto, sem muitos pormenores. A ideia é que quem entre no projeto já saiba o que ele faz. Se você estiver navegando por repositórios antigos procurando algum projeto específico, a existência desse item no seu README pode fazer toda a diferença entre encontrar o que você procura rápido, ou não.

Como este projeto funciona?

Mesmo que o seu repositório seja privado, nada impede que você o torne público um dia, e ai outras pessoas vão querer rodar seu código. Além disso, é bem provável que o seu eu do futuro não vai estar mais usando o mesmo computador nas mesmas condições que você está usando hoje. Talvez tenha formatado o computador e falte alguma coisa essêncial para o funcionamento do seu programa, então é uma boa ideia lembrar o seu eu do futuro como rodar sua aplicação.

Eu, por exemplo, já tentei rodar uma aplicação Java em um computador que tinha sido formatado e não tinha o Java instalado. É uma boa ideia também especificar comandos para verificar se as suas dependências existem ou não na máquina de quem estiver tentando rodar sua aplicação (ou adicionar um arquivo com essas informações), e principalmente, quais comandos você precisa para seu projeto rodar. São dois cliques em um executável? Um comando específico no terminal? Alguma execução em um plugin de uma IDE específica?

Como utilizar este projeto?

Talvez este tópico soe um pouco redundante com o tópico acima, mas nesta parte do seu README, você deve se concentrar em dizer para a pessoa que quer interagir com seu projeto como interagir com o programa depois que ele foi aberto.

Supondo que o seu projeto seja uma ferramenta de linha de código, como você vai interagir com seu projeto? Quais comandos fazem o quê? E se for algo com interface gráfica, como você pode realizar uma tarefa específica com esta aplicação? Nem sempre nossas criações são intuitivas para outros usuários como são para a gente, então este tópico em especial pode ser merecedor da sua atenção.

Como este projeto foi implementado?

Exponha as tecnologias que você utilizou para desenvolver o projeto. Se seu projeto está sendo desenvolvido para uma entrevista de emprego, você já consegue mostrar ao avaliador o que você sabe, e se outro usuário for interagir com seu projeto, ele já sabe o que precisa entender para compreender a totalidade da aplicação. Se quiser pode expecificar para que e porquê usou cada uma e explicar brevemente como implementou o projeto.

Como contribuir com este projeto?

Se o seu projeto for de uma lista de vagas ou contatos, por exemplo, talvez você queira considerar um pequeno tutorial de como alguém deve formatar suas contribuições, e talvez até incluir um link para um tutorial de como fazer pull request, ou deixar algum tipo de contato para que alguém interaja com você de maneira mais direta.

Deixando seu README atrativo

Bom, seu README agora contém várias informações úteis e relevantes para qualquer pessoa que queira interagir com seu projeto. MAAAASSSSS isso não é tudo. Existem várias outras coisas que podemos adicionar em um arquivo README para que você possa fazer uma pessoa que nunca viu seu projeto antes de apaixonar por ele, e sejamos justos, todo mundo quer estrelinhas no Github.

Imagens

Você tem imagens do seu projeto? Se sim, escolha algumas imagens bonitas do seu projeto, ou imagens que mostrem as funcionalidades que você implementou. Imagens que representem como você quer que seja a primeira impressão do usuário que está chegando no seu projeto pela primeira vez. Nos meus projetos de hardware, por exemplo, costumo colocar fotos da engenhoca funcionando, nos projetos web, prints do site.

Não tem nenhuma imagem relacionada ao projeto? Que tal desenvolver alguma coisa no Canva para dar uma certa personalidade ao seu projeto? Esse site oferece uma infinidade de designs bonitos para você modificar e fazer coisas lindas (a capa desde post, inclusive, foi feita no Canva). Acredite, se eu consigo fazer coisas bonitas com o Canva, você também consegue! Um banner com o título do seu projeto e uma breve descrição, por exemplo, deixa seu projeto com um aspecto muito mais interessante do que simplesmente vários parágrafos.

Uma coisa importante pra se falar aqui, é sobre o tamanho da imagem. É preferível que você edite o tamanho da sua imagem para diminuir o espaço que ela ocupa. Além de que imagens mais leves carregam mais rápido, não é muito interessante ocupar o espaço do seu GitHub com imagens. Eu costumo deixar uma pasta com algumas imagens nos meus projetos de hardware, apenas para que a pessoa que se interessou possa ver o projeto sobre outros ângulos (nesses casos, deixo informado no README que mais imagens do projeto se encontram em determinada pasta), sem precisar abrir nenhum link externo.

Mostre seu projeto funcionando

Se você tem como disponibilizar algum link para seu projeto funcionando, isso é ótimo. Geralmente para projetos web, uma página hospedada no GitHubPages ou algo hospedado no Heroku já podem mostrar à pessoa que está chegando no seu projeto como ele é lindo e maravilhoso.

Caso o seu projeto não seja um projeto web, talvez fosse legal você considerar algum tipo de documentação em vídeo, como por exemplo um vídeo curto do projeto funcionando. Você pode hospedar esses vídeos no youtube como não listado, por exemplo. Eu não recomendo de jeito nenhum que você armazene vídeos dentro do projeto. Vídeos ocupam um espaço desnecessário no seu repositório, e para assistí-los a pessoa precisa fazer o download do vídeo. Hospedar o seu vídeo em algum lugar da internet facilita o acesso dessa pessoa ao seu conteúdo.

Referências e links úteis

Adicione algumas referências que foram importantes para o desenvolvimento do seu projeto. Isso facilita não só se você precisar acessar aquele conteúdo novamente no futuro, mas dá muito mais recursos para a pessoa aleatória que está acessando seu repositório entender como as coisas funcionam.

Tem algum artigo que te explicou um conceito importante? Coloca o link. Usou uma paleta de cores específica? Coloca o link. Tem um vídeo que explica tudo que você precisava fazer? Coloca o link. Uma sessão de links úteis deixa o seu projeto muito mais fácil de ser entendido, replicado, e também ajuda muitas pessoas que podem ter interesse no seu projeto a aprender mais e entender melhor como as coisas funcionam.

Personalize seu README

Seu README não precisa ser apenas texto, e existem duas coisas que eu gosto muito para deixar meus READMEs mais dinâmicos: Badges (ou Shields) e Emojis.

Começando pelas bagdes, se você não conhece o Shields.io, clica no link e dá uma olhada. É um site que fornece diversos tipos de bagdes para você inserir nos seus READMEs, com diversos estilos diferentes. Se você tem um produto mais profissional no GitHub, inserir algumas destas badges fazem toda a diferença.

Além desse site, você também pode encontrar alguns badges legais nesse post do usuário Envoy-VC. Se tiver paciência, também pode adicionar icones do site simpleicons.com, porém eu acho essa útlima opção um pouco mais chata de ser incluida nos READMEs.

Já quando o assunto é Emojis, você pode visitar este repositório, onde você pode encontrar vários emojis, para decorar seu README da maneira que achar melhor.

Por um mundo com mais READMEs!

Espero que este artigo tenha te motivado, ainda que só um pouquinho a repensar os READMEs do seu projeto. E para finalizar este artigo, só quero deixar um tema para vocês pessoinhas que falam inglês, que é o o artigo da Ellaine Tolentino sobre mostrar o seu estilo no README do Github. Esse artigo, inclusive, foi o que me inspirou a (tentar) fazer READMEs bonitinhos para os meus projetos.

Então... Espero que esse artigo tenha sido útil de alguma forma, e se você tem mais dicas sobre READMEs, pode comentar que eu adoraria construir um diálogo em cima disso com as pessoas maravilhosas dessa comunidade!

Até a próxima!

[PT-BR] Variáveis no Javascript: var, let e const em cinco minutos.

Letícia Pegoraro Garcez — Mon, 29 Mar 2021 17:35:16 +0000

Olá pessoinhas! Espero que vocês estejam bem. Já faz algum tempo que eu estou estudando Javascript, e se você tem acompanhado meus artigos, você já sabe disso. Como eu prometi pra mim mesma que deveria escrever sobre alguns tópicos antes de avançar meus estudos, vou tentar abordar da maneira mais rápida, simples e didatica possível a declaração de variáveis no Javascript, e como o título já diz, espero que este artigo seja uma leitura de no máximo cinco minutos. Vamos nessa então.

O que são variáveis?

Variáveis são espaços de memória dentro do computador que vão armazenar quaisquer tipos de valores que a gente queira guardar neles. Você pode pensar em variáveis como caixinhas com tampa transparente (essa parte da tampa é importante pra analogia), onde podemos guardar qualquer coisa dentro. Como o Javascript não trabalha com tipagem de variáveis, é bem isso que acontece mesmo.

Uma coisa muito importante, é que as variáveis não precisam ter valores fixos, sendo que é muito simples "trocar o conteudo da caixinha", ou variar seu valor. Então, vamos à criação das nossas "caixinhas"

const

A palavra-chave const serve para criar váriáveis que não variam. Ou seja, constantes. Seguindo com a analogia das caixas, é como se eu criasse a minha caixinha, colocasse algo lá dentro (como por exemplo meu nome), colocasse um cadeado nessa caixa, e jogasse a chave fora. Como a minha caixa tem uma tampa transparente eu consigo ver o que tenho dentro da caixinha (acessar seu conteúdo), mas não consigo abrir a caixinha e modificar o que está dentro dela.

Um exemplo de declaração de constante é:

const nome = "Letícia";
const idade = 20;

Logo, eu tenho o valor Letícia armazenado em uma constante chamada nome, e o valor 20 armazenado em uma constante chamada idade. Estes valores são imutáveis.

var e let

Estas duas palavras-chaves servem para criar variáveis que podem variar, ou seja, caixinhas onde podemos mexer sem nenhuma restrição no seu conteúdo.

var é uma diretiva um pouco mais antiga, e tem caído em desuso, porém ainda é funcional. Já let, é a sua substituta. Qualquer uma dessas palavras-chave pode ser utilizada para delcarar variáveis, veja o exemplo:

var nome = "Leticia";
let idade = 20;

Como no exemplo anterior, temos duas variáveis (cujos valores agora podemos alterar) chamadas nome e idade.

Qual a diferença entre var e let?

Se você acha que estas duas palavras-chave são iguais, você está enganado. Apesar de fazerem a mesma coisa, elas possuem uma diferença essêncial: o escopo onde existem.

Se você não tem muito contato com programação, vou simplificar o conceito de escopo pra você: é TUDO que está entre um { e um }.

Quando criamos uma variável com var, ela existe dentro do escopo da função onde ela foi criada. Já uma variável declarada com let, existe apenas dentro do escopo onde ela foi criada (pode ser um if, um for, ou só um { e } aleatório). Veja o código abaixo:

var bananas = 5;
let abacaxis = 5;
if(bananas <10){
   var faltamBananas = 10 - bananas;
}
if(abacaxis <10){
   let faltamAbacaxis = 10 - abacaxis;
}
console.log(`Faltam ${faltamBananas} bananas para 10 bananas
e ${faltamAbacaxis} abacaxis para 10 abacaxis.`);

Existe um problema neste código, mas vamos avaliar ele um pouco. Primeiro temos a declaração de duas variáveis, uma com let e outra com var. Essas variáveis estão disponíveis em todo o escopo do programa? Sim. Primeiro porque a variável bananas atua sobre o escopo da função, e como não temos nenhuma função especificada, ela atua no contexto global. O mesmo acontece com a variável abacaxis, já que não temos nenhum escopo especificado.

Agora é que as coisas ficam interessantes. Veja a variável faltamBananas, que está declarada dentro de uma estrutura if. Essa variável vai estar disponível para o console.log()? Sim, já que ela está declarada na mesma "função" que o if, que é o contexto global de execução.

E a variável faltamAbacaxis? Bom, ela existe somente dentro do escopo em que ela foi declarada, o escopo de um if, ou seja, entre o { e o } referentes ao if. Portanto, essa variável deixa de existir fora desse escopo. Logo, não será possível acessar essa variável no console.log().

Uma coisa interessante com relação a isso, é que podemos criar "zonas de variáveis" no nosso código usando let e criando um escopo no código (com isso eu quero dizer colocar um { e um } em algum lugar do código). Por exemplo:

let abacaxis = 3;
{
let uvas = 4;
let limoes = 8;
var laranjas = 10;
}
console.log(abacaxis,uvas,limoes,laranjas);

Lembrando: variáveis declaradas com let só existem dentro do escopo em que foram delcadaras. Esse código só será capaz de imprimir as variáveis abacaxis, porque esta variável está no mesmo escopo da função console.log() e laranjas, porque a variável laranjas está declarada com var, portanto sua existência diz respeito à função que ela se encontra, não ao escopo. Já as variáveis uvas e limoes deixam de existir assim que o escopo é fechado, e por isso não podem ser acessadas fora deste escopo.

E então, o que você achou? E o mais importante, conseguiu entender esses conceitos em cinco minutos? hahaha. Espero poder ter ajudado, e até a próxima!

Laços de repetição em Javascript

Letícia Pegoraro Garcez — Tue, 23 Mar 2021 00:44:05 +0000

Laços (loops) de repetição são estruturas essênciais em praticamente todo algoritmo, e ter um bom domínio dessas estruturas é obrigatório para qualquer pessoa programadora.

Ultimamente, nos meus estudos de Javascript, descobri que esta linguagem não possui somente os laços de repetição comuns. Isso quer dizer que for,while e do-while não são a única maneira de iterar sobre estruturas iteráveis e realizar repetições. E como já venho fazendo, se eu encontro algo interessante, resolvo escrever sobre.

Então, hoje vamos falar um pouco sobre os cinco tipos básicos de laços de repetição e sobre um método de objetos iteráveis que eu achei muito interessante. Vamos nessa!

For

Se você programa com certeza já conhece o laço for. Sua estrutura padrão é:

for(INICIALIZAÇÃO;CONDIÇÃO_DE_CONTINUIDADE;ALTERAÇÃO_DA_VARIAVEL_DE_CONTROLE){
    codigo
}

Este tipo de laço geralmente é usado quando você quer uma quantidade finita e conhecida de repetições, embora ele também possa atuar como laço infinito se você mantiver a condição de continuidade ou a alteração de variável em branco.

Para usar esse laço, você precisa de uma variável para armazenar um valor que será testado a cada iteração do loop pela condição de continuidade. Essa variável pode ser delcarada dentro ou fora da inicialização do loop, porém é obrigatório que na inicialização do loop um valor seja atribuido a essa variável.

A condição de contuidade é geralmente uma condição relacional elaborada com a variável de controle, e enquanto esta condição for verdadeira, a variável é alterada de acordo com a especificação do usuário e o laço continua suas iterações. No momento em que esta condição é falsa, se sai do laço.

Por fim temos a parte da alteração da variável de controle, que pode ser tanto um incremento quanto um decremento a parte de incremento nada mais é do que a alteração da variável de controle.

While

O laço while também não é uma surpresa para pessoas que já possuem algum conhecimento de programação em outra linguagem. Sua estrutura padrão é:

while(CONDIÇÃO_DE_CONTINUIDADE){
    codigo
}

Este tipo de laço geralmente é usado quando você não sabe a quantidade total de repetições que precisará iterar o código. É usual que a estrutura while seja usada para ler um input do usuário, por exemplo, e continuar repetindo enquanto um valor determinado (como "x" para fechar a aplicação), não seja lido.

Esta estrutura também funciona com uma variável de controle que precisa ser criada fora do escopo do loop e incrementada dentro do escopo do mesmo, sendo que a condição de continuidade está também relacionada a esta variável de controle.

Vale lembrar também que é comum dizer que o laço while possui de 0 a infinitas repetições, porque a condição de continuidade é sempre testada antes da execução do código, e se supormos que ela já não é atendida na primeira execução, o laço é terminado antes mesmo de executar o código.

Do-while

O laço do-while também está presente em quase todas as linguagens de programação. Sua estrutura padrão é:

do{
    codigo
}while(CONDIÇÃO_DE_CONTINUIDADE);

Este tipo de laço também é usado quando você não sabe a quantidade total de repetições que precisará iterar o código, e assim como no while e no for, a condição de continuidade deve estar relacionada a uma variável de controle. Esta variável deve ser declarada fora do escopo da estrutura e incrementada dentro do escopo.

Vale lembrar também que é comum dizer que o laço do-while possui de 1 a infinitas repetições, porque a condição de continuidade é sempre testada ao final da execução do código, o que faz com que o código sempre seja executado ao menos uma vez, mesmo que a condição de continuidade seja falsa antes da entrada no loop.

For..in

Agora começamos a parte divertida que são as estruturas "extras" do Javascript. O for..in é uma estrutura de repetição especial para a iteração de objetos. Ela itera sobre as propriedades(atributos) de um objeto, na ordem em que se apresentam no código, e sua estrutura básica é:

for(ATRIBUTO in OBJETO){
    codigo
}

Atributo, neste caso, é uma variável que pode ser declarada dentro da chamada do laço ou fora, e objeto é o objeto sobre o qual queremos iterar. A utilização deste laço é bem simples, contanto que nos lembremos que um objeto é composto por vários membros, e que cada membro possui um nome e um valor.

Quando o laço começa, a variável atributo recebe o nome do primeiro membro encontrado dentro do objeto, na próxima iteração, o conteúdo da variável atributo é atualizado para o nome do segundo membro do objeto, e assim por diante enquanto houverem membros no objeto.

Para acessar os valores dos membros do objeto, é possível usar a notação de chaves, de modo que um código como o apresentado abaixo pode ser usado para imprimir todos os nomes e seus valores.

for(let att in obj){
    console.log(`O membro ${att} tem valor ${obj[att]}`);
}

É importante salientar que embora esta estrutura possa iterar sobre arrays, esta pratica não é recomendada. Para este tipo de estruturas de dados, existe uma estrutura muito similar, o for..of que veremos em seguida.

For..of

Se você entendeu como o for..in funciona, a estrutura for..of é bastante similar, porém ao invés de objetos, ela itera sobre objetos iterativos (arrays, sets, mapas, entre outros).

for(VALOR of ITERÁVEL){
    codigo
}

valor, neste caso, é uma variável que pode ser declarada dentro da chamada do laço ou fora, e iterável é o objeto iterável (array, set ou mapa) sobre o qual queremos iterar.

Quando o laço começa, a variável valor recebe o valor do primeiro elemento do objeto iterável, na próxima iteração, o conteúdo da variável valor é atualizado para o valor do segundo elemento do objeto iterável, e assim por diante enquanto houverem elementos no objeto iterável.

E só para garantir que você sabe quais são os elementos dos objetos iteráveis:

Vetores: um único número/caracter/string ou qualquer outra coisa que ocupe uma posição do vetor
Sets: um único número/caracter/string ou qualquer outra coisa que ocupe uma posição do set
Mapas: único par [chave, valor]

Com este laço, por exemplo, não precisamos conhecer a quantidade de elementos de um vetor para imprimí-lo.

for(let valor of vetor){
    console.log(valor);
}

Apesar de este tipo de laço ser mais simples para imprimir o conteúdo de um objeto iterável, é importante lembrar que esta estrutura de repetição não guarda nenhum registro de qual posição do objeto iterável determinado valor ocupa, portanto é importante usá-lo com sabedoria.

forEach()

E para finalizar o artigo de hoje, trago a estrutura de repetição que mais me chamou a atenção do Javascript, o método forEach() existente tanto na classe Array quando na classe Map. Esse método executa uma função em cada elemento do array ou do mapa. Vejamos com alguns exemplos como estes métodos funcionam.

Array.forEach()

Primeiro, vamor criar um array simples, e imaginar uma função que queremos que atue sobre cada um dos elementos.

const vetor = [-3,-2,-1,0,1,2,3,4];

function imprimeDobroPositivo(num){
    if (num < 0){
        num = Math.abs(num);
    }
    num *= 2;
    console.log(num);
}

Bom, temos um vetor com números positivos e negativos, e uma função que vai transformar os números negativos em positivos, duplicar este valor e imprimir o valor duplicado.

Agora, vamos ao forEach(). Primeiro, temos que saber que ela é um método da classe array, então será chamada no estilo vetor.forEach(). Em segundo lugar, precisamos entender qual parâmetro passar para esta função. Nada mais do que a função que criamos anteriormente, mas sem os parênteses.

vetor.forEach(imprimeDobroPositivo);

A nossa callback function, a função que vamos chamar dentro do forEach() pode ter até três parâmetros, sendo que pelo menos um deles (o elemento atual) é obrigatório. Este parâmetro não é especificado na chamada da função, mas sim na sua declaração. Na delcaração da função imprimeDobroPositivo, temos um único parâmetro, que por padrão será associado ao elemento referente a iteração. Por isso, o código acima funciona.

Agora vamos falar sobre os outros dois parâmetros. Como precisamos alterar estes parâmetros na função de callback (no nosso caso imprimeDobroPositivo), bastaria adicionar mais dois parâmetros. Por padrão, o segundo parâmetro será o índice do elemento, e o terceiro o próprio array. Vamor criar um novo exemplo então:

vetor = [1,2,3]

function imprimeBonito(numero,i,arr){
//quando esta função for chamada, numero (primeiro parâmetro) fará
//referência ao elemento da iteração, i (segundo parâmetro) fará
//referência ao índice do elemento e arr (terceiro parâmetro) é o 
//próprio array.
console.log(`${numero} é o elemento na posição ${i} do vetor ${arr}`);
}

vetor.forEach(imprimeBonito);

O resultado deste trecho de código nada mais é do que:

1 é o elemento na posição 0 do vetor 1,2,3
2 é o elemento na posição 1 do vetor 1,2,3
3 é o elemento na posição 2 do vetor 1,2,3

Este tipo de iteração pode até não parecer grande coisa com os exemplos simples que utilizamos, mas se você precisar realizar grandes manipulações em elementos de arrays, com certeza o forEach() pode ser muito útil para você.

Map.forEach()

Se você entendeu como o Array.forEach() funciona, com certeza não vai ter problemas com este método. Assim como método anterior, este método é chamado no estilo map.forEach(função), e esta função também deve ter um parâmetro obrigatório (o valor do item da iteração), e pode ter como parâmetros opcionais a chave do elemento e o objeto map que está sendo iterado. Vamos criar um exemplo rápido com um mapa que armazenas pessoas e um id para essas pessoas.

pessoas = new Map ([[1,"Maria"],[2, "Antônio"],[3, "Angélica"]]);
function escreveNomeID(id, nome){
  console.log(`${id} tem o id ${nome}`);
}

pessoas.forEach(escreveNomeID);

Confesso que não tenho muita experiencia com mapas, então não consigo imaginar um exemplo realmete útil com a utilização desta estrutura de dados, porém vocês podem comentar neste post algum exemplo que achem interessante.

E com isso, eu finalizo este artigo sobre estruturas (e métodos) de repetição em Javascript. Espero que este conteúdo possa ter sido útil para alguma coisa, e até a próxima.

[PT-BR] Selecionando elementos HTML no Javascript

Letícia Pegoraro Garcez — Thu, 11 Mar 2021 00:33:56 +0000

Olá pessoas! Já fazem algumas semanas desde que criei meu perfil, meio que na empolgação, e seguindo a recomendação da Morganna, vou escrever sobre coisas que eu estou estudando e achando interessante. Uma dessas coisas, é a utilização dos métodos seletores do Javascript, que realmente me chamaram muita atenção. Então... Vamos nessa!

O que são seletores?

Seletores são métodos do objeto Document, que basicamente é a sua página web. Esses métodos permitem que você selecione algumas tags HTML (e seu conteúdo), permitindo depois que você manipule o conteúdo e propriedades dessas tags.
Acho que a melhor maneira de entender como isso funciona, é criando um código HTML para usarmos como exemplo.

<div id = "primeiro-conteudo" class = "conteudo">
  <ul class = "usuarios">
   <li class = "amigo">João</li>
   <li class = "inimigo">Fernanda</li>
   <li class = "amigo">Amanda</li>
  </ul>
</div>
<div id = "segundo-conteudo" class = "conteudo">
  <p id = "descricao">Estou descrevendo alguma coisa</p>
</div>
<div id = "terceiro-conteudo" class = "conteudo">
  <input type="text" name="opiniao" />
</div>
~~~
Esse código pode não fazer muito sentido ou seguir algum tipo de regra de escrita, mas o que importa neste exemplo é como as tags estão estruturadas (suas classes, seus ids, quais tags estão dentro de quais tags, etc.). Agora, vamos utilizar os métodos seletores para selecionar diferentes trechos desse código.

## document.getElementById()
Este método é o mais simples de todos, e retorna um elemento correspondente ao id passado como parâmetro (em formato string). Caso mais de um elemento possua o id passado como parâmetro, a função retorna o primeiro elemento encontrado.Veja o código abaixo.
~~~javascript
let desc = document.getElementById("descricao");
~~~
Esse comando cria uma variável chamada desc, e armazena dessa variável o elemento cujo id é igual ao id passado como parâmetro. Caso este id não exista dentro do código HTML, o retorno da função é `null`. Agora que o elemento foi armazenado em uma variável, vamor entender o conteúdo desta variável.
`desc` é uma variável que armazena um objeto, com diversas propriedades. Se imprimissimos esta variável no console, o resultado seria:
~~~html
<p id = "descricao">
~~~
No console do navegador é possível ver as propriedades deste elemento, mas existem duas que vou pontuas aqui:
*innerText: Texto de dentro da tag;
*innetHTML: HTML de dentro da tag;
Agora que conhecemos estas duas propriedades, podemos alterar ou mostrar o conteúdo.
~~~javascript
console.log(desc.innerText);//Imprime o texto no console
desc.innerText = "Uma nova descrição atualizada";//altera o conteúdo que está dentro da tag
~~~
Claro que diversas outras operações podem ser realizadas com o objeto selecionado, mas vamos focar só nestes dois atributos por enquanto.

## document.getElementsByClassName()
Se você entendeu como a função anterior funciona, esta aqui vai ser bem simples de entender. Como o próprio nome já diz, essa função vai retornar os elementos que possuem uma mesma classe passada como parâmetro em formato string. Todos os elementos que corresponde àquela classe. Enquanto a função anterior retorna um único elemento, esta função retorna uma HTMLCollection (uma coleção) de elementos, a não ser que o seletor não seja encontrado na página HTML, então o retorno `null`. No nosso código, temos alguns itens separados nas classes "amigo" e "inimigo". Vamos selecionar esses elementos.
~~~javascript
const amigos = document.getElementsByClassName("amigo");
const inimigos = document.getElementsByClassName("inimigo");
~~~
Agora te propronho um desafio. Se eu imprimisse o valor da variável inimigos, qual seria meu resultado?
Este seletor sempre vai retornar uma coleção com todos os elementos da mesma classe. Se eu tiver apenas um elemento com esta classe, ainda será uma coleção, mas com tamanho 1 (com um único elemento). Portanto o resultado dessa impressão seria:
~~~javascript
HTMLCollection { 0: li.inimigo, length:1}
~~~
Ou seja, um objeto do tipo HTMLCollection, que possui comprimento de 1 e possui um objeto `li.inimigo` na posição 0. Essa saída, é a padrão do `console.log()`, e caso quisessemos acessar as propriedades do único objeto presente nesta coleção, podemos acessar este objeto com a notação de colchetes, e depois acessar as propriedades do objeto.
~~~javascript
console.log(inimigos[0].innetText)
~~~
Agora que você já sabe disso, qual acha que seria o output da impressão da variável amigos?
Seria assim:
~~~javascript
HTMLCollection { 0: li.amigo, 1:li.amigo, length:2}
~~~
Para acessar os elementos da variável amigos, também deve-se usar a notação de colchetes e depois de selecionado o objeto, acessar seus atributos, como foi mostrado anteriormente.

## document.getElementsByTagName()
Esta função é bem similar à anterior, com a diferença que cria uma coleção selecionando TODAS as tags com o mesmo nome, por exemplo `p`, `div`, ou `li`(lembrando que este nome deve ser passado como string).
~~~javascript
let partesDoConteudo = document.getElementsByTagName("div");
~~~
Agora vou propor novamente um desafio. Volte no nosso código no início do artigo, e me diga qual será o conteúdo da variável partesDoConteudo (uma dica, é bem similar ao conteúdo do método getElementsByClassName()).
Resultado:
~~~javascript
HTMLCollection { 0: div#primeiro-conteudo.conteudo, 1: div#segundo-conteudo.conteudo, 2: div#terceiro-conteudo.conteudo, length: 3, … }
~~~
Todos os objetos com a classe `div` foram selecionados, tendo também seus ids especificados, embora estes ids tenham sido irrelevantes na seleção.
Assim como no método getElementsByClassName(), os objetos desta coleção devem ser acessados com a notação de colchetes, para que então você consiga acessar os atributos deste objeto. 
~~~javascript
partesDoConteudo[0].innerText;
partesDoConteudo[1].innerHTML;
~~~
Mesmo que haja apenas um elemento com esta classe

## document.getElementsByName()
Assim como os outros métodos que contém plural no nome, este método também retorna uma coleção HTML, selecionando os trechos de código pelo atributo `name` das tags HTML. (Reveja o código exemplo no início do artigo)
~~~javascript
let opiniaoUsuario = document.getElementsByName("opiniao");
~~~
Como só temos um elemento com o atributo `name` selecionado, quando tentarmos imprimir a variável opiniaoUsuario, teremos uma coleção com um único objeto, que assim como nos exemplos anteriores deve ser acessado com a notação de colchetes.

## document.querySelector()
Este método é relativamente novo no Javascript, e é muito interessante de se usar. Diferentemente dos outros métodos mostrados até agora, o querySelector não recebe um atributo de uma tag HTML como parâmetro, mas recebe o mesmo seletor que seria utilizado em CSS, no formato string. É importante lembrar que como no CSS, a utilização de "." para indicar classes e de "#" para indicar ids é obrigatória.
~~~javascript
let inicio = document.querySelector("#primeiro-conteudo");
let paragrafo = document.querySelector("p");
let textoOpiniao = document.querySelector(".conteudo#terceiro-conteudo input");
let conteudoTotal = document.querySelector(".conteudo");
~~~
Todas as sintaxes utilizadas no código acima são validas. Podemos utilizar o `querySelector()` para selecionar por id, por classe, por nome de tag ou por uma combinação destes elementos. Um ponto interessante do `querySelector()`, é que essa função só retorna o primeiro elemento encontrado que tem a mesma configuração do seletor passado como parâmetro. Por exemplo, a variável `conteudoTotal` só vai receber o primeiro elemento com a classe `conteudo`, no formato de um único elemento, não de uma coleção. Se quisermos obter todos os elementos que combinam com um mesmo seletor, devemos utilizar o próximo método da lista.

## document.querySelectorAll()
O querySelectorAll é bem similar ao método querySelector, e também utiliza os seletores do CSS, com a diferença de que retorna uma NodeList (lista de nodos) com todos os elementos que correspondem ao seletor criado. Podemos pensar na NodeList como se fosse um vetor, para facilitar o entendimento, e assim como nas coleções, podemos acessar os elementos através da notação de colchetes.
~~~javascript
let paragrafo = document.querySelectorAll("p");
let conteudoTotal = document.querySelectorAll(".conteudo");
~~~
Caso um único elemento bata com o seletor passado como parâmetro, o resultado será uma NodeList com apenas um elemento, caso contrário, mais elementos estarão dentro deste objeto.


## Considerações finais
É uma boa prática guardar o resultado de um seletor em uma variável, e apartir desta variável acessar os atributos ou métodos referente ao objeto selecionado, o que facilita a utilização do objeto selecionado dentro do código. 
Existem também várias maneiras de selecionar elementos, e como programador você deve escolher qual forma melhor se adapta à sua necessidade, sendo que várias dessas são possíveis.
Espero que este artigo possa ter ajudado, e boa sorte com seus códigos!