Mathias's questions

Como você deve saber, o Tailwind 4 já está disponível. Na versão 3 e anteriores, eu sempre uso esse pequeno trecho no meu arquivo de configuração para obter os valores de espaçamento que eu quiser. Mas como posso usá-lo na versão 4, já que não há mais configuração?

spacing: {
  ...new Array(1001)
    .fill()
    .map((_, i) => i)
    .reduce((acc, val) => {
      acc[val] = `${val / 10}rem`;
      return acc;
    }, {}),
},

Estou tentando em js obter a hora atual dos vídeos. Eu descobri uma solução bastante feia e não tão precisa, usando um setIntervalevento play. Mas eu preferiria usar um método melhor. Talvez requestAnimationFramepudesse fazer isso? Estou aberto para uma solução melhor.

Código atual:

  this.video = document.createElement('video')
  this.duration = null
  this.currentTime = null

  this.video.addEventListener('play', this.play)

  play(e) {
    setInterval(() => {
      this.currentTime = this.video.currentTime
    }, 1000)
  }

Estou trabalhando em uma coisinha onde preciso verificar se o img.srcjá está configurado ou não, para evitar que ele seja configurado continuamente, como está acontecendo agora. O problema está no meu onMove. Como eu posso fazer isso?

HTML:

<div data-tail></div>

<button type="button" data-src="./dist/img/1.jpg">
  text 1
</button>
<button type="button" data-src="./dist/img/2.jpg">
  text 2
</button>
<button type="button" data-src="./dist/img/3.jpg">
  text 3
</button>

JS:

const tail = document.querySelector('[data-tail]') 

window.addEventListener('mouseenter', onEnter)
window.addEventListener('mousemove', onMove)

onEnter(e) {
  let img = new Image()
  tail.appendChild(img)

  gsap.to(tail, {
    autoAlpha: 1,
    duration: 0.25
  })
}

onMove(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    img.src = el.dataset.src
  }

  gsap.to(tail,{
    x:e.clientX,
    y:e.clientY
  })
}

Estou tentando retornar um valor de uma matriz de transformação css em js.

O elemento é uma div com o seguinte css:

transform: translateY(-560px)

No meu JS, estou obtendo a matriz fazendo o seguinte:

  const el = document.querySelector('[data-holder]')
  return getComputedStyle(el).transform

O código acima me dá:

matrix(1, 0, 0, 1, 0, -560)

Como posso extrair esse último valor da matriz?

Quero escrever um operador ternário em js que faça o seguinte:

Se o índice for igual a 1 ou 3, defina var x como 10, caso contrário, defina var x como 0.

Como faço para continuar aqui?

Atualmente eu tenho isso:

let x = 0
const arr = ['string', 'string', 'string', 'string', 'string', 'string etc']

arr.forEach((el, index) => {
  index ? == 1 || index ? == 3
})