DEV Community: Flavia B

Git - Comandos iniciais que todo dev precisa saber

Flavia B — Sun, 02 Apr 2023 16:21:30 +0000

Git

Git é um software (por isso é preciso baixar na sua máquina) de sistema de controle de versões. Ele permite que você controle as alterações do seu código e crie versões diferentes do mesmo código, podendo voltar em versões anteriores se quiser. Além disso, permite que várias pessoas trabalhem em um mesmo projeto ao mesmo tempo, rastreando todas as alterações e ajudando a gerenciar conflitos.

Github

GitHub é uma plataforma de hospedagem de código que utiliza o Git como sistema de controle de versão. Ela permite que desenvolvedores e equipes compartilhem, colaborem e gerenciem projetos. Alguma coisa ficou confusa? Aqui tem um post explicando de forma mais simples o que é Git e Github.

Agora que já passamos e entendemos o que são os dois (e que são diferentes), vamos ver o que significa os comandos antes de ver os comandos em si:

Repositório
Um repositório é o local onde o seu código fica salvo, é onde você pode guardar todo o seu projeto. No nosso caso, o repositório é criado no github, mas você pode criar ele localmente (no seu computador) também.

Branch
Um branch é uma ramificação do seu repositório que permite que você trabalhe em novos recursos ou correções de bugs sem afetar o código existente. Se ficou confuso, imagine que você tem um código perfeito e funcional de uma página de login, mas você precisa fazer a validação do formulário (aquilo que confirma se o usuário digitou um e-mail válido e etc), ou seja, você vai precisa adicionar uma nova função no seu código. Masss o problema é: você está trabalhando com outras pessoas e não pode mexer na versão atual do seu código, já que ela está em produção/no site. Então, o que você faz? Cria uma branch, faz as alterações que precisa, manda para o seu colega de trabalho verificar se está correta e, se estiver, ele junta a versão que você acabou de criar com a versão original.

Push
O push é o ato de enviar suas alterações locais para o repositório remoto, ou no nosso caso para o repositório do github.

Commit
Um commit é uma alteração específica em um arquivo (ou em vários arquivos). Ele é uma maneira de registrar uma alteração, permitindo que você volte a essa versão mais tarde se necessário. Você trocou a cor do botão e implementou uma funcionalidade? Faça um commit para deixar registrado e poder voltar a essa versão caso haja um erro no futuro. É importante ressaltar que existem algumas práticas que você pode seguir na hora de fazer um commit, o momento certo de realizar um, o comentário que você deve fazer em cada commit e etc (mas essas coisinhas são simples e veremos depois).

Merge
O merge é a ação de mesclar alterações de um branch com outra.

Clone
Clonar é a ação de criar uma cópia local de um repositório remoto em sua máquina. Essa cópia é uma versão completa do repositório e inclui todos os arquivos, histórico de commits e branches do repositório remoto.

Fork
Um fork é uma cópia de um repositório do github para o seu um repositório do github. Isso permite que você faça alterações no código sem afetar o repositório original, enviando as alterações que você fez para a sua cópia.

Pull
O pull é a ação de buscar as atualizações do repositório remoto e mesclá-las com o seu repositório local.

Na prática

Lembrando que, como o git é um software, você precisa ter ele instalado na sua máquina para utilizar os comandos abaixo. Acesse o site oficial para baixar.

Inicia um repositório

git init

Cria uma nova branch com o nome especificado

git branch nome-do-branch

Muda para a branch especificada

git checkout nome-do-branch

"Avisa" que todas as alterações feitas estão prontas para serem enviados no próximo commit

git add nome-do-arquivo

"Avisa" que todas as alterações feitas em um arquivo específico estão prontas para serem enviados no próximo commit

git add .

Registra uma nova versão do código com a descrição especificada

git commit -m "Descrição das alterações feitas"

Envia as alterações para o repositório remoto

git push origin nome-do-branch

Mescla as alterações da branch atual com a branch especificada

git merge nome-do-branch

Clona um repositório. Cria uma cópia local do repositório especificado

git clone url-do-repositorio

Busca as atualizações da branch especificada no repositório remoto e mescla com o branch atual

git pull origin nome-do-branch

Busca as atualizações de todo o repositório remoto e mescla com o branch atual

git pull

Exibe com detalhes os últimos commits (com o nome do autor, data, mensagem do commit e o identificador/hash). Os commits mais recentes aparecem no topo da lista

git log

Exibe o estado atual do repositório mostrando quais arquivos foram modificados (mas ainda não commitados), quais arquivos foram adicionados para serem commitados e se há arquivos não rastreados pelo Git.

git status

Se você está vendo isso pela primeira vez (ou uma das primeiras) e acabou ficando confuso, TUDO BEM! Isso é perfeitamente normal. É hora de praticar um pouquinho e com o tempo vai ficando mais claro.

Gostaria de contribuir ou melhorar alguma coisa que foi citada? Deixe nos comentários <3

Git e Github para iniciantes: entendendo de forma simples

Flavia B — Fri, 24 Mar 2023 23:39:14 +0000

Se você é novo no mundo do desenvolvimento, provavelmente já ouviu falar de Git e Github. Essas ferramentas são essenciais para gerenciar código, colaborar com outras pessoas, registrar a sua evolução como desenvolvedor e mais! Só que, no começo a gente pode pensar que são as mesmas coisas e pode ser complicado entender como funciona. Neste artigo, vou explicar de forma simples essas ferramentas.

Github: a rede social

Github é uma plataforma de hospedagem de código que funciona como uma rede social. Seu objetivo é permitir a colaboração de desenvolvedores em projetos de software. Com o Github você pode criar repositórios (que por enquanto podemos chamar de pastas) que armazenam arquivos de um projeto. É possível criar quantos pastas (ou repositórios) que quiser e, se desejar, colocar as aplicações online. Muitos recrutadores usam essa rede social para ver quais projetos o candidato já fez.

Por exemplo, se você estiver criando um site com HTML e CSS, poderá enviá-lo para sua página no Github. Quando o recrutador abrir seu perfil, verá todos os projetos/códigos que você já fez e poderá avaliar suas habilidades. Além disso, você pode colaborar em projetos de outras pessoas, "puxar" alguns códigos para sua máquina e disponibilizar os seus.

Git: o versionador de códigos

Git é um versionador de códigos que você instala em sua máquina. Ele permite que você salve versões de um projeto e recupere-as facilmente quando necessário. Isso significa que você pode criar várias versões de um projeto, trabalhar em novas funcionalidades e voltar a uma versão anterior se algo der errado.

Mas o que é é versionador?

Vamos para um exemplo prático. Suponha que você esteja trabalhando em um site e, de repente, uma nova funcionalidade que você adicionou causa problemas em outras partes do site. Com o Git, você pode voltar facilmente à versão anterior do código onde tudo estava funcionando. Isso é versionar, ter várias verões do seu código. Isso é possível porque o Git armazena todas as alterações em "branches" (ramificações), permitindo que os desenvolvedores trabalhem em novas funcionalidades sem mexer no código original.

Agora você já sabe o que é Git e Github! Ambas as ferramentas são essenciais para qualquer desenvolvedor de software. Agora você pode instalar e criar uma conta no Github (a rede social) e caso não tenha, instalar o git. É importante já se aventurar um pouco nso dois. Crie pastas, entre em diretórios, volte e teste tudo. Vai sem medo, viu? Até a próxima.

HTML: Quando substituir divs genéricas por tags semânticas?

Flavia B — Wed, 15 Feb 2023 16:08:28 +0000

Quando estamos fazendo uma página Html sempre (sempre mesmo), bate uma dúvida, nem que seja por 2 segundos: “Usar uma div ou uma tag aqui?”

A gente sabe que o HTML é a base de qualquer página na web e entre os elementos mais usados estão as famosas <div> . Elas servem para agrupar diferentes partes do código. Só que nem só de <div> sobrevive uma página HTML. Por isso, é importante perceber em qual momento usar divs (genéricas) ou tags (semânticas).

Uma recomendação: Sempre utilize as tags semânticas, mas agora, se ficar em dúvida entre usar uma tag ou uma div e não tiver tempo para dar uma pesquisada, é bom optar pela div para não adicionar uma tag que não deveria estar ali (repassando isso que ouvi de um professor certa vez).

Mas antes, abaixo tem uma listinha de tags HTML semânticas que tem em praticamente todas as páginas.

<main>: É usada para definir o conteúdo principal da página. É importante não abusar do main e utilizar apenas um por página. O main é a tag que deve “guardar” todo o conteúdo principal.
<section> é usada para agrupar conteúdo relacionado e com um propósito comum. Por exemplo, você pode ter várias seções em uma página de um e-commerce, cada uma contendo produtos de uma categoria diferente.
<h1>, <h2>, <h3>, etc.: São usadas para definir títulos e subtítulos em seu conteúdo. Lembre-se que deve existir apenas um <h1> em cada página já que ele representa o título principal e sobre o que ela se trata.
<img>: É utilizado para inserir imagens no contúdo. É importante definir o atributo alt para descrever a imagem.
<article>: É usada para agrupar conteúdo autônomo, como uma postagem de blog ou notícia. Cada <article> deve ter seu próprio cabeçalho e conteúdo relacionado.
<aside>: É usada para conteúdo relacionado que está fora do fluxo principal de conteúdo. Por exemplo, uma barra lateral de navegação ou uma seção de anúncios.
<footer>: É usada para o rodapé de uma página ou seção. Normalmente tem informações como informações de contato, direitos autorais e links para redes sociais.

Agora sim! Nessa publicação vou comentar um pouco sobre momentos que ~~devemos~~ podemos trocar as <div> por outras tags HTML.

Não utilize SEMPRE a tag button

As vezes quando recebemos um design do Figma, por exemplo, ele já vem com todo o estilo de um botão, o que acaba nos levando a criar direto o elemento como um <button>. Porém, esse não é sempre o caso. Quando o "botão" é na verdade um link para outra página, devemos usar a tag <a> e então no style css estilizar para que fique como um botão.

Ficaria como no exemplo abaixo. Adicionamos apenas a classe "botao" à tag <a> e estilizamos no css.

<a href="#" class="botao">Clique aqui</a>

Mas então, quando usar o button? É recomendado para alguma ação, por exemplo:

Enviar formulário
Deletar
Fechar
Publicar
Editar
E outros...

Listas li ou divs?

É muito comum ficar em dúvida nessa, mas uma prática boa é pensar: Isso pode ser visto como uma lista? Se sim, utilize <li>.

Aqui vai um exemplo de listas:

~~lista de~~ comentários,
~~lista de~~ imagens,
~~lista de~~ feedbacks,
~~lista de~~ planos para compra…

Se a gente começar a ver elas como realmente são (listas) fica mais fácil. Porque olha, se pensarmos que temos uma área de feedbacks, vamos encher de divs com a imagem do usuário e o texto do comentário, mas se enxergamos ela como realmente é, uma área com uma LISTA DE FEEDBACKS, usaremos o li.

Usar a tag img ou background-image?

Quando se trata de imagens, temos basicamente duas opções:

1. utilizar <img>
2. estilizar um elemento com a propriedade CSS background-image.

A tag <img> deve ser utilizada quando a imagem faz parte do conteúdo, quando ela é importante para aquele contexto e sem ela, o texto não faria muito sentido. Por exemplo, uma foto de um artista se estivermos falando sobre ele.

Já a propriedade background-image deve ser utilizada quando a imagem é usada apenas para fins visuais, como em um fundo de seção, um ícone que tem apenas “valor visual” e etc.

Exemplo de uso de background-image:

Títulos e subtítulos

Os títulos e subtítulos são essenciais para estruturar o conteúdo da página e facilitar a leitura do usuário. No entanto, é importante lembrar que deve existir APENAS um <h1> na página e que os outros títulos devem ser utilizados como subtítulos, em ordem hierárquica. Por exemplo:

<h1>Título da página</h1>

<section>
    <h2>Seção 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

Na hora de criar um menu: troque o div por nav

Uma substituição comum é, ao invés de utilizar uma div para criar o seu menu, utilize um <nav>.

Além disso, ao invés de apenas usar o <a> para os links do menu, utilize uma lista (como já mencionado). A utilização de uma lista <li> para os links do menu deixa o código mais organizado e legível, além de possibilitar uma estilização fácil e consistente. E o mais importante: utilizar o <li> melhora a acessibilidade porque permite que os leitores de tela anunciem a lista de links e forneçam uma navegação mais clara.

Tag header para o cabeçalho

Outra substituição comum é a troca de uma <div> de cabeçalho por <header>.

O <header> é usado para representar a seção de cabeçalho, dentro dela podem ficar elementos como títulos, logos, menus, entre outros elementos que compõem a seção de cabeçalho.

Ao utilizar tags semânticas no HTML, além de deixar o código mais limpo, organizado e fácil de entender para outros desenvolvedores, eles ficam legível e mais “bem lidos” pelos “robôs” dos mecanismos de busca. E simmm, a maior: acessibilidade! E essas prática podem ajudar a melhorar a acessibilidade para pessoas com deficiências visuais, por exemplo, já que os leitores de tela conseguem entender melhor a estrutura do conteúdo.

Gostaria de contribuir ou melhorar alguma coisa que foi citada? Deixe nos comentários <3