Estaba revisando una pagina que tengo en Notion sobre Three.js, con marcadores, links a articulos, utilidades, herramientas y repositorios, y encontre un recurso muy bueno sobre atajos de Blender.

Algunos no los conocia (tambien porque apenas estoy empezando con Blender), como los atajos de Snap o Clear transform, y quise compartirlo por aqui:

Los filtros SVG te permiten crear efectos visuales complejos directamente dentro de tus graficos SVG usando distintos primitives. Puedes aplicar blur, manipulacion de color y distorsiones personalizadas.

Filtros SVG

<p class="ripple-text">Filtros SVG</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);
}

• Descubierto originalmente en: SVG Filters are just amazing!
• Documentacion MDN de SVG Filters: https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_filters
• Demo de filtros SVG: https://yoksel.github.io/svg-filters/

Desde Chrome 145, 100vw resta automaticamente el ancho de la barra de scroll vertical si forzaste al elemento html a mostrar siempre scroll vertical (con overflow[-y]: scroll) o si reservaste espacio con scrollbar-gutter: stable.

— Via https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/

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

Referencia:

Mas sobre SVG favicons y como mantener favicons sin perder la cordura:

• 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 ← Muy bueno 👌

content-visiblity Without Jittery Scrollbars

/* Diferir el render del segundo articulo en adelante */
body > main > *+* {
  content-visibility: auto;
}

<script type="module">
  let observer = new IntersectionObserver(
    (entries, o) => {
      entries.forEach((entry) => {
        let el = entry.target;
        // No esta actualmente dentro del area de interseccion.
        if (entry.intersectionRatio == 0) {
          return;
        }
        // Fuerza el render para elementos dentro del area de scroll
        // que aun no hayan sido marcados.
        if (!el.markedVisible) {
          el.attributeStyleMap.set(
            "content-visibility",
            "visible"
          );
          el.markedVisible = true;
        }
      });
    },
    // Define un margen de render de 50px arriba
    // y 100px debajo del area principal.
    { rootMargin: "50px 0px 100px 0px" }
  );

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

La configuracion minima para habilitar view transitions nativas en tu sitio con HTML y 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; /* Recorta el contenido mientras anima */
        }
    }
}