Structure for useReducer + Context Api

Claiton Barreto — Thu, 27 May 2021 12:24:47 +0000

I've been studyng about Context API and useReducer hook, but i found nothing talking about pattern or file structure to use in projects with that.

I got to this structure:

Inside the context folder, i have the context itself and the reducer that controls the context state.

And in the component, i never (or almost never) access the context directly, leaving this job to a custom hook.

The complete code is here

What you think or comment about this ?

"Efeito dominó" em textos com Jquery

Claiton Barreto — Sat, 11 Apr 2020 23:23:44 +0000

Eu gostaria de começar a compartilhar meus conhecimentos e habilidades adquiridos com o tempo estudando e trabalhando com programação, afinal a maioria de nós desenvolvedores temos imenso prazer em compartilhar aquilo que aprendemos.

Então, nada melhor que começar logo, e com um efeito que inicialmente achei que me daria muita dor de cabeça, mas depois que entendi o conceito, foi até bem fácil de desenvolver

O efeito

A principio, principalmente pra quem está começando, pode parecer algo muito complexo. Mas ao final desse artigo vamos descobrir que na verdade é algo bem simples de se fazer!

Como fazer cada letra 'girar' no próprio eixo? E mais, como fazer o efeito acontecer de modo cascata?

Parece um bicho de sete cabeças? Vamos ver que isso não passa de um pequeno e inofensivo gatinho. Mãos no código!

Para esse exemplo, vou assumir que você já tenha noção básica de HTML, CSS e JavaScript. Sobre este terceiro, mas precisamente irei usar a biblioteca JQuery, que facilita (e muito!!!!!) principalmente na hora de selecionarmos os elementos do documento.

HTML

<h1 id="titulo">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>&nbsp;</span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</h1>

A primeira ação a se fazer é separar cada letra do texto e tratá-la como um elemento independente. Para tal, basta que dentro do meu h1 (ou qualquer tag: h2, p etc) eu adicione cada letra como um span. Assim o html vai tê-las como elementos independentes.

CSS

#titulo {
  width: 340px;
  margin: 0 auto;
  align-text: center;
}

#titulo span {
  display: inline-block;
  transition: .5s ease-out;
  transform: rotate3d(0,1,0,0deg);
}

Aqui já começamos a entender como o efeito vai acontecer.

No primeiro seletor, estamos definindo uma largura para o h1 com classe titulo, centralizando ele horizontalmente e alinhando seu texto ao centro. Como sua largura padrão é 100%, seria um incomodo pois qualquer passada com o mouse na mesma direção do titulo, iria ativar o efeito. E nós não queremos isso.

No segundo seletor estamos definindo o comportamento padrão das nossas letras:

display: inline-block; precisamos defini-los assim, pois um span por default é um elemento inline e não pode ser rotacionado. Com essa linha forçamos eles para block e isso vai permitir que sejam rotacionados.

transition: .5s ease-out; aqui não tem muito o que explicar. Simplesmente definimos quanto tempo a transição vai durar e como ela vai acontecer.

transform: rotate3d(0,1,0,0deg); aqui parece confuso, mas não é: o nome da função já é autoexplicativo. Ela faz o elemento em questão girar no seu próprio eixo, sem alterar seu tamanho ou forma. Os três primeiros valores são respectivamente os eixos x, y e z, e o ultimo é a quantidade em graus que a rotação acontecerá.

#titulo:hover span {
  transform: rotate3d(0,1,0,360deg);
  color: red
}

Nessas ultimas linhas estamos adicionando o efeito hover que vai atingir a todos os span dentro do elemento #titulo , ou seja, nossas letras. Repare que a única alteração significativa que estou fazendo é fazer o rotate3d fazer com que os elementos deem uma volta de 360 graus em torno do seu eixo X . Somente com essas linhas, já obteremos o seguinte resultado:

Bem legal, né ?! Mas ainda não terminamos.

Javascript (Jquery)

Precisamos definir um delay gradativo para o nosso texto. Isso poderia ser feito no próprio css, mas tem que ser feito item por item, e se o texto for um pouco grande, não vai ser nem um pouco legal digitar isso tudo. Então apelamos ao Javascript (no caso, Jquery).

$(document).ready(function(){

   $('#titulo').on('mouseenter', function(){ 

    var delay = 0

    $(this).children().each(function(){

      var el = $(this)

      el.css('transition-delay', delay+'s')

      delay += 0.03

    })
  })
})

O que está acontecendo aqui é simples, mas vamos por partes:

$('#titulo').on('mouseenter', function() Aqui estamos definindo um evento que será executado sempre que o mouse 'entrar' no campo do elemento #titulo

$(this).children().each(function() Nessa linha estamos definindo uma função que irá percorrer todos os elementos filhos de #titulo, ou seja, nossas letras.

el.css('transition-delay', delay+'s')
delay += 0.03

Veja bem, a propriedade transition-delay do css, recebe um valor numérico que representa justamente o tempo que levará ate a animação iniciar.
Repare que, a cada iteração, estamos atribuindo a propriedade transition-delay no item em questão e logo após incrementando a variável delay em 0.03 (3 centésimos de segundo).

Vamos testar ?!

E voilá! Nosso efeito está funcionando como esperado! Não foi tão difícil, foi?

Aprender as principais propriedades e efeitos css e depois aprender a manipulá-los com Javascript/Jquery pode fazer com que você faça animações muito legais nas suas páginas HTML!

Indo um pouco além

Mas somos programadores! Gostamos de desafios! Vamos pensar um pouco: se por um acaso eu precisasse que esse efeito ocorresse de forma contrária ao retirar o mouse do elemento?

Para isso, basta adicionarmos uma outra função com o evento 'mouseleave' e ao invés de incrementar a variável delay, vamos decresce-la em cada iteração, veja como fica nosso Javascript:

$(document).ready(function(){
  var totalDelay;

  $('#titulo').on('mouseenter', function(){ 

    var delay = 0
    obj.children().each(function(){

      var el = $(this)

      el.css('transition-delay', delay+'s')

      delay += 0.03

      totalDelay = delay

    })

  })


  $('#titulo').on('mouseleave', function(){
    var obj = $(this) 

      var delay = totalDelay

      $(this).children().each(function(){

        var el = $(this)

        el.css('transition-delay', delay+'s')

        delay -= 0.03

      })
  })
})

No final da função que já estava escrita adicionamos a linha totalDelay = delay justamente para guardarmos o valor em que o delay parou para o usarmos como referência.
A função que o evento 'mouseleave' invoca faz basicamente o inverso da de cima. A diferença é que delay inicia com o valor guardado em totalDelay (que vai ser o valor da ultima iteração). E como havia dito, ela vai decrescer o valor do delay ao invés de incrementá-lo.

Essa animação é muito simples, mas assim que me deparei com a necessidade de desenvolve-la eu confesso que me assustei um pouco... Mas no fim saiu!

Vou deixar o código escrito nesse post disponível no meu Codepen pra vocês usarem de referência e criarem suas próprias animações que com certeza serão muito daora!