<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Fala pessoal, o post de hoje vem com vídeo, espero fazer mais alguns assim, vamos juntos na expectativa que vocês gostam. Para o assunto de hoje, eu resolvi falar sobre hooks em React, dessa vez como criar um do zero.</p>
<p>O vídeo ficou longo (~30min), então dá uma paradinha, vai lá pegar um café ou chá, avisa no <em>Whatsapp</em> que vai assistir algo importante e segue junto =)</p>
<p>~~Como eu falo devagar, bota em 2x que melhora~~</p>
<h2 id="video"><a href="#video" class="anchor">Video</a></h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EvR4RPBsHfE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 id="alguns-links-e-informações"><a href="#alguns-links-e-informa%C3%A7%C3%B5es" class="anchor">Alguns links e informações</a></h3>
<p>Todo o código do projeto que fizemos, você encontrará no <a href="https://github.com/willianjusten/use-konami-code">repositório do Github</a>.</p>
<p>O <a href="https://willianjusten.com.br/habemus-react-hooks/">post sobre React Hooks do blog é esse</a> e o <a href="https://willianjusten.com.br/convertendo-um-class-based-component-para-react-hooks/">post sobre como converter class para hooks</a>.</p>
<p>A biblioteca que usei para testar foi a <a href="https://github.com/testing-library/react-hooks-testing-library">@testing-library/hooks</a>, além disso, utilizei também o <a href="https://github.com/facebook/create-react-app">create-react-app</a> para fazer a estrutura sem perder tempo.</p>
<p>Você pode ler mais sobre o <em>Konami Code</em> <a href="https://pt.wikipedia.org/wiki/C%C3%B3digo_Konami">neste link</a> e eu usei o <a href="https://keycode.info/">keycode.info</a> para descobrir os valores certinhos de cada tecla.</p>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>Espero que tenham gostado do vídeo e se gostaram, por favor, se inscrevam no <a href="https://www.youtube.com/WillianJustenCursos?sub_confirmation=1">meu canal do YouTube</a>, compartilhem e comentem!</p>


Aprenda como criar um react hook de Konami Code a partir do zero com TDD.

Criando um React Custom Hook com Testes


## Introdução

Fala pessoal, o post de hoje é mais um [daqueles super simples de CSS](https://willianjusten.com.br/series/#dicas-de-css), mas que talvez vocês não conheçam.

Enquanto escrevo, vou ouvindo uma banda de metalcore muito boa chamada [Architects](https://open.spotify.com/artist/3ZztVuWxHzNpl0THurTFCv?si=Fgce72yKQvq8RqjPzUx5wQ). Se nunca ouviu e curte um som mais pesado, pode ouvir que você vai curtir.

Chega de papo furado e vamos direto ao assunto.

## O que são CSS Counters?

São propriedades do CSS que permitem gerar um conteúdo numérico para elementos, baseados na localização deles no html.

### Como assim?

Basicamente as propriedades são:

- `counter-reset`: é usada para definir ou inicializar um ou mais contadores.
- `counter-increment`: usada para especificar o valor de incremento para os contadores.
- `counter()`: é uma função usada junto com o `content` para mostrar o valor do contador.

### Tá, mas como funciona na prática?

São três passos bem simples. Vamos lá. Digamos que tenhamos o seguinte html:

```html
<div class="content">
  <h2>Escolha um nome para o counter</h2>
  <h2>Incremente o counter</h2>
  <h2>Assinale o counter no seu elemento</h2>
</div>
```

Digamos que eu queira adicionar um número para cada título, então primeiro eu preciso inicializar o nosso counter no elemento pai, que nesse caso é o `content`, para isso, farei:

```css
.content {
  counter-reset: section; // pode ser qualquer nome desejado
}
```

Depois eu preciso adicionar o incremento:

```css
h2:before {
  counter-increment: section;
}
```

O método de `counter-increment` recebe o contador e também o valor para iniciar a contagem, se nada for passado, será a partir do `1` como padrão.

E por último, basta eu inicializar a função do contador:

```css
h2:before {
  counter-increment: section;
  content: counter(section);
}
```

Aí adicionando um pouquinho de estilo, já podemos ter a nossa numeração dinâmica com CSS:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="QWjbvpG" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/QWjbvpG">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Nested Counters

Nós podemos também numerar conteúdos internos. Digamos que tenhamos a seguinte lista:

```html
<ul class="services">
  <li class="services__item">
    Design
    <ul>
      <li>Web</li>
      <li>Mobile</li>
      <li>Graphic</li>
    </ul>
  </li>
  <li class="services__item">Web Development</li>
  <li class="services__item">
    Mobile Development
    <ul>
      <li>iOS</li>
      <li>Android</li>
      <li>Windows Phone</li>
    </ul>
  </li>
</ul>
```

Para termos uma lista tendo `1` e sub-níveis como `1.1`, podemos fazer o css da seguinte forma:

```css
// Definimos o contador principal
.services {
  counter-reset: services;
}

.services__item:before {
  counter-increment: services;
  content: counter(services) '.';
}

// Definimos o contador para os sub-níveis
.services__item ul {
  counter-reset: sub-services;
}

// Nosso `content` pode ser estilizado para conter qualquer coisa, até palavras
.services__item li:before {
  counter-increment: sub-services;
  content: counter(services) '.' counter(sub-services);
}
```

Segue abaixo o exemplo pronto:

<p class="codepen remark-oembed-inline" data-oembed data-height="300" data-default-tab="html,result" data-slug-hash="ZEbGKya" data-user="willianjusten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/willianjusten/pen/ZEbGKya">
  </a> by Willian Justen de Vasconcellos (<a href="https://codepen.io/willianjusten">@willianjusten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### Bem legal isso daí, mas e a compatibilidade?

Pode ficar despreocupado! Isso funciona até no IE8, como você pode ver no [Can I use](https://caniuse.com/#feat=css-counters).

## Conclusão

Como disse, era um post mega simples, mas que se você não conhecia, agora já conhece! E se você já conhecia, passe adiante!


Utilizando CSS Counters

## Introdução

Fala meu povo, espero que todos estejam bem nesses tempos de quarentena. Faz muito tempo que não escrevo, estava cheio de trabalho e outras coisas, mas agora pretendo voltar com tudo! 

Irei escrever vários posts de diferentes assuntos, o de hoje é um assunto comum, mas que ainda confunde muita gente e não só os iniciantes. Já vi muita gente "tentando na sorte" para ver se funcionava e acho que não deveria ser assim, então vamos descomplicar isso.

A ideia desse post veio porque eu fiz alguns questionários na Pluralsight, que [abriu os cursos de graça em Abril](https://www.pluralsight.com/offer/2020/free-april-month), e algumas das perguntas eram sobre isso.

Enquanto escrevo, vou ouvindo o álbum [Triumph & Disaster](https://open.spotify.com/album/5VbiQX9WB7ZDNvFOy3pY7J?si=t1I5SJAhRlycG352f4VKSg) de uma banda chamada [We Lost the Sea](https://open.spotify.com/artist/7GVByFFfFJYCzK4d8ZyL6s?si=MseOnVrwSU-BuXfYCVexzA). Um som instrumental bom demais, perfeito para escrever posts, programar e estudar!

### Antes de tudo, um resumo de seletores CSS

Eu tenho um [post sobre seletores CSS](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) onde explico cada um em detalhes, mas aqui vamos falar só dos tipos que existem, que são:

* **Seletores de Tipo**: onde marcamos diretamente as tags que queremos selecionar, exemplo `p` para selecionar todo `<p>`.
* **Pseudo-elementos**: como o nome sugere, eles não são elementos em si, mas servem para selecionar parte do html relativo a outro seletor. Por exemplo, `p::first-letter`.
* **Seletores de Classe**: um dos que mais utilizamos, podemos atribuir classes para diferentes elementos e então selecionar essas classes. Exemplo: `<p class="text">` pode ser selecionado com `.text`.
* **Seletores de atributo**: selecionamos elementos com um tipo específico de atributo. Por exemplo, `input[type='number']`. Aqui estamos selecionando todos os inputs que tiverem `type=number` como atributo.
* **Pseudo-classes**: selecionamos elementos baseados em seus estados CSS. Por exemplo `:hover`, `:active`, `:checked` e outros.
* **Seletores de Id**: selecionamos um elemento pela sua Id única. Só pode existir um único elemento para cada id. Exemplo: `<h1 id="header">` seria selecionado com `#header`.
* **Estilos inline**: são estilos aplicados diretamente ao elemento, através do atributo `style`. Por exemplo, `<h1 style="font-size: 16px">`

### Os pesos de cada seletor

* **Peso mais baixo**: seletores de tipo e pseudo-elementos
* **Peso baixo**: classe, atributo e pseudo-classes
* **Peso médio**: seletores de id
* **Peso alto**: estilos inline

### Regras de estilo aplicados

**1.** Se estilos de diferentes pesos são aplicados a um mesmo elemento, o estilo que tiver o maior peso será o aplicado. Se os estilos tiverem o mesmo peso, os estilos que vierem mais abaixo, serão os aplicados. Isso é devido ao "efeito cascata" que dá exatamente o nome do CSS (Cascading Style Sheets).

```scss
// <h1 class="foo bar">

.foo {
  color: green;
}

.bar {
  color: red; // essa será a cor aplicada
}
```

**2.** Quando dois seletores de mesmo peso são aplicados a um elemento, é contado como 2x o peso. Por exemplo, elementos com duas classes aplicadas terão um peso maior do que um elemento com só uma classe.

```scss
.foo.bar {
  color: blue; // essa será a cor aplicada
}

.bar {
  color: red;
}
```

**3.** Estilos de peso maior **sempre** irão prevalecer, não importa quantos elementos você colocar. 

Exemplo com id:

```scss
#footer {
  background: red; // essa será a cor aplicada
}

div.class1.class2.class3.class4 {
  background: blue;
}
```

Exemplo com inline:

```html
#title {
  color: blue;
}


<h1 id="title" style="color:red">Eu terei a cor Vermelha</h1>
```

**4.** Uma regra para ganhar de todos, o famigerado (famoso) `!important`. Essa regra _basicamente_ ignora qualquer outra regra, até mesmo um estilo inline!

```html
#title {
  color: green;
}

h1 {
  color: blue !important;
}

<h1 id="title" style="color: red">Eu terei a cor Azul =)</h1>
```

Por favor, **~~não use~~ evite usar** !important. A única maneira de sobrepor uma regra com _important_ é adicionando ainda mais especificidade somado a outro `!important`, o que torna o código ainda mais dificil de sobreescrever e complexo durante a manutenção.

Caso tenha algum estilo sobreescrevendo o seu, dê uma olhada no nível de especificidade e suba um, seja através do `id` ou uma classe a mais. Mas evite o `!important` o máximo que puder.

**5**. O seletor universal e os combinadores **não** impactam no peso dos seletores. Os combinadores são `>`, `~` e `+`. Por exemplo, se tivermos o seguinte markup:

```html
<div id="block">
  <p class="text">Foo</p>
  <p class="text">Bar</p>
</div>
```

E tivéssemos a seguinte regra css:

```scss
#block > .text {
  color: red;
}

#block .text {
  color: green; // essa será a cor aplicada
}
```

As duas regras possuem exatamente a mesma especificidade (id + classe), portanto, a regra mais embaixo será aplicada.

### Momento do teste

Como eu falei, a ideia do post foi devido a umas perguntas disso no questionário da Pluralsight, então vou deixar aqui para vocês responderem =)

**Pergunta 1**

![Qual vai ser a cor final do background? rect fill="red" style="fill: blue; color: green" Opções: black, green, blue, red](/assets/img/css-question-1.jpeg)

**Pergunta 2**

![Qual a regra vai ter mais especificidade? 1) seletor universal * 2) div > strong 3) .footer h2 span 4) #footer](/assets/img/css-question-2.jpeg)

Se você respondeu `blue` para a pergunta 1 e `#footer` na segunda pergunta, meus parabéns! Se você errou alguma delas, tente ler de novo as regras a cima e descobrir o porquê das respostas.

### Conclusão

Espero que o post tenha sido útil e se você tiver dúvidas e/ou sugestão de assuntos, me manda também! Quero voltar a escrever mais e é sempre bom saber sobre o que escrever.

O CSS não é difícil, mas é fundamental entender suas regras para não ficar tentando as coisas na sorte.

Willian JustenSoftware Engineer

Introdução

Video

Alguns links e informações

Conclusão