Despite considering my self a seasoned programmer and being developing for over 15 years, I’m surprised I didn’t know about the ownerDocument.defaultView property.

I basically returns the window object (or null) associated with a specific DOM node. It could be used to safely attach an event listener to a window object from a component that is rendered outside the main window where the application was initially rendered (think portals).

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>
  );
}

From the same article, also learned about useId and cache 😛

Reference: https://shud.in/thoughts/build-bulletproof-react-components, great article btw! 💯

I’m watching some of the missing lessons on shaders that I have in the Three.js journey course, and today I learned about the Fresnel effect in Three.js. It is used to create a more realistic rendering of materials by simulating how light interacts with surfaces at different angles.

The Fresnel effect causes surfaces to reflect more light at glancing angles, which can enhance the realism of materials like water, glass, and metals.

It can be used for effects like:

• Glass/Water: Simulating realistic reflections on transparent surfaces.
• Ghostly/Energy Effects: Creating an inner or outer glow around objects that emphasizes their silhouette.
• Highlighting Objects: Serving as a low-cost alternative to outline effects for interactive items

Here is a simplified implementation from the Three.js journey course, to create an holographic effect:

// Vertex shader.
varying vec3 vPosition;
varying vec3 vNormal;

void main() {
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  vec4 modelNormal = modelMatrix * vec4(normal, 0.0);

  gl_Position = projectionMatrix * viewMatrix * modelPosition;

  vPosition = modelPosition.xyz;
  vNormal = modelNormal.xyz;
}

// Fragment shader.
varying vec3 vPosition;
varying vec3 vNormal;

void main() {
  vec3 normal = normalize(vNormal);

  if(!gl_FrontFacing) {
    normal = -normal;
  }

  // Fresnel effect
  vec3 viewDirection = normalize(vPosition - cameraPosition);
  float fresnel = dot(viewDirection, normal) + 1.0;
  fresnel = pow(fresnel, 2.0);

  // Final output
  gl_FragColor = vec4(vec3(0.0, 1.0, 1.0), fresnel);
}

SVG filters allow you to create complex visual effects directly within your SVG graphics using a variety of filter primitives. You can apply effects like blurring, color manipulation, and even custom distortions to your SVG elements.

SVG Filters

<p class="ripple-text">SVG Filters</p>

<svg style="position: absolute; width: 0px; height: 0px; pointer-events: none;">
  <filter id="water-ripple">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.05"
      numOctaves="2"
      result="ripple"
    >
      <animate
        attributeName="baseFrequency"
        dur="10s"
        values="0.02;0.05;0.02"
        repeatCount="indefinite"
      ></animate>
    </feTurbulence>
    <feDisplacementMap
      in="SourceGraphic"
      in2="ripple"
      scale="5"
    ></feDisplacementMap>
  </filter>
</svg>

.ripple-text {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: bold;
  text-align: center;
  filter: url(#water-ripple);
}

• Originally discovered at: SVG Filters are just amazing!
• MDN SVG Filters documentation https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_filters
• SVG filters demo: https://yoksel.github.io/svg-filters/

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">👾</text>
</svg>

Reference:

More description SVG favicons and favicons maintain general:

• https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them
• https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 ← Good one 👌

The command :source % in Vim reloads the Vim configuration file (such as ~/.vimrc) into the current session, updating any changes you’ve made to it. The :source command executes the VimScript commands contained in a file, and % is a shortcut that represents the name of the file currently open in the buffer.

:source %

content-visiblity Without Jittery Scrollbars

/* Defer rendering for the 2nd+ article */
body > main > *+* {
  content-visibility: auto;
}

<script type="module">
  let observer = new IntersectionObserver(
    (entries, o) => {
      entries.forEach((entry) => {
        let el = entry.target;
        // Not currently in intersection area.
        if (entry.intersectionRatio == 0) {
          return;
        }
        // Trigger rendering for elements within
        // scroll area that haven't already been
        // marked.
        if (!el.markedVisible) {
          el.attributeStyleMap.set(
            "content-visibility",
            "visible"
          );
          el.markedVisible = true;
        }
      });
    },
    // Set a rendering "skirt" 50px above
    // and 100px below the main scroll area.
    { rootMargin: "50px 0px 100px 0px" }
  );

  let els =
    document.querySelectorAll("body > main > *+*");
  els.forEach((el) => { observer.observe(el); });
</script>

The bare minimum setup for enabling your site to use native view transitions in HTML and CSS:

<meta name="view-transition" content="same-origin" />

@view-transition {
  navigation: auto;
}

Ref URL: https://www.amitmerchant.com/bare-minimum-view-transitions/

https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    
    details {
        transition: height 0.5s ease;
        height: 2.5rem;
        
        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}

You can automatically transform input values to number and date with the valueAsNumber and valueAsDate function on inputs objects.

// This will always return NaN since valueAsNumber is not available on text inputs
<input type="text" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the value as an integer or a float
// depending on the input's step attribute
<input type="number" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a UNIX timestamp, i.e. new Date().getTime()
<input type="date" onChange={e => console.log(e.target.valueAsNumber)} />

// Return the date as a JS Date object
<input type="date" onChange={e => console.log(e.target.valueAsDate)} />

Ref URL: https://devlog.willcodefor.beer/pages/use-valueasnumber-and-valueasdate-on-inputs/