Bufa

CSS: rgba() en variables SASS + custom properties

Jorge Maiden — Tue, 29 Mar 2022 18:46:58 +0000

Para poder usar rgba() junto a variables sass y custom properties hay que transformar el valor del color a rgb, no es válido en hexadecimal.

A continuación 2 formas de usar variables SASS + custom properties en colores rgba y poder hacer uso de la transparencia principalmente.

A). Usando solo un mixin:

@function hexToRGB($hex) { 
  @return red($hex), green($hex), blue($hex); 
}

$color-primary: #ff0000;

:root { 
  --color-primary-rgb: #{hexToRGB($color-primary)};
}

h1{
  color: rgba(var(--color-primary-rgb), 0.5);
}

2. Haciendo uso de la función color de SASS:

@use "sass:color";

$color-primary: #ff0000;

:root { 
  --color-primary-rgb: #{color.adjust($color-primary, $alpha: -0.5)};
}

h1{
  color: var(--color-primary-rgb);
}

Personalmente creo que resulta más cómoda y flexible la opción de usar un mixin.

SASS y custom properties

Jorge Maiden — Mon, 28 Mar 2022 15:17:17 +0000

Ejemplos de uso de las custom properties (o tambien conocidas como variables css) de css junto con las variables de SASS.

$color-principal: #222;
$color-secundario: #f02;

:root {
  --color-uno: #{$color-principal};
  --color-dos: #{$color-secundario};
}

Para insertar el valor de variable SASS al de una custom property hay que usar la expresión #{$nombre-de-variable}.

Al hacer esa interpolación se eliminan las comillas de las cadenas, por lo que si tenemos una variable con algún valor entre comillas (como puede ser en una font-family…) tendríamos que usar la función meta.inspect() de sass:

@use "sass:meta";

$fuente-principal: Arial, "Segoe UI", Roboto;

:root {
  --fuente-principal: #{meta.inspect($fuente-principal)};
}

Eliminar la «x» de los input search

Jorge Maiden — Sat, 26 Mar 2022 15:07:36 +0000

Si usas chrome/safari y tienes algún input type=»search», este monstrará una «x» a la derecha (que tiene el fin de que al pinchar en ella se borre el texto que haya escrito en el input en ese momento)…. para borrarla puedes insertar las siguientes líneas de css:

input[type="search"]::::-webkit-search-decoration,
input[type="search"]::::-webkit-search-cancel-button,
input[type="search"]::::-webkit-search-results-button,
input[type="search"]::::-webkit-search-results-decoration {
    display: none;
}

cmder: añadir acceso con botón derecho al menu de Windows

Jorge Maiden — Mon, 14 Mar 2022 18:31:34 +0000

Entremos en la carpeta de instalación de cmder ejecutar el comando:

Cmder.exe /register

Y a partir de ese momento ya aparecerá el icono de la aplicación de cmder la hacer click con botón derecho en el menu contextual de windows.

Y si quieres quitarlo del menu:

Cmder.exe /unregister

Javascript: Detectar cuando dejas de hacer scroll

Jorge Maiden — Sun, 06 Mar 2022 16:52:01 +0000

Función javascript para averiguar el momento en el que el usuario dejar de scrollear en la página web, pudiéndole pasar el tiempo de refresco que más nos interese. por defecto 100 milisegundos.

function noScroll (callback, refresh = 100) {
  if (!callback || typeof callback !== 'function') return;
  let isScrolling;
  window.addEventListener('scroll', function (event) {
    window.clearTimeout(isScrolling);
    isScrolling = setTimeout(callback, refresh);
  }, false);
}

Ejemplo:

See the Pen

Vanilla JS: FadeOut()

Jorge Maiden — Fri, 18 Feb 2022 10:54:06 +0000

Simular el efecto FadeOut de jQuery usando solo Vanilla JS. La siguiente función javascript fadeOut() consta de 2 parámetros: elemento y duración (este ultimo opcional) para controlar el tiempo que quermeos que dure la animación.

function fadeOut(element, duration = 600) {
  element.style.display = '';
  element.style.opacity = 1;
  var last = +new Date();
  var tick = function() {
    element.style.opacity = Number(+element.style.opacity - (new Date() - last) / duration).toFixed(4);
    last = +new Date();
    if (-element.style.opacity <= 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

Demo:

Y para el efecto contrario puedes ver: https://bufa.es/vanilla-js-fadein/

Composer: actualizar versión en Windows

Jorge Maiden — Wed, 26 Jan 2022 15:38:27 +0000

Para actualizar composer a la última versión en Windows, puedes usar el siguiente comando:

composer self-update

CSS: tema claro/oscuro en función de la configuración del usuario en su sistema operativo

Jorge Maiden — Wed, 12 Jan 2022 18:21:22 +0000

Para cargar los estilos light/dark automaticamwnte en función de la congifuración que tenga el usuario en su sistema operativo podemos hacer uso de la propiedad media prefers-color-scheme:

A. Por medio de link en el head del documento cargando los archivos de css correspondientes:

B. Directamente en el CSS principal:

@media (prefers-color-scheme: dark) {
  /* estilos para tema oscuro */
}

@media (prefers-color-scheme: light) {
  /* estilos para tema tema claro */
}

CSS: botón redondeado con borde exterior

Jorge Maiden — Mon, 25 Oct 2021 18:58:35 +0000

Ahora es muy sencillo conseguir ese diseño de botón o elemento con un borde redondeado externo separado x pixeles. Usando la propiedad outline-offset podemos establecer un espacio entre un contorno outline y el límite del elemento.

Antes para conseguir este aspecto teníamos que recurrir a usar otras propiedades menos naturales como box-shadow, y pseudoelementos.

Con outline:

outline: 2px solid black;
outline-offset: 3px;

Demo:

JavaScript: comprobar si un Array esta vacío

Jorge Maiden — Wed, 13 Oct 2021 17:37:04 +0000

Para saber si un array en JavaScript esta vacío podemos hacer la siguiente expresión js:

const arrayVacio = (arr) => !Array.isArray(arr) || arr.length === 0;

// Ejemplos
arrayVacio([]); // true
arrayVacio(['Raúl', 'Marta']); // false