Bugün Ne Öğrendim?

Günlük öğrendiğim bilgileri kısaca özetlediğim sayfa.

Yeni bir React Hook: useHover

#react
#hook

Kendi useHover hook'unuzu yazarak herhangi bir elementin üzerine gelindiğinde bir işlemi tetikleyebilirsiniz:

import { useState, useRef, useEffect } from 'react';

const useHover = () => {
  const [isHovered, setIsHovered] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const handleMouseOver = () => setIsHovered(true);
    const handleMouseOut = () => setIsHovered(false);

    const node = ref.current;
    if (node) {
      node.addEventListener('mouseover', handleMouseOver);
      node.addEventListener('mouseout', handleMouseOut);

      return () => {
        node.removeEventListener('mouseover', handleMouseOver);
        node.removeEventListener('mouseout', handleMouseOut);
      };
    }
  }, [ref.current]);

  return [ref, isHovered];
};

export default useHover;
JavaScript
UTF-8

CSS'de clamp() kullanımı

#css
#responsive

clamp() ile bir değeri minimum, ideal ve maksimum değerler arasında sınırlayabilirsiniz:

.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
CSS
UTF-8

Bu örnekte, font büyüklüğü 1rem ile 2rem arasında kalacak ve ekran genişliğine göre ayarlanacaktır.

:not() pseudo-class

#css
#selector

:not() kullanımı biraz karmaşık olabilir, yanlış kullanıldığında beklenen sonucu vermez.

Örneğin, pre veya .code-block child'ı olmayan inline code stilini ayarlamak. Kullanımı:

Don't
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
Do
:not(pre, .code-block) {
  > code {
    background-color: 'red';
  }
}