Forem: José Lázaro

What the heck is a Closure?(SIMPLE JS DEFINITION)

José Lázaro — Thu, 09 Jan 2025 15:13:57 +0000

I remember my first job interview when the interviewer asked me to define Closure. It was a nightmare because I didn’t know the technical term. But deep inside, I had a feeling that I understood what it meant, even if I couldn’t explain it.

After the interview ended (spoiler: I wasn’t selected), I rushed to Google to read about closures. The first term I encountered was Lexical Scoping = _What?

Don't worry, Lexical Scoping is just a fancy term for something simple!

So let’s dive in and understand it step by step.

Lexical Scoping explained

Think of your house. Imagine you’re in your bedroom and want to turn on the bedroom lamp. You can only turn on the lamp that’s in the room you’re currently in. This is Lexical Scoping: you can only access and modify things (like the lamp) that are within your current context.

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

The functions turnOnBedroomLamp and turnOffBedroomLamp exist inside the bedroom context, so they can access and modify the bedroomLamp variable.

Now, imagine you’re in the kitchen and try to turn off the bedroom lamp. This won’t work because you’re in a different context, and the kitchen doesn’t have access to the bedroomLamp variable:

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

Very simple, right?

What’s the Relation Between Lexical Scoping and Closure?

Now let’s take it further. Imagine your house has a remote control that lets you turn on the bedroom lamp, no matter which room you’re in. This remote control "remembers" the bedroom lamp it controls, even if you're in the kitchen.

This "memory" is what a Closure is!

Here’s an example in code:

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

In this example:

The bedroom function creates a local variable bedroomLamp and a function turnOnBedroomLamp.

turnOnBedroomLamp remembers the context in which it was created (the bedroom function).

When we call remoteControl (the returned function), it still has access to the bedroomLamp variable, even though we’re now outside the bedroom function.

See? It is a very simple idea, is just Javascript remembering things so you can use in different places in different ways.

Now thinking in a real context of code, let's see how we can use closure in our days. The code below creates a function to add discounts in a product value.

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

Now you're aware about closure and prepared when some interview ask you the definition. For more content, check references section.

References

Closure - MDN Web Docks

Closure in JavaScript - GeeksForGeeks

Understand React and Virtual DOM (easy explanation)

José Lázaro — Mon, 06 Jan 2025 22:42:59 +0000

Every time we talk about React and its main benefits, we encounter the term Virtual DOM, a very cool feature that makes React an awesome option for building applications.

What DOM is?

Before understanding what the Virtual DOM is, let's first take a look at the REAL DOM.

DOM stands for Document Object Model. It is essentially a structure that represents all the elements in the HTML of a page.

Each element in this tree structure is a node. Nodes can have children, meaning each element can have its own subtree as well.

<div>
  <p>Some Text</p>
</div>

The example above shows a div node that has a p node as its child. The simplest way to explain what the DOM is: A tree structure representing the relationships between HTML elements.

In a traditional web application (think of older web pages you might have used), updating an element on the screen often meant reloading the entire page. This default approach could become cumbersome, especially in large applications with frequent updates.

The Virtual DOM provides a more efficient way to manage state and data in an application without needing to reload the entire page to apply changes.

How does it work?

React creates an in-memory representation of the real DOM called the Virtual DOM. This representation is constantly observed by React 👀.

Whenever the user interacts with the application, React compares the updated Virtual DOM with the previous version of the real DOM using a process called "Diffing."

If React detects a change, it identifies the exact node where the change occurred and updates only that part of the DOM. This avoids refreshing the entire page and results in a much smoother user experience. So smart!!!1

Some potential challengers

For highly dynamic applications, such as those with real-time updates (e.g., graphs or games), the Diffing process might become slow because React needs to evaluate every change. This can impact performance.

Furthermore, managing large lists can be a very big challenge if not handled properly. For example, when the state of a large list changes, React might need to reconcile many DOM updates, leading to laggy performance.

To mitigate this, React uses key properties in lists. These keys help React uniquely identify each item in the list and efficiently determine which items were added, removed, or updated.

Thats the basic you need to know about Virtual DOM. You can check more details in reference section or googling a little bit more. Feel free leave any questions in the comments. See you soon.

References

W3 explanation about DOM
React documentation about Virtual DOM
Free Code Camp Virtual DOM article

When to use rem, em, or pixels

José Lázaro — Mon, 16 Sep 2024 21:42:29 +0000

When we start studying web development, particularly the concepts of CSS and the use of measurement units, it’s normal to have some doubts about the three main units presented to us: px, rem, and em.

My doubts began when I started studying and creating components in ReactJS. It’s not always clear when to prefer one unit over another, so here is a brief explanation of each unit’s concept and the best time to use each.

What is the Px Dimension?

It’s important to clarify initially that the pixel we use in CSS is not exactly the same as the physical pixel. CSS defines what we can call a reference pixel, which measures the size of a pixel on a 96dpi screen. When we specify the pixel unit in a project, the agent using the value assigned will rescale it to its unit that corresponds to the reference pixel.

Moreover, the pixel is an absolute and non-scalable unit. Changing its value does not affect other absolute unit values; that is, the pixel value remains unchanged even after user settings.

What is rem?

Unlike pixels, rem is a scalable and relative unit. It varies according to the root dimension of your browser (by default, this unit is 16px), so 1rem = 16px most of the time. It can vary if the root font size is changed.

Below, you can see that the root font size in Chrome is set to 16px.

To convert pixels to rem, you can manually calculate it with a basic division:

To create an element with a size of 32px, divide 32px by 16px = 2rem. Alternatively, you can use ready-made applications for this conversion:

Here is a simple application I developed for converting px to rem or vice versa - Access here

The big question is, if rem is essentially a model that converts pixels to another scale, what’s the difference in the code? If the user doesn’t change their root font size, there is no difference since pixels and rem will have the same value. However, for those who change the root size for better accessibility, all elements sized in rem would change proportionally.

It’s important to remember that when zoom is used in a browser, pixels scale correctly, but user default settings’ unpredictability forces us to use methodologies that cover all configuration variations.

Small Tip on Using rem

We can use a small trick to simplify the use of rem and its conversion. It involves changing the font-size value of html to 62.5%, which equals 10px, and setting the body value back to 16px:

html {
  font-size: 62.5%; //10px
}

body {
  font-size: 1.6rem; //16px
}

This way, 1rem = 10px, making the conversion much simpler since you only need to divide the pixel value by 10 to get the rem value.

What is em?

The em is also a dynamic unit, but its reference is not the browser’s root value. According to w3Schools, em equals the calculated value of the font-size property of the element it is used in, often the element’s parent. A brief example: an element with a font-size of 2rem (32px if we consider the root value) has a child with a font-size of 1em, so the child’s value will be 32px, as the reference value in this case is the parent.

When to Use Each One?

Pixel (px)

Primarily for fine adjustments or small margins. You can use pixels to define border thickness, for example, or for precise positioning of an element with absolute positioning. This will not break your layout when changing the root of a browser.

rem

You can use rem throughout your project; it’s great for keeping things accessible and adaptable. Use tools that help with formatting. In VSCode, for example, there’s px to rem that can make conversion much easier. Also, always comment next to a rem dimension with its pixel equivalent for future code changes:

body {
  font-size: 1rem; //16px
}

em

It’s a great alternative for padding, line heights, and margins. A practical example is a section with text elements. Using em to size line heights will make the display of elements more dynamic if the layout view changes.

Start practicing the use of these three units in your projects whenever possible and see how they behave with changes in root size. Your code will be much more elegant and your project much more beautiful.

References:

Sizing in CSS: px vs em vs rem
Why Designers Should Move from px to rem and How to Do That in Figma
CSS3 Values and Units
Should I Use px or rem Value Units in My CSS?

Criando custom Hook para capturar o width da tela em ReactJs

José Lázaro — Tue, 13 Dec 2022 14:32:12 +0000

Uma forma prática de utilizar o valor da largura de uma tela (screenWidth) em ReactJs usando Javascript, é utilizando uma metodologia disponibilizada pelo próprio React para gerenciarmos nossas aplicações, os Custom Hooks.

Com esse método de captura do screenWidth conseguimos utilizar o valor atual da largura de tela para criarmos diversos tipos de lógica em nossa aplicação, como uma renderização condicional de um header por exemplo.

Conceito de Custom Hook

Custom Hooks foram implementados na versão 16.8 do React, e ele dá a possibilidade de utilizar recursos do React como gerenciamento de estado sem precisarmos necessariamente de uma classe para isso.

Você pode ler um pouco sobre Custom Hooks na própria documentação do React bem aqui.

Criar hooks para diferentes funcionalidades é bem útil quando precisamos de o valor de forma recorrente no nosso código. Não existe nenhuma regra geral para se criar hooks ou funções, mas eu, particularmente, crio novos hooks sempre que preciso lidar com valores que dependem de um estado.

Vamos então para a parte prática da criação do hook.

export const useScreenWidth = () => {
  const [screenWidth, setScreenWidth] = useState<number>(window.innerWidth)

  const handleWindowSizeChange = () => {
    setScreenWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', handleWindowSizeChange)
    return () => {
      window.removeEventListener('resize', handleWindowSizeChange)
    }
  }, [])

  return screenWidth
}

O nome de um hook por padrão é sempre iniciado com a palavra "use" seguido do objetivo daquele hook. Utilizaremos isso como regra para criar nossos futuros hooks.

1 - Inicialmente criamos um hook chamado useScreenWidth. É muito importante que utilizamos sempre a regra de criação de nomes de hooks, essa nomeclatura é obrigatória para que o react entenda que o que estamos criando é um customHook.

2 - Criamos um estado chamado screenWidth, será esse o valor que utilizaremos na nossa aplicação.

3 - Em seguida criamos uma nova função chamada handleWindowSizeChange que capturará o valor da largura da tela através da propriedade window.innerWidth e armazenará dentro do nosso estado screenWidth a largura da tela através da função setScreenWidth(). A propriedade window.innerWidth é nativa do Javascript e retorna a largura interior de uma janela em pixels. Você pode ler mais sobre aqui.

4 - Precisamos observar os valores da tela para que possamos retornar para nossa aplicação, desse modo, utilizaremos um useEffect, hook nativo do React que tem como objetivo causar um efeito colaterais na nossa aplicação. Dentro desse efeito utilizaremos o método window.addEventListener que basicamente especifica uma função que será executada sempre que o evento especificado acontecer. No nosso caso, o evento esperado é o resize da tela. Desse modo, sempre que a tela sofrer alterações em suas dimensões executaremos a função handleWindowSizeChange especificada no item 3.

5 - O React executa a limpeza sempre que o componente desmonta. Entretanto, efeitos rodam em todas as renderizações de um componente, e não apenas uma vez. Sendo assim, o React deve limpar os efeitos da renderização anterior antes de rodar os efeitos da próxima vez. Desse modo, é suma importância que evitemos o memory leak, ou vazamento de memória especificando quando o nosso hook deve remover o listener para que possamos evitar esse vazamento. Logo, retornamos a remoção do listener através do método window.removeEventListener

7 - É importante lembrar que nosso efeito não contém dependências pois ele não depende de nenhuma variável externa para ser executada.

6 - Por ultimo retornamos o nosso estado para que possa ser utilizado pela nossa aplicação.

Após a criação do nosso hook podemos chama-lo em qualquer componente de nossa aplicação apenas com o código abaixo:

const screenWidth = useScreenWidth()

Desse modo, a constante screenWidth estará disponível para ser utilizada sempre que quisermos.

Referências

Como sugestão de leitura deixo aqui a documentação do próprio React para quem quiser se aprofundar mais na utilização de hooks.

React Hooks

Quais são os tipos primitivos em Javascript

José Lázaro — Thu, 24 Nov 2022 23:23:03 +0000

Antes de começar a aprender qualquer conteúdo novo é muito importante que conceitos básicos estejam fixados em nossa mente, desse modo, a solução de eventuais problemas serão muito mais simples de se resolver.

Assim como em qualquer linguagem de programação, estamos totalmente e inevitavelmente dispostos a manipular e ler dados, sendo assim, nada mais justo que começar aprendendo quais tipos de dados teremos de manipular e ler eventualmente.

Primeiramente é importante saber que todo dado em Javascript ou é um objeto ou é um tipo primitivo, uma descrição sobre objeto pode ficar para outro momento, hoje iremos lidar apenas com o entendimento dos tipos primitivos.

Em Javascript temos 6 tipos primitivos undefined, null, number, string, boolean e symbol.

Nós podemos verificar o tipo de um variável utilizando a função typeof no javascript.

console.log(typeof 'Hello') //String
console.log(typeof 12) //Numer
console.log(typeof true) //Boolean
console.log(typeof false) //Boolean
console.log(typeof NaN) //Number
console.log(typeof 0.1) //Number
console.log(typeof '1') //String

Vamos dar uma olhada em cada tipo primitivo e exemplificar cada caso.

Undefined

Quando uma variável é declarada mas não é inicializada ela recebe o valor undefined por padrão.

const element
console.log(typeof element) //undefined

O valor undefined também é atribuido a variáveis que nem mesmo foram declaradas:

console.log(typeof value) //undefined

uma função também retornará undefined caso ela não retorne nenhum valor:

const metodo = () => {
return
}

metodo() //undefined

Null

O Null é um tipo primitivo que pode ser utilizado para representar o nada, ele contém apenas um valor, o próprio null. O JavaScript define que null é um objeto vazio. Sendo assim, podemos atribuir null a um objeto vazio.

const a = null
console.log(typeof a) //object

Number

O tipo number é um dos tipos que o Javascript usa para se referir a números, sejam eles inteiros ou decimais. Diferente de outras linguagens fortemente tipadas como Java, o número 1.5 e o número 10 são do tipo number, sem a divisão de tipos entre números decimais ou inteiros.

const age = 14
const value = 14.23
console.log(typeof age) //number
console.log(typeof value) //number

Além destes, javascript contém seu próprio método para tratar números infinitos, sendo +Infinity para números infinitos positivos e -Infinity para números infinitos negativos.

Além desses, javascript contém um valor que se refere a um número inválido, o NaN (Not a Number). Como por exemplo a divisão 0/0

const a = 0
const b = 0
console.log(a/b) //NaN

String

Strings são caracteres entre aspas. Qualquer valor entre aspas nao convertido é uma string.

const name = 'José'
const age = '15'
const value = 'false'

console.log(typeof name) //string
console.log(typeof age) //string
console.log(typeof value) //string

é importante lembrar que pode-se utilizar aspas simples '' ou duplas "" para criar strings, então deve-se ter muito cuidado com strings que contém aspas dentro dela, ela pode ser fechada antes do desejado.

const english = 'What's your name' //string incorreta
const english = "What's your name" //string correta

As strings são valores imutáveis, sendo assim, não conseguimos alterar uma string após criarmos.

É possível concatenarmos strings utilizando o sinal de +. Neste caso o Javascript une duas strings e cria uma nova.

const firstName = 'José'
const lastName = 'Lázaro'
const fullName = firstName + " " + lastName
console.log(fullName) //José Lázaro

Boolean

O boolean é um tipo primitivo que contém apenas dois valores possíveis, true ou false, ou seja, o boolean armazena a informação se algo é verdadeiro ou falso. Basicamente o boolean nos permitirá trabalhar com condições dentro do nosso código.

const condicao = true
console.log(condicao) //boolean

A seguir podemos ver como o javascript lida com o tipo dos valores quando os convertemos para outros tipos.

Symbol

O tipo primitivo Symbol foi adicionado na versão do ECMAScript 6. Os valores de tipo Symbol podem ser usados para fazer propriedades de objetos anônimos.

para declarar um symbol usamos a seguinte lógica

const mySymbol = Symbol();

Nota acerca de criação de valores primitivos

Os tipos primitivos boolean, string, number podem ser encapsulados por suas contrapartes de objeto gerando assim objetos de retorno, entretanto seus valores reais são os tipos primitivos. Mas o que isso quer dizer?

Basicamente, especificamente esses tipos podem ser gerados a partir de funções e os valores dessas funções retornam tipos primitivos. Você pode ver os exemplos a seguir:

typeof false; //boolean
typeof Boolean(false); //boolean
typeof new Boolean(false); //object
typeof (new Boolean(false)).valueOf(); //boolean

typeof "a"; //string
typeof String("a"); //string
typeof new String("a"); //object
typeof (new String("a")).valueOf(); //string

typeof 1; //number
typeof Number(1); //number
typeof new Number(1); //object
typeof (new Number(113)).valueOf(); //number

Referências

Tipos de dados primitivos em Javascript - Guilherme Alves - Medium
Tipos de dados Javascript - Ricardo Reis
ECMAScript® 2023 Language Specification
Symbol() Developer Mozilla

Entendendo a diferença entre null e undefined em Javascript

José Lázaro — Sat, 21 May 2022 17:02:03 +0000

Em Javascript, além dos tipos que normalmente nos deparamos (string, number, boolean, etc) possuimos o null e undefined. Suas definições podem ser um pouco confusas, principalmente porque entre linguagens podem possuir certas diferenças.

Vamos entender inicialmente como se caracteriza cada um dos tipos:

Undefined

Em resumo, undefined é um variável que foi declarado mas não recebeu nenhum valor ainda.

var someVar;

console.log(someVar) //undefined

Por padrão, quando uma variável é criada ele recebe o valor undefined, no caso acima, a variável someVar foi declarada mas não recebeu nenhum valor, logo, passou a ser undefined, pois seu valor não foi definido.

Semânticamente undefined indica a ausência de um valor

Podemos utilizar o typeof em uma variável para descobrirmos o seu tipo.

var x;

console.log(typeof x === "undefined"); // true
console.log(typeof x == "undefined"); //true
console.log(typeof x === "object"); //false

Dentro de um objeto, uma propriedade não definida também recebe o valor de undefined:

var test = {};
console.log(test.nome); // undefined

É importante lembrar que quando transformamos um objeto em JSON. os valores undefined não são reconhecidos, isso porque o JSON não reconhece o valor undefined como válido.

var q = {name: undefined, number: 1};
JSON.stringify(q); // {"number": 1}

Null

Diferente do undefined, o null é um valor vazio ou inexistente. Nulo é atribuído e explicitamente não significa nada. Quando definimos um valor de uma variável como null, dizemos que a variável está vazia.

var a = null;
console.log(a); // null

Além disso, null é também um objeto. Leia mais sobre null aqui

console.log(typeof null) //object

Podemos comparar também null com undefined como fazemos a seguir:

 null == undefined// true
 null === undefined // false

isso significa que null é undefined mas não é idêntico pelos motivos supracitados.

Diferenças entre null e undefined

Para frisarmos melhor a diferença entre ambos, vamos revisar os conceitos:

Undefined é uma variável declarada que não recebeu nenhum valor ainda, ou seja, ausência de valor em uma variável existente. Seu tipo é undefined.

var a;

console.log(a) // undefined;
console.log(typeof a) // undefined;

Uma variável com valor undefined nunca foi definida ou ela foi atribuída a undefined para ser "limpa".

Null é um valor inexistente ou vazio, null é um valor atribuído. Seu tipo é object.

var b = null;

console.log(a) // null;
console.log(typeof a) // object;

Null é um valor nulo atribuído a um objeto. Em resumo é um objeto que não foi inicializado ainda ou não foi criado. É usado para passar valores padrão de objetos não inicializados.

Os comparadores são ótimas maneiras de verificarmos os tipos de determinados elementos dentro de uma linguagem.

comparações de tipos:

console.log(false == undefined); //false
console.log(false == null); //false
console.log(null == undefined); //true
console.log(null === null); //true
console.log(undefined === undefined); //true
console.log(undefined === null); //false
console.log(undefined == null); //true

É importante o conhecimento acerca dos tipos especiais, principalmente quando estamos lidando com tipagem em Javascript. Esteja sempre atento aos elementos passados no seu código para evitar qualquer bug. Abaixo você encontra algumas referências acerca do tema discutido neste artigo.

Referências

https://pt.stackoverflow.com/questions/2407/qual-a-diferen%C3%A7a-entre-null-e-undefined#:~:text=Semanticamente%2C%20undefined%20significa%20%22sem%20refer%C3%AAncia,null%20significa%20%22sem%20valor%22.

https://flexiple.com/undefined-vs-null-javascript/

https://codeburst.io/javascript-whats-the-difference-between-null-undefined-37793b5bfce6

https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript

https://www.geeksforgeeks.org/undefined-vs-null-in-javascript/

Quando utilizar rem, em ou pixel

José Lázaro — Fri, 20 May 2022 00:12:05 +0000

Quando começamos a estudar desenvolvimento web, principalmente a os conceitos de CSS e utilização de unidades de medidas é normal que surjam algumas dúvidas quanto a utilização das 3 principais que nos são apresentadas: px, rem e em.

Minhas dúvidas começaram a surgir quando comecei a estudar e criar componentes no ReactJS. Nem sempre é tão claro quando devemos preferir uma unidade a outra, então aqui vou deixar uma breve explicação acerca do conceito de cada unidade e o melhor momento para utilizar cada uma.

O que é a dimensão Px

É importante deixar claro inicialmente que o pixel que utilizamos em CSS não é exatamente igual ao pixel físico. O CSS define o que podemos chamar de pixel referência, que mede o tamanho de um pixel em uma tela de 96dpi. Quando especificamos a unidade pixel em um projeto, o agente que irá usar o valor atribuído fará o reescalonamento para sua unidade que corresponda ao pixel de referência.

Além disso, o pixel é uma unidade absoluta e não escalável. A mudança do seu valor não afeta outros valores de unidade absolutas, ou seja, o valor do pixel continua imutável mesmo após configurações do usuário.

O que é rem

Diferente do pixel, o rem é uma unidade escalável e relativa, ele varia de acordo com a dimensão root do seu navegador (por padrão essa unidade é 16px), na maior parte das vezes 1rem = 16px. Podendo variar se o tamanho da fonte raiz for alterado.

Abaixo você consegue ver que o tamanho da fonte raiz do chrome está configurada para 16px.

Para fazer conversões de pixel para rem, você pode calcular manualmente fazendo uma divisão básica:

Para criar um elemento com tamanho 32px dividimos 32px/16px = 2rem. Ou você pode utilizar aplicações prontas que realizem essa conversão:

Aqui uma aplicação simples desenvolvida por mim para conversão de px para rem ou vice-versa - https://pixeltorem.netlify.app/

A grande pergunta é, se o rem é basicamente um modelo que converte pixel para outra escala, qual a diferença no código que ele tem? Se o usuário não muda seu tamanho de fonte raiz, não existe diferença pois o pixel e o rem terão valor idêntico. Mas para aqueles que alteram o tamanho da raiz para melhor acessibilidade todos os elementos dimensionados em rem iriam mudar proporcionalmente.

É importante lembrar que quando o zoom é utilizado em um navegador, o pixel é dimensionado corretamente, mas a imprevisibilidade das predefinições do usuário nos obriga a utilizar metodologias que abranjam todas as variações de configuração.

Pequena dica sobre uso de rem

Podemos utilizar um pequeno macete para facilitar o uso do rem e sua conversão. Consiste em mudar o valor do font-size do html para 62,5%, que seria = 10px e alterando o valor do body para 16px novamente.

html {
  font-size: 62.5%; //10px
}

body {
  font-size: 1.6rem; //16px
}

dessa forma 1rem = 10px, fazer a conversão torna-se bem mais simples já que basta dividir o valor em pixel por 10 e se obterá o valor em rem.

O que é em

O em também é uma unidade dinâmica, porém sua referência não é o valor raiz do navegador, de acordo com o w3Schools o em é igual ao valor calculado da propriedade font-size do elemento no qual ela é usada, na maior parte das vezes pode ser o próprio pai do elemento. Um breve exemplo: um elemento com font-size 2rem (32px se considerarmos o valor padrão do root) possui um filho com font-size de 1em, então o valor do filho será igual a 32px, já que o valor referência neste caso é o pai.

Quando usar cada uma?

pixel - Principalmente em ajustes finos, ou pequenas margens. Voce pode usar pixel para definir a espessura de uma borda por exemplo, um ajuste fino na hora de posicionar um elemento com posicionamento absoluto. Nada que quando alterado o root de um navegador quebre seu layout.

rem - Você pode usar rem em todo o seu projeto, ele é ótimo para manter acessível e adaptável, utilize ferramentas que te auxiliem na formatação. No VSCode por exemplo voce possui o px to rem que pode facilitar muito a vida de conversão. Uma dica também é sempre que colocar uma dimensão em rem, comente na frente a quantos pixels aquele valor equivale para futuras alterações do código

body {
font-size: 1rem; //16px
}

em - É uma ótima alternativa de se utilizar em preenchimentos, alturas de linhas e margens. Um exemplo prático é uma section com elementos de texto, utilizar o em para dimensionar as alturas das linhas tornará a exibição do elementos mais dinâmica frente a uma possível mudança de exibição do layout.

Comece a praticar o uso das 3 unidades em seus projetos sempre que puder, e verifique como ele se comporta com a mudança do root size. Seu código fica muito mais elegante e seu projeto muito mais bonito.

Referências:

https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

https://www.w3.org/TR/css3-values/#font-relative-lengths

https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css

Gerenciamento de estado com useContext()

José Lázaro — Sat, 06 Nov 2021 03:24:05 +0000

Lidar com estados no React é uma tarefa complicada quando começamos a utilizar estados de componentes que são consumidos globalmente. Criar estados em um componente e passar seu valor de estado para filhos e netos pode tornar o gerenciamento um tanto quanto complexo até mesmo para aplicações menores. Aqui começamos a falar de conceitos mais específicos do React com o intuito de facilitar nosso processo de produção de aplicações. Dessa vez, falaremos do useContext(), ferramenta e conceito imprescindível para produção de aplicações escaláveis e de manutenção eficiente. Vamos.

Início de projeto

Iremos criar um simples ToDo que receberá atividades a serem executadas. Definiremos um contexto global e utilizaremos este conceito para que a aplicação funcione corretamente.

Abaixo você verá os meus diretórios da aplicação e o conteúdo de cada um. Neste artigo me limitarei a falar apenas acerca do conceito do estado, o conhecimento básico acerca da criação dos componentes subtende-se que o leitor já deva possuir.

Os componentes estão todos em diretórios individuais dentro do diretório components. Desse modo organizamos o nosso código de uma maneira mais eficiente.

Lidando com contexto

Para que possamos entender o context precisamos inicialmente conhecer o conceito do state.

Quando estamos produzindo uma aplicação, é inevitável que em algum momento comecemos a reutilizar constantes e estados, isso se dá pelo dinamismo de informações que estão dispostas no processo produtivo do desenvolvimento. Geralmente, lidar com uso de dados de forma global, principalmente no React, costuma ser confuso, já que quando lidamos com a utilização de vários elementos, o dado pode ficar confuso em meio a tantos parents da cadeia de componentes. Imagine só, definir um state em um elemento pai e sair distribuindo este valor para filhos e mais filhos na aplicação. Em algum momento a confusão deve tomar de conta de tudo. Para isso, criamos contextos, que são estados(states) definidos globalmente que podem ser utilizados em qualquer parte da nossa aplicação. Isso é bem mais prático do ponto de vista produtivo, já que só precisaremos lidar com o estado definido num arquivo separado. Sabendo disso, vamos começar a aplicar o useContext, ferramenta fundamental para entendermos o gerenciamento de estado em nossas aplicações.

Criando um contexto

Inicialmente iremos criar o contexto onde nossas constantes globais serão armazenadas. É daqui que iremos exportar o estado para utilizarmos em qualquer lugar que quisermos da nossa aplicação.

Para isso, criaremos um novo diretório chamado de context. Dentro dele, armazenaremos um novo arquivo com o formato .jsx de nome ContextTodo. Esse aquivo armazenará os estados que precisamos. Ficamos então com esta estrutura.

Após o arquivo ter sido criado, devemos começar executando alguns passos para a criação do nosso contexto. Confira abaixo.

Como de praxe, começamos importando o react. E como nova ferramenta, utilizaremos o hook useContext que importaremos também do react. Além de claro, nosso bom e velho useState.

Após importados, definiremos uma constante chamada de ContextTodo (elemento que armazena o nosso estado global) e criaremos um contexto na mesma através do hook react createContext().

Para gerenciarmos e definirmos o que acontece dentro deste contexto criado utilizaremos o Provider. O provider neste caso será uma constante que armazena uma arrow function, esta constante(TodoProvider) fará uso do nosso contexto. Sendo assim, a aplicação ficará toda contida dentro do nosso provider.

A utilização do {children} sendo utilizado como uma prop tem como intuito desconstruir os elementos que serão definidos ao longo da aplicação.

Definindo o provider

Após criada nossa constante TodoProvider, devemos começar a criar alguns métodos de gerenciamento de estado. Abaixo você pode ver a estrutura criada e a explicação de cada elemento.

iniciamos uma constante todos que armazenará um estado. Este estado é um array de objetos que armazenará simples tarefas de uma lista de afazeres. Cada elemento do array guarda um id, um title e um status de conclusão. sendo assim:

const [todos, setTodos] = useState([
        {id: 1, title: 'Ir ao supermercado', done: false},
        {id: 2, title: 'Ir para academia', done: false},
        {id: 3, title: 'Passear com o cachorro', done: false},
    ]);

Após definido o estado principal do ToDo, criaremos uma nova constante saveTodo que salvará uma nova tarefa através de sua função. Esta função recebe o todo como parâmetro e cria uma nova constante newTodo que armazena desta vez uma nova tarefa dentro de um objeto, que posteriormente será armazenado dentro do nosso array de objetos definidos.

Além disso, a função saveTodo armazenará dentro do nosso estado todos o novo valor obtido através do newTodo.

Sendo assim:

const saveTodo = todo => {
        const newTodo = {
            id: todos.length + 1,
            title: todo.title,
            done: false,
        };
        setTodos([...todos, newTodo]);
    };

Além disso, nosso TodoProvider retorna um novo elemento, o <ContextTodo.Provider></ContextTodo.Provider> A utilização do elemento .Provider não é um equívoco, trata-se de um componente que está contido no objeto Context. Ele permite que componentes consumidores a assinarem mudanças no contexto, ou seja, gerenciar o contexto definido.

Segundo a própria documentção do React: O .Provider contém uma prop value, ela pode ser passada para ser consumida por componentes que são descendentes deste Provider. Um Provider pode ser conectado a vários consumidores. Providers podem ser aninhados para substituir valores mais ao fundo da árvore. Todos consumidores que são descendentes de um Provider serão renderizados novamente sempre que a prop value do Provider for alterada.

Desse modo, passamos dentro do nosso provider dois valores: O primeiro trata-se da lista de tarefas definida na constante todos, e o segundo é a nossa nova tarefa savetodo.

Sendo assim, temos a seguinte estrutura:

return(
        <ContextTodo.Provider value={{todos, saveTodo}}>
            {children}
        </ContextTodo.Provider>
    );

Como os filhos do nosso provider conseguem utilizar os valores que o provider armazena, iremos definir o children como sendo o nosso app. Sendo assim, utilizamos as chaves passando o children dentro do nosso <ContextTodo.Provider></ContextTodo.Provider>.

Utilizando nosso estado global no App

Depois de definido o Provider, precisamos executar este elemento dentro do nosso app, sendo assim, ele será o pai de toda a nossa aplicação neste caso em específico. A estrutura do nosso App.jsx fica da seguinte forma:

Como podemos observar, o nosso TodoProvider é o elemento principal e dentro dele contém nossos componentes criados posteriormente ToDoList e AddTodo.

Entendendo os componentes criados

ToDoListItem

O componente contém uma prop chamada todo, ele retorna uma div que contém o id, o título e o status da tarefa de cada um das tarefas passadas.

ToDoList

Analisando agora o componente ToDoList podemos ver a utilização do componente ToDoListItem descrito posteriormente.

Para que possamos utilizar o contexto global definido na constante ContextTodo, devemos criar uma nova e defini-la como sendo o elemento que irá receber o uso de um contexto. Neste caso, utilizamos a constante context para usar o contexto da ContextTodo. Conforme abaixo:

const context = useContext(ContextTodo);

Após definido, utilizaremos a constante data para receber e renderizar posteriormente cada um dos elementos do todo. Sendo assim, criamos um novo método .map para criar cada um dos elementos da lista de tarefas através do componente descrito anteriormente ToDoListItem.

O método .map neste caso executa a seguinte lógica:

1 - Chama o componente <ToDoListItem>;
2 - Define uma key como sendo o id de cada uma das tarefas;
3 - cria um novo parâmetro chamado todo que recebe o objeto ativo no .map.

 const data = context.todos.map(todo=>(
        <ToDoListItem key={todo.id} todo={todo}></ToDoListItem>
    ));

O ToDolist retorna após isso o elemento data que agora guarda um array de tarefas.

Após isso, podemos ver nossas tarefas sendo renderizadas na tela conforme mostra a seguir:

Adicionando novas tarefas

A aplicação está quase pronta, para finalizarmos precisamos apenas definir o local onde iremos submeter novos dados para a nossa lista de tarefas. E como submetemos coisas? Através de formulários! Sendo assim, editaremos o nosso componente AddTodo.

Abaixo você pode visualizar a estrutura do componente.

No nosso componente AddTodo começamos declarando a constante saveTodo que receberá o valor da constante saveTodo que está em nosso contexto global.

const {saveTodo} = useContext(ContextTodo);

Logo após podemos declarar constantes com estados locais.

const [todo, setTodo] = useState();

Definimos agora a nova função dentro de uma constante chamada handleFormSubmit. Essa função será responsável por adicionar o valor digitado num input na nossa lista de tarefas.

const handleFormSubmit = e => {
        e.preventDefault();
        saveTodo(todo);
    };

o comando saveTodo(todo) executa a função presente em nosso contexto tendo como parâmetro nossa constante todo já declarada.

Logo após definimos uma função que armazenará o valor digitado no input dentro da nossa cadeia de elementos todo através da desestruturação.

const handleInputChange = e => {
        setTodo({
            ...todo,
            title: e.target.value,
        });
    };

e para finalizar, retornamos o nosso formulário com o input e o botão para que as funções definidas sejam executadas quando as mudanças previstas acontecerem. No caso do input o onChange chama a função handleInputChange e o submit do formulário executa a função handleFormSubmit.

return(
        <form onSubmit={handleFormSubmit}>
            <input type="text" name="title" id="title" placeholder="Nova Tarefa..." onChange={handleInputChange}/>
            <button>ADICIONAR</button>
        </form>
    );

Como podemos perceber, a utilização do useContext é muito importante para gerenciamento de dados dentro de aplicações react, pois facilita a cadeia organizacional dos elementos e distribui os dados de forma mais consistente. Existem outras alternativas para gerenciamento de estado, como utilizar a lib redux por exemplo, mas utilizar ferramentas da própria tecnologia é muito importante para entendermos os conceitos iniciais de funcionamento.

Quaisquer dúvidas sobre a temática sugiro consultar a própria documentação do React acerca desta temática.

A produção deste artigo tem primordialmente caráter didático, tendo sido totalmente inspirado no seguinte vídeo.

Criando projetos em React

José Lázaro — Tue, 12 Oct 2021 17:32:02 +0000

Estou há um tempo sumido por aqui mas por bons motivos, estive estudando mais um pouco programação e avancei alguns passos no entendimento de conceitos básicos. Desta vez, estarei apenas iniciando um projeto em React. O intuito é fixar o processo de criação e armazenar dados para consultas posteriormente. Então vamos lá.

Antes de tudo vamos criar nosso diretório onde nosso projeto será inicializado. Nele executaremos através do terminal o comando

npx create-react-app projetobase

Assim, estamos informando que queremos iniciar um projeto React chamado "projetobase". Após executar, ele processa alguns 35089 arquivos, então paciência.

Um novo diretório com o nome do projeto citado é criado, ele é o nosso mais novo projeto React.

para executar certifique-se de estar dentro do diretório criado e digite
npm start.
Seu mais novo projeto React será executado na porta 3000. Os trabalhos podem ser iniciados.

Aqui está a estrutura dos diretórios que é criado por padrão pelo React. Iremos apagar todos os arquivos dentro do diretório src. Criaremos nossa própria estrutura do 0.

Dentro do diretório src criaremos um novo arquivos javascript chamado index.js ele que será responsável por renderizar todos os elementos do nosso projeto React. É nosso arquivo principal.

Ao criamos este novo arquivo, utilizaremos um padrão utilizado em todos os arquivos React. A importação do react para sua devida utilização.

Esta importação é realizada no início de cada arquivo, e utilizamos o comando:
import React from 'react';

Como supracitado, o index.js ele será responsável por renderizar os elementos criados na tela. Para isso necessitamos de uma dependência de renderização e seleção de elementos. O React já tem por natureza uma dependência deste tipo, o ReactDOM https://pt-br.reactjs.org/docs/react-dom.html.

Importaremos o ReactDOM para nosso index, e assim, poderemos começar a execução do nosso pequeno projeto.

O ReactDOM possui um método chamado render, ele recebe elementos que queremos renderizar na tela. Um exemplo bem prático é a renderização de um H1 conforme a seguir.

o método render necessita de alguns elementos para funcionar corretamente. O primeiro elemento trata-se do que ele irá renderizar, o segundo trata-se de onde. Neste caso, ele se refere a uma div com o id "root" que está no nosso index.html

Ao salvar, nosso projeto será executado na porta 3000 e estará exibindo uma h1 no seu body, conforme especificamos.

Para efeito de melhor visualização, iremos alterar apenas algumas configurações do arquivo, adicionar alguns estilos e fontes.
Para isso, criaremos um novo arquivo .css dentro do diretório src. Importaremos este arquivo dentro do nosso index.js através do comando

import "./index.css"

Assim, conseguiremos importar os estilos especificados no arquivo css para o nosso projeto.

Fiz algumas alterações de background color, color font, font family e weight. A imagem abaixo mostra as alterações realizadas e o resultado final.

Como ficou:

Segue o jogo agora.

Utilizamos o reactDOM apenas no nosso arquivo principal do projeto. Utilizaremos o import react nos arquivos que utilizamos a sintaxe jsx.

então em todos os arquivos iremos importar o react para que nossa aplicação funcione.

A estrutura do React é baseada em componentes, ou seja, nossos projetos serão criados e estruturados seguindo esta metodologia organizacional.

Inicialmente criaremos um diretório chamado components. Nele iremos guardar todos os nossos componentes React. Lembrando que os componentes são .jsx, note que quando criados, meu VSCODE já exibe os exibe com o símbolo do React.

Criei meu diretório de componentes e criei um novo chamado First.jsx. Nele faremos alguns exercícios.

Começaremos criando uma função chamada First que retornará um exemplo de componente React.

Começamos importando o react pois iremos utilizar a sintaxe html dentro de funções. Feito isso, criamos uma nova função chamada First, nela retornaremos dois elementos html, um H1 e um H2. É importante que estes elementos estejam todos guardados dentro de uma div para que possamos renderizar dentro do nosso projeto.

Após a criação, temos que exportar esta função para que ela possa ser utilizada em qualquer arquivo do nosso projeto. Para isso, executamos o comando export default "nomedafunção" Assim, disponibilizamos nossa função para posterior uso.

Abaixo chamamos nossa função dentro do index. Ela é importada e chamada no render utilizando a sintaxe ``.

O resultado final é este:

Aprendemos a renderizar componentes dentro do React. Agora iremos aprender a passar parâmetros para componentes React.

Criaremos um novo componente chamado Parameters, ele será nossa ferramenta de estudo agora.

Usando Parâmetros

Como já vimos, vamos importar o react e criar um novo componente dentro do arquivo através de uma função chamada Parameters. Nela iremos retornar um título e um subtítulo. Lembre-se sempre de exportar a função para que ela possa ser utiliziada.

Dentro do nosso index, iremos solicitar o que a função Parameters retorna, sendo assim, nosso título e subtítulo.

É importante frisar que os elementos solicitados dentro do render devem estar agrupados dentro de uma div para que não haja erros.

Após retornado o componente, podemos começar a atribuir parâmetros aos elementos, esses parâmetros são chamados de props. Atribuir props aos elementos é bem simples, basta adicionar o nome que se deseja dentro da tag do componente, dessa forma:

Agora, dentro do meu componente, podemos retornar estas props com chaves de chamada javascript. Lembrando que na função, atribuiremos o valor de props de entrada para que possamos retornar os valores de título e subtítulo especificados.

Note que passamos a string informada no index através de uma chamada javascript, como se estivéssemos retornando o valor de um objeto. Sendo assim props.titulo

Depois de retornado este valores, este é o resultado final.

Passando elementos filhos para um componente

Agora iremos aprender como passar elementos filhos para um componente.

Primeiro criaremos um novo arquivo, chamado ChildElement.jsx.

Nele iremos criar uma nova função como já vimos antes e especificar o comando para retornar os valores dos filhos que passaremos no index.

A estrutura segue desta forma:

Dentro do elemento onde ficarão os filhos, especificamos o comando .children. Desta forma o react entenderá que queremos retornar todos os filhos que são especificados no nosso index.

Já dentro do index, temos a seguinte estrutura dos dados.

Comentei os valores anteriores para ficar mais fácil a visualização do que estamos retornando.

Agora, passamos uma lista não ordenada para nosso componente, neste caso, são os filhos. O resultado é o seguinte:

Algumas opções de retorno de componentes e criação de projeto foram explanadas com sucesso. O próximo post será de um pequeno projeto em React para que vejamos na prática a utilização do poder do React.

A intenção do post era apenas explicar como criar um novo projeto de React e algumas de suas funcionalidades. Aqui vimos a estrutura básica de chamada de funções e retorno de componentes. Obviamente tudo que podemos estudar é bem mais complexo e envolve uma gama de ferramentas que podemos utilizar. Mas para efeito prático, esta pequena introdução já basta. Trarei em breve um projeto mais rebuscado que pretendo colocar em meu portfólio.

Você pode conferir mais informações na própria documentação do React. É uma atitude que devemos fazer com mais frequência. Te vejo na próxima.

Minhas redes:
Github - https://github.com/lazaro-contato/
LinkdIn - https://www.linkedin.com/in/lazaro-contato/

Consultando API de CEP com Fetch

José Lázaro — Wed, 28 Jul 2021 17:27:33 +0000

Esses dias tive que consumir uma API que retornava dados dos países do mundo. Até então meu contato com consumo de API era 0. Tinha apenas estudado os métodos HTTP, um amigo me ensinou sobre CRUD e criamos um pequeno server com Express. Mas consumir de fato eu não tinha noção de como fazer. Pois bem, um amigo me apresentou o fetch e decidi escrever algo sobre para que eu pudesse aprender fazendo e explicando no ponto de vista de um iniciante. Então vamos começar.

O que é fetch?

A ferramenta é utilizada principalmente no Front-end e é utilizada para retornar dados de uma API existente e exibir para o nosso usuário.

A API fetch nos fornece uma interface para realizar requisições HTTP através do navegador por meio de Promises. Utilizamos o fetch como meio de substituir o XMLHttpRequest que já foi bastante utilizado para consumirmos API's.

Antes de utilizamos o fetch, precisamos entender um pouco sobre promises. É um conceito bastante novo para mim, mas não é tão complexo.

O que são promises?

Promises são um padrão de desenvolvimento que visam representar a conclusão de operações assíncronas. Ou seja, elas definem uma ação que vai ser executada no futuro, após algo ter sido concluído. A forma que as promises são feitas no fetch é através do comando .then(). Quando estamos realizando uma busca numa API, utilizamos as promises para executar ações quando a busca for realizada. Aqui você pode ler um artigo que explana o funcionamento das promises

Iniciando o projeto

Nosso projeto é bem simples, iremos consumir uma API e retornar dados de endereço quando digitarmos um CEP em um input. Para isso, criaremos um novo projeto chamado cepSearch.

Aqui abaixo uma visão do que construí no html.

Para efeito prático não utilizei nenhuma estilização, apenas o código HTML puro. O importante é focar na lógica do projeto.

Mão no código

Como utilizarei referência de id para citar alguns processos lógicos do Javascript, coloco abaixo o que foi utilizado no HTML para maior embasamento. É muito importante que, caso você vá reproduzir o que executei, utilize os mesmos id's dos inputs. Assim, poderemos utilizar corretamente os dados que o nosso fetch irá retornar.

 <div class="container">
        <form action="">
          <div class="form-group">
            <label for="cep">CEP</label><br>
            <input type="text" class="form-control" id="cep">
            <small>00000-000</small>
          </div>
          <div class="form-group">
            <label for="logradouro">Logradouro</label><br>
            <input type="text" class="form-control" id="logradouro">
            <small>Rua</small>
          </div>
          <div class="form-group">
            <label for="bairro">Bairro</label><br>
            <input type="text" class="form-control" id="bairro">
            <small>Bairro</small>
          </div>
          <div class="form-group">
            <label for="localidade">Localidade</label><br>
            <input type="text" class="form-control" id="localidade">
            <small>Cidade</small>
          </div>
          <div class="form-group">
            <label for="uf">UF</label><br>
            <input type="text" class="form-control" id="uf">
            <small>Estado</small>
          </div>
        </form>
      </div>

Inicialmente preciso adicionar um efeito de blur no primeiro elemento input que colocarei o CEP. O blur verifica quando um elemento perde o foco, sendo assim, quando digitarmos o CEP e apertarmos tab, ele irá executar a função que queremos. Para selecionar o input, irei me referenciar pelo id #cep.

Então, selecionando o input:

$("#cep").blur(function (e) {
  }

Após selecionado o input, desejo capturar o valor que foi inputado e atribuir este valor a uma variável. Então temos:

$("#cep").blur(function (e) {
  let cep = this.value
  }

Desse modo, sempre que digitarmos algo no input CEP e tirarmos o foco do input, ele irá atribuir o valor digitado a variável cep, desse modo, temos o valor que utilizaremos para consultar os dados de endereço.

Após obtermos o valor inputado no CEP temos que buscar o valor em alguma API de endereço. Para isso, utilizaremos a API do viacep. Você pode acessa-la através do link: https://viacep.com.br/

É importante lermos a documentação da API antes de utilizarmos, desse modo, poderemos visualizar como efetuar os métodos HTTP para requisitar os dados.

No nosso caso, queremos utilizar o método GET, ou seja, iremos obter informações de uma API. Esses valores, desejo que seja retornado no formado JSON, sendo assim, utilizarei a estrutura que o próprio viacep recomenda para essas especificações:

https://viacep.com.br/ws/cep/json/

Tudo certo, agora temos já temos o necessário para consumir a API. O método que utilizaremos para capturar os dados, iremos utilizar o fetch. Antes de tudo, iremos entender a estrutura do fetch.

Quando chamamos o fetch, o primeiro valor que ele espera é a URL onde será buscado os dados. Essa é a URL que nossa API disponibiliza para consultas. Como sabemos, nossa URL é dinâmica, pois ela recebe o valor do CEP inserido no input. Para que nossa solicitação GET atualize sempre que um novo valor for digitado faremos a estrutura da URL conforme a seguir:

https://viacep.com.br/ws/${cep}/json/

Assim, utilizando o template string, podemos adicionar a variável cep a URL que o fetch utilizará.

Até então temos a seguinte estrutura:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
}

O fetch é uma ferramenta assíncrona, o que significa que você tem que esperar a conclusão da operação antes de fazer qualquer coisa com essa resposta, caso contrário, um erro será gerado. Para que utilizemos a resposta após a consulta, utilizamos o recurso .then() que realiza operações assíncronas.

Diremos agora que, após a consulta ter sido efetuada, iremos capturar a resposta que foi obtida e a aplicaremos numa função. Esta função transformará nossa resposta num formado JSON, assim, podemos utilizar os dados separadamente como objetos.

O código será:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
}

Quando a resposta for capturada e convertida, queremos que esse objeto passe por um tratamento onde iremos filtrar os dados que serão utilizados. Então utilizaremos outro recurso .then() que chamará outra função. Esta função receberá o objeto JSON gerado.

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
        .then(data => showData(data))
    })

A resposta JSON solicitará a constante showData. Aqui iremos tratar o objeto retornado da nossa busca no CEP.

A constante showData irá conter uma arrow function que será responsável por retornar os dados do objeto gerado e atribuir estes dados aos campos correspondentes do formulário.

Iniciamos a constante e chamamos a arrow function para pesquisar os dados através de um For-In.

const showData = (result) => {
}

Depois de declarada a constante, iremos atribuir um For-In.

const showData = (result) => {
  for(const campo in result){
  console.log(campo)
    }
  }

O For-In passado na arrow function retorna os dados de cada um dos elementos do objeto. E como ele faz isso? não é tão complexo.

Cada um dos campos do objeto result está sendo guardada na constante campo, o console.log executado nos mostra isso.

Como você pode ver, cada um dos valores do objeto esta sendo retornado a partir da constante campo.

Com esses valores em mão, iremos utilizar a estrutura condicional if para tratar os dados.

const showData = (result) => {
  for(const campo in result){
    if(document.querySelector("#"+campo)){
      document.querySelector("#"+campo).value = result[campo]

    }
  }
}

O if utilizado captura os elementos HTML com os id's dos campos que retornamos (Esta observação é importante, pois os id's devem possuir exatamente os mesmos nomes dos campos no nosso caso).

Após isso, iremos atribuir o valor de cada um dos campos retornados ao id de cada um dos inputs. A linha de código document.querySelector("#"+campo).value = result[campo] atribui o valor do campo ao input com o id do campo em questão. Assim, o funcionamento é estabelecido.

Como você pôde ver, o funcionamento do fetch não é tão complexo, ele captura dados através de uma URL especificada e retorna os dados através de promises. Esses dados podem ser convertidos para objetos JSON e utilizados dentro da nossa aplicação.

É interessante termos um conhecimento acerca de objetos, desse modo, conseguiremos tratar nossas requisições corretamente.

Nos links abaixo vocês poderão conhecer mais sobre fetch e sua utilização.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

https://github.github.io/fetch/

Git - Um breve estudo.

José Lázaro — Mon, 12 Jul 2021 18:04:00 +0000

Desde que comecei a estudar programação com maior assiduidade procuro metodologias de documentar o que venho aprendendo de alguma forma. Um amigo recomendou utilizar o Dev.to e minha experiência tem sido bastante positiva.

Sendo assim, irei documentar tudo que acabo estudando ou desenvolvendo, além da solução de problemas que eventualmente venham a ser um percalço no meu processo de aprendizado.

Neste Post irei tratar da utilização do Git. Abordando todos os pontos que estudei e desafios enfrentados durante o estudo. Sintam-se livres para comentar e adicionar dicas adicionais. Posteriormente poderei criar anexos com observações e dicas úteis que edifiquem o conteúdo tratado. Então vamos lá.

Índice

1. O que é Git
2. Como configurar o git
3. Repositórios
4. Ciclo de vida de arquivos
5. O que é um commit
6. Visualizando diferenças entre arquivos
7. Branch
8. Visualizando Logs
9. Manipulando commits
10. Merge

O que é Git

Em resumo, o git é um sistema de controle de versionamento. É isso.

Ok, a definição certamente é mais complexa, mas foi a melhor frase que encontrei para definir a função principal do Git. Ele certamente é o sistema de controle de versionamento mais utilizado no mundo, e essa fama se dá pela facilidade de uso, e principalmente no desempenho.

Mas o que são sistemas de controle versionamento?

O controle de versão é a atividade de rastrear e gerenciar as mudanças em um código de software. Através dele as equipes de desenvolvimento conseguem realizar múltiplas tarefas e modificações de código com o intuito de adicionar funcionalidades, corrigir bugs entre outras atividades.

Os sistemas de controle de versão guardam as alterações ao longo do tempo em um tipo de banco de dados especial que pode ser visualizado e chamado quando se deseja obter uma certa versão específica do código. Geralmente essa solicitação ocorre quando erros são cometidos e se quer voltar numa versão anterior do código.

Assim como todo software, necessitamos configurar suas opções para que possamos utilizar com maior precisão e utilizar seus recursos com maestria. Desse modo, vamos começar pelo básico.

Como configurar o Git

Baixando o Git

Para começarmos a utilizar o controle de versão em nossos projetos devemos inicialmente instalar o Git no nossa máquina. Essa instalação pode ser feita através do download do Git através do site oficial do Git.

No meu caso estou utilizando atualmente o Windows 10 Pro e a versão mais atual do Git disponível é esta do dia 06/06/2021.

Configurando o Git

Após instalado o Git em nosso sistema, devemos fazer as primeiras configurações para utilizarmos o controle de versão adequadamente.

As configurações do utilizador podem ser visualizadas através do comando:

git config --list

Numa primeira instalação, algumas informações como o nome do usuário, e-mail e editor padrão por exemplo não terão sido definidas. Sendo assim, configuraremos cada informação.

Escopos do Git

Antes de nos aprofundarmos nas configurações do Git, quero apenas explanar parcialmente sobre os escopos dos comandos.

O Git guarda as informações em três lugares:

GitConfig --system: Altera as configurações para todos os usuários do seu sistema se utilizada a opção --system
GitConfig do usuário --global: Altera as configurações apenas para o usuário que está executando o projeto. --global
GitConfig do projeto: Altera as configurações apenas do projeto que se está desenvolvendo. O comando para utilizar este escopo é: git config

Configuração dos dados

Para definir informações que aplicaremos para todos os repositórios de um usuário, utilizaremos a configuração global.

Configurando o user-name:

git config --global user.name "nomedousuario"

Configurando o e-mail:

git config --global user.email "seuemail"

Você pode utilizar também um editor padrão para o seu código. Por padrão o Vim é utilizado. No meu caso, quero definir meu editor de texto padrão para o VS Code. Você pode utilizar o seguinte comando para utiliza-lo também:

git config --global core.editor "code --wait"

Caso você utilize outro editor de texto, sugiro procurar a documentação que trate desta temática.

Essas são as configurações elementares do Git. Para visualizar as configurações definidas, você pode chamar no control cada uma:

git config user.name - No caso do nome do usuário.
git config user.email - No caso do e-mail.

Pronto, a configuração mais básica do git foi feita. Agora, quando realizamos alterações em nosso código e submete-las ao git, essas informações serão levadas também.

Repositórios

Obviamente todo mundo que está desenvolvendo um projeto precisa colocar esse projeto em algum lugar para administrar suas versões, guardar de maneira segura seus dados, enfim, gerenciar todas as atividades desenvolvidas durante o processo de produção. Como eu já disse, o Git auxilia nisso, e para começarmos a executar tais atividades necessitamos criar algo chamado repositório.

O repositório Git armazena todas as alterações feitas em um projeto dentro de uma pasta chamada .git/. Aqui ele constrói algo como uma linha do tempo que armazena cada alteração enviada. Cada alteração guarda um código Hash único que poderá ser chamado posteriormente para consulta dos dados armazenados. Vou detalhar tudo a seguir. Vamos partir para a inicialização e cada etapa será explanada.

Inicializando repositórios

Para iniciarmos um repositório devemos antes de qualquer coisa ter um projeto, neste caso vou criar um diretório através do terminal do Win10.

mkdir git-project

Depois de criado o diretório, podemos adicionar um novo arquivo, no nosso caso irei criar um HTML para simular algumas alterações.

touch index.html

Pronto, agora temos um repositório chamado git-project e dentro dele temos um arquivo chamado index.html. Vamos imaginar que esse é o nosso super projeto, iremos usa-lo por hora para explicar alguns conceitos.

Destrinchando o Git Init

Agora que já temos o mínimo para iniciar o repositório, podemos prosseguir com o estudo.

Vamos inicializar um novo repositório para o diretório criado, a inicialização é feita através do seguinte comando:

git init

Quando inicializamos um repositório através do comando supracitado, o Git cria um repositório vazio o .git/ com subdiretórios para objects, refs/heads, refs/tags arquivos e models. Além disso, cria uma branch vazia sem nenhum commit. (Veremos mais sobre branches em breve).

Bom citar que existem outros tipos de Git Init, não pretendo me aprofundar muito, mas para efeito de informação temos:

git init Transforma o diretório atual num repositório Git.
git init <directory> Transforma um diretório especificado num repositório Git.
git init --bare Cria um novo repositório vazio (um repositório para ser usado apenas como um repositório remoto). Esse tipo de init é utilizado em servidores e são considerados apenas repositórios para armazenamento. Ele facilita a troca de informações entre os desenvolvedores. No link a seguir você pode ver um pouco sobre a diferença entre git init e git bare.

Caso você inicialize um repositório Git num diretório errado você pode remover o repositório muito facilmente. Basta utilizar o comando $ rm -rf .git e pronto, seu repositório local foi removido.

Caso exista o .gitignore/ e .gitmodules/ você pode exclui-los também utilizando o comando $ rm -rf .git*

Quando executar, sugiro visualizar se alguma pasta oculta ainda existe.

Tudo pronto, aprendemos a iniciar um repositório local no nosso Git. Agora podemos começar a manipular arquivos livremente. A partir daqui somos capazes de realizar alterações em nosso código e transferi-los entre status. A seguir vamos entender o ciclo de vida de arquivos e como eles se comportam no Git.

Ciclo de vida de arquivos

O ciclo de vida dos arquivos é uma descrição bem grosseira para referenciar os status que cada arquivo passa durante o processo de produção de um projeto.

Quero explicar antes de tudo cada um dos status para melhor entendimento do assunto.

Status

Os status são situações (num grosso modo) que os arquivos se encontram. Esses status são:

Untracked - O arquivo acabou de ser adicionado mas ainda não foi visto pelo Git
Unmodifier - Quando o arquivo foi visto pelo git mas não foi modificado.
Modified - O arquivo foi modificado.
Staged - Área onde será criada a versão.

Como vemos na imagem, existem regras que levam um arquivo de um status para outro. Seguindo o fluxo podemos definir como sendo:

Untracked -> Unmodified
Quando adicionamos um arquivo e ele é visto pelo Git e não tem modificações, ele passa a ter o status de unmodified.
Unmodified -> Modified
Quando qualquer alteração no arquivo é executada.
Modified -> Staged
Quando a modificação é salva no Git. Neste momento ela ainda não foi efetivada.
Staged -> Unmodified
Essa alteração se dá quando realizamos um commit, aqui um código hash da modificação é gerada e nosso arquivo está apto a receber novas mudanças do código para um novo commit.
Unmodified -> Untracked
Quando removemos um arquivo.

Podemos visualizar o status de cada arquivo atráves de um comando que o Git nos fornece, o git status.

Este comando exibe algumas informações relevantes sobre os status dos nossos arquivos, essas informações podem ser:

Onde o arquivo está.
Os commits realizados.
Se existe algum commit pendente.

Aqui podemos ver alguns exemplos:

Untracked

Arquivo house.html foi criado mas não foi visto pelo Git.

Staged

Aqui o arquivo foi adicionado através do comando git add house.html. Ele passa para o estágio stage e está pronto para ser commitado.

Staged -> Unmodified

Aqui o arquivo foi commitado, ou seja, criamos uma snap (ou espelho) das modificações que estarão salvas num código hash que podemos utilizar posteriormente.

O commit é feito através do comando git commit -m "First commit"

-m = comando para passarmos uma mensagem.
"" = A mensagem é passada entre as aspas.

A partir desse momento o arquivo tem o status de unmodified pois ele foi criado, adicionado e commitado. Agora o Git aguarda modificações do arquivo.

Quando modifico o arquivo ele vai para o status de modified e aguarda ser transferido para o status staged. E o ciclo se inicia novamente.

Como podemos ver, entender os ciclos não é muito complexo. Caso você tenha alguma dúvida, existe um curso gratuito na udemy que pode te auxiliar em todo o contexto de entendimento básico do Git.

https://www.udemy.com/course/git-e-github-para-iniciantes/

A própria documentação do Git pode te auxiliar nisso também. O link abaixo te direciona para um artigo que explica mais detalhadamente os status do Git.
https://git-scm.com/docs/git-status

O que é um commit

Sei que já falei bastante de commits, que precisamos dele para subir alterações num projeto e bla bla bla, mas não cheguei a explicar ele muito bem. Vou fazer a boa e dar uma breve introdução sobre commits para ficamos alinhados a partir daqui.

Bom, o git commit é usado para salvar alterações num repositório local. E esse comando só funciona quando arquivos são inseridos para serem commitados, ou seja, quando passamos esses arquivos para o status staged através do comando git add.

Quando commitamos informações de um arquivo criamos uma cópia dos arquivos no que podemos chamar de espelho. Cada espelho guarda todas as informações do commit, como um código hash por exemplo, que seria basicamente um ID único que nomeia aquele commit. Quando precisamos retornar as informações de um determinado commit, é esse código hash que utilizamos. Além do hash, temos também quem realizou o commit e quando foi feito. Posteriormente explicarei a estrutura de informações do commit quando estivermos estudando o git log.

Acho importante frisar que o commit adiciona no repositório LOCAL as alterações realizadas, ou seja, para inserirmos num remoto, precisamos de outro comando que subiria para o GitHub por exemplo, mas nos limitaremos apenas a Git neste artigo.

Aqui você pode ler um pouco também sobre commits

Visualizando diferenças entre arquivos

Diff commit

Quando vamos realizar commits, podemos comparar as alterações entre os arquivos através do comando git diff. As alterações são listadas conforme a seguir:

Branch

A partir desse ponto iremos falar muito sobre branches. É um assunto bem recorrente quando começamos a trabalhar em projetos com outras pessoas, sendo assim, é um conceito que precisamos entender bem para manipular com mais eficiência nosso processo de produção.

Branch é exatamente o que diz a palavra se traduzida, são ramos. Esses ramos são criados para que possamos trabalhar de maneira organizada em nossos projetos. Isso porque nossos repositórios são como uma árvore, onde temos uma estrutura base(o tronco) e dela derivam todas as ramificações(os galhos).

Quando criamos um repositório, ele contem uma branch principal chamada branch master da qual derivam todas as outras branches. Na imagem abaixo é exibida como é a estrutura de ramos dos nossos repositórios.

Ao criarmos uma nova branch temos agora duas linhas de trabalho diferentes, onde podemos executar modificações em nosso projeto sem impactar diretamente no funcionamento do mesmo. Isso permite para nós desenvolvedores, criamos funcionalidades e testa-las sem impactar no projeto principal.

Manipulando branches

Como eu disse, quando criamos um projeto novo, ele já contém uma branch, a branch master. Podemos verificar isso digitando:
git status. Ele exibirá exatamente em qual branch estamos.

O caso acima nos mostra que estamos na branch master.

Além disso, podemos ver quais branches estão disponíveis no nosso projeto a partir do comando git branch.

O asterisco exibe em qual branch estamos no momento. Note que existe outra branch ativa chamada feature, nela poderemos desenvolver ferramentas para nosso projeto e depois vincular as alterações a branch master.

Criando nova branch

Para criarmos uma nova branch, basta executarmos o comando git checkout -b nomedabranch

Quando criamos uma nova branch, automaticamente a branch ativa é trocada. Acima o próprio git nos informa que "NovaBranch" é a branch ativa no momento, sendo assim, as alterações no código que forem efetuadas, estarão vinculadas a essa branch específica.

Deletando branches

Para excluirmos uma branch criada, o comando que podemos executar é git checkout -D nomedabranch. Desse modo, a branch especificada será removida do nosso projeto.

Alternando entre branches

Para mudarmos para outra branch existente basta digitarmos o comando git checkout nomeDaBranch. Assim, iremos trocar a branch ativa.

Note que após executado o comando, o git nos informa que mudamos a branch ativa. Na imagem acima, faço a mudança para a branch master.

Você pode acessar esse artigo do medium para entender um pouco mais sobre branch e manipulação.

Sabendo disso, podemos partir para as próximas partes do artigo. Lembrando que manipulação de branches é de extrema importância caso queiramos trabalhar com grandes projetos.

Visualizando Logs

Git Log

git log

O log tem relação direta com o seu significado em português, registro. Com esse comando você pode visualizar as informações de registro de um commit realizado. Caso tenha interesse, você pode ler sobre esta função aqui.

Supondo que temos um projeto já criado, o git já iniciado, e commits já executados, podemos visualizar os commits e as informações pertinentes a cada um apenas utilizando o comando git log.

Se executar o comando, poderemos ver algo bem semelhante a imagem acima. Para descrever melhor cada informação, temos então:

Commit - código Hash único que nomeia o commit
Author - Quem que executou o commit
Date - Data que o commit foi realizado
Mensagem - Por último a mensagem que foi passada através do git commit -m "sua mensagem". É importante descrever bem o que foi executado para que posteriormente possamos identificar com melhor precisão um commit em específico.

Git decorate

Podemos visualizar as logs exibindo a relação entre as branches através do seguinte comando git log --decorate.

Diferente do git log convecional, podemos ver agora as branches de cada commit realizado.

Git Log Author

Para visualizarmos apenas os commits realizados por um autor em específico, podemos utilizar o comando git log --author "Nome do Autor". Veja o exemplo.

Aqui o que se exibe são as mesmas informações do git log só que filtradas por autor.

Git log graph

Podemos visualizar de forma gráfica as branches dos commits realizados com o comando git log --graph, é bem útil caso queiramos ter uma melhor visualização do fluxo de trabalho que estamos executando no projeto.

A linha lateral mostra o caminho que percorremos durante os commits. Note que todos os commits realizados neste caso ilustrado foram realizados diretamente na branch master, não é uma prática recomendada quando estamos trabalhando com mais pessoas e diversas outras funcionalidades. Existem metodologias de fluxo de trabalho que utilizam branches para melhor desenvolvimento de aplicações. Vamos conhecer uma delas em breve.

Git Shortlog

Caso desejemos visualizar a relação de commits realizada por autor, podemos visualizar com o comando git log shortlog

A lista de commits por autor exibida pelo shortlog nos mostra a quantidades de commits, e a mensagem passada em cada commit. É bem útil caso queiramos visualizar quem executou determinada alteração no código.

Caso queiramos visualizar as quantidade de commits sem exibir a mensagens, basta adicionar o comando -sn na frente do código. Sendo assim, git log shortlog -sn.

Git show

Como eu já disse, a hash de um commit serve para retornar dados referente a ele e fazer algumas alterações quanto ao projeto. O git show "código hash da branch" mostra os detalhes de um commit específico.

Existe uma documentação do próprio Git que trata do Git show. Você pode verificar aqui no link: https://git-scm.com/docs/git-show

Manipulando commits

Quando fazemos alterações em arquivos é bem natural que existam erros e bugs. Quando executamos alterações que influenciam negativamente na usabilidade da ferramenta que estamos desenvolvendo muitas vezes necessitamos retornar para versões antigas até que um problema seja corrigido. Para nos auxiliar no gerenciamento de versões, podemos utilizar algumas funções específicas do Git. Vamos conhecer algumas delas.

Git checkout

O comando git checkout opera em três entidades distintas: os arquivos, os commits e as branches.

Uma descrição mais precisa da função do checkout descrita pela Atlassian é:
O checkout pode ser utilizado para visualizar commits antigos além de realizar operações nas branches criadas. A verificação das branches é semelhante à verificação de commits e arquivos antigos, e novas alterações são salvas no histórico do projeto — ou seja, não é uma operação apenas de leitura.

O git checkout permite a navegação entre branches. A verificação de uma branch atualiza os arquivos no diretório atual para que fique igual à versão armazenada na branch referenciada e diz ao Git para gravar todos os novos commits nessa branch.

Retornando status de arquivos

Quando estamos desenvolvendo, é natural que alguns erros sejam cometidos, utilizar a linha do tempo do Git é muito útil caso queiramos manipular arquivos ao bel prazer.

Quando estamos editando arquivos e eles passam do status unmodified para modified, podemos retornar essas alterações através do comando git checkout NomeDoArquivo. Veja o exemplo a seguir:

Aqui existe um arquivo chamado house.html, ele está com status unmodified. Farei uma pequena modificação para visualizarmos a função do git checkout na prática.

Arquivo sem nenhuma modificação:

Arquivo modificado:

Quando executamos o comando git checkout house.html ele retorna o arquivo do status modified para o status unmodified, sendo assim, as alterações deixam de existir e o arquivo volta ao seu estágio inicial.

Podemos observar com o git diff que não existe nenhuma modificação. Sendo assim, o arquivo voltou ao seu estágio de unmodified.

Git reset

Como vimos, o checkout retorna um arquivo do status modified para unmodified. Ou seja, não tem influencia quando adicionamos um arquivo para staged ou quando ele é commitado. Para suprir essa necessidade, podemos utilizar outros comandos bem comuns para nos auxiliar. O git reset e suas opções.

Git reset HEAD

O comando git reset HEAD NomeDoArquivo retorna um arquivo do status staged para o status modified, desse modo, podemos fazer alguma pequena alteração antes de um commit ser realizado.

Na imagem abaixo realizei uma alteração no arquivo house.html e o adicionei ao status staged através do comando git add * (o asterisco adiciona todos os arquivos modificados).
Quando o arquivo passou para o status de staged utilizei o comando git reset HEAD house.html para retornar o status do arquivo especificado house.html para o status de modified. Podemos ver que após executado o próprio git nos informa o que foi executado.

Unstaged changes after reset:
M       house.html

Desse modo, podemos realizar alterações em arquivos que estão no status staged facilmente.

Git reset e suas variações

Além do git reset HEAD temos outras 3 variações de reset que devem ser utilizadas em situações distintas. Cada um dos comandos altera de forma específica o status de cada arquivo. As formas do git reset que temos são:

git reset --soft
git reset --mixed
git reset --hard

É bom explanar que, quando queremos modificar um arquivo do comando reset, devemos sempre referenciar a hash do commit anterior ao que se está tentando dar reset. Para ilustrar posso usar os commits da imagem a seguir:

Caso eu queria realizar modificações no commit grifado com azul, eu devo utilizar o reset referenciando o último commit antes do alvo, neste caso, o hash grifado em vermelho. Sabendo disso, podemos seguir com a explicação.

Reset Soft

git reset --soft
Retorna o commit para o status staged.

Utilizamos este comando quando realizamos um commit num arquivo e desejamos corrigir ou adicionar algo.

No caso acima, referenciei a hash de um commit anterior ao foco e utilizei o git status para mostrar que o arquivo house.html voltou para o status de staged, pronto para ser commitado.

Reset Mixed

git reset --mixed
Retorna o commit para o status modified.

Aqui o commit retorna para antes de ser adicionado, apenas para o momento que foi modificado. Sendo assim, o status modified.

Reset Hard

git reset --hard
Este comando elimina totalmente o seu commit, e retorna para o commit do hash que você está referenciando. Tudo depois dele será eliminado.

Log antes do git reset. No comando iremos referenciar o segundo commit.

Após o git reset --hard podemos notar que os commits posteriores ao referenciado deixam de existir.

É importante lembrar que quando fazemos alguma alteração do tipo, essas alterações são feitas no repositório local, quando se trata de repositórios remotos alguns problemas podem surgir, como conflito de informações entre arquivos por exemplo.

Merge

Quando estamos desenvolvendo aplicações em times e precisamos realizar modificações em códigos, adicionar novas funcionalidades ou corrigir bugs, utilizamos as branches do Git para trabalhar.

Ao finalizamos as alterações, precisamos mover essas alterações para a branch principal (master) para que nossas funcionalidades sejam aplicadas ao projeto. Sendo assim, temos duas metodologias de fluxo de trabalho que podemos seguir para executarmos nossas alterações devidamente. São elas o Merge e o Rebase.

Para explicar o processo de produção do Merge utilizarei a imagem a seguir. Ela exemplifica o mapa de commits num Merge. Os seus detalhes explicarei a seguir.

Na ilustração acima podemos notar a presença de duas branches, a master e a feature. Em cada uma das branches são executados commits de acordo com as modificações realizadas. Num determinado momento, os commits realizados na branch feature precisam ser enviados para a branch master. Desse modo, garantimos que a aplicação receba o que foi desenvolvido em outras ramificações.

Para melhor entendimento, deixe-me descrever melhor:

C1 - O primeiro commit realizado na branch master
C2 - Segundo commit realizado. Aqui foi criada a nova branch chamada feature. A partir daqui começamos a dividir o nosso fluxo de trabalho para o desenvolvimento de uma nova funcionalidade.
C3 - Na nova branch feature, começamos a realizar commits que inserem as configurações da funcionalidade que queremos implementar.
C4 - Em paralelo ao desenvolvimento na branch feature, temos modificações executadas na própria master. Essas alterações são exibidas no commit C4.
C5 - As últimas modificações da feature são efetuadas e a partir daqui precisamos unir nossas alterações realizadas na branch feature, com nosso projeto da master.
C6 - A união das duas branches acontece através do commit C6, e temos agora todas as modificações do código realizadas na feature pertencendo a branch master.

Gostaria de fazer uma simulação de um Merge na prática, desse modo sinto que visualizar o código será mais efetivo para concretizar o conhecimento.

Configurações do projeto

Diretório chamado merge
Arquivo index.html que será modificado
Duas branches presentes, a branch master e outra chamada feature.

O arquivo index.html foi iniciado e commitado na branch master. Alternamos agora para a branch Feature e criamos um novo arquivo chamado index.js, iremos commita-lo na branch feature. Após isso, realizamos um novo commit na branch master. Após essas alterações podemos realizar um Merge entre as branches, vinculando as alterações da branch Feature com a branch Master.Desse modo temos a estrutura de commits das duas branches ilustrada a seguir.

Descrevendo o fluxo de commits de cada branch:

Master

Apenas o commit do index.html que chamei de first commit.

Feature

Criamos uma nova branch e commitamos um novo arquivo chamado index.js na nova branch feature. Abaixo podemos verificar os commits realizados.

Como podemos ver, temos dois commits, o primeiro realizado na branch master e o o segundo na branch feature.

Master

Alternamos para a branch master e realizamos um novo commit, dessa vez alterando o conteúdo do arquivo index.html.

Agora precisamos unir as alterações das branches através do Merge. Para realizamos um merge, utilizamos o comando:

git merge feature

O comando acima junta a branch feature com a branch master. Lembrando que para o comando funcionar, você precisa estar na branch master, onde a feature será mesclada. A imagem a seguir exibe a união das duas branches. O arquivo index.js foi adicionado, logo tivemos uma nova inserção.

Agora podemos verificar o histórico de commits em forma de gráfico com o comando git log --graph. Ele exibe todo o fluxo de commits e nos mostra também de onde surgiu determinado commit.

Pela ordem de commits temos:

first commit realizado na branch master;
add html document realizado na branch master;
add js realizado na branch feature;
merge, união entre as duas branches.

A branch master agora contém todas as alterações realizadas na branch feature e na própria branch master.

Com isso podemos finalizar essa breve introdução ao Git. Você pode utilizar este artigo para fins de consulta. Aprender a teoria de assuntos é muito importante para nos aprofundarmos em algum estudo, mas não se sinta pressionado a decorar cada um dos comandos, programar exige mais capacidade de aprender a consultar do que decorar métodos.
Pretendo atualizar este guia inicial periodicamente, colocando dicas que vocês podem me mandar ou que eu posso acabar descobrindo, sintam-se livres para opinar nos comentários. Até a próxima.