Aunque me considero un programador con experiencia y llevo mas de 15 anos desarrollando, me sorprendio no conocer la propiedad ownerDocument.defaultView.

Basicamente devuelve el objeto window (o null) asociado a un nodo DOM especifico.

Se puede usar para adjuntar listeners de forma segura al window correcto desde un componente que se renderiza fuera de la ventana principal (por ejemplo, usando portales).

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const ref = useRef(null);

  useEffect(() => {
    const win = ref.current?.ownerDocument.defaultView || window;

    const toggle = (e) => {
      if (e.metaKey && e.key === "d") {
        e.preventDefault();
        setTheme((t) => (t === "dark" ? "light" : "dark"));
      }
    };

    win.addEventListener("keydown", toggle);

    return () => win.removeEventListener("keydown", toggle);
  }, []);

  return (
    <div ref={ref} className={theme}>
      {children}
    </div>
  );
}

Del mismo articulo tambien aprendi sobre useId y cache.

Referencia: https://shud.in/thoughts/build-bulletproof-react-components, gran articulo.

Desde hace mucho tiempo queria empezar a desarrollar un videojuego. Ahora que mi hijo de 7 anos me pidio un juego para su proximo cumpleanos, siento que es un gran momento para comenzar.

No tengo problema en aprender un lenguaje nuevo como Python, C# o Rust, pero como desarrollador web queria empezar con mi lenguaje principal: JavaScript.

Para aprender (y ensuciarme las manos), quiero replicar el juego que hizo Drew Conley en este video: Build a Multiplayer Game with JavaScript & Firebase.

Mas avances pronto…