Month: February 2020

Por algún motivo que desconozco si se usa como sistema de almacenamiento en SimpleSamlPhp el que viene por defecto, que son las sesiones de PHP, aparece de forma aleatoria y completamente impredecible este error.

No sé por qué sale, no sé por qué ha empezado a aparecer después de casi dos meses de tener el servicio de autenticación funcionando, no sé nada pero hazme caso, lector: si vas a usar alguna vez SimpleSamlPhp hazte un favor y crea una base de datos MySQL, y en el fichero config.php de SimpleSamlPhp usa estos valores:

'store.type' => 'sql',
'store.sql.dsn' => 'mysql:host=localhost;dbname=NOMBREDB',
'store.sql.username' => 'USUARIO',
'store.sql.password' => 'CONTRASEÑA',
'store.sql.prefix' => 'sso', // Vale cualquiera

Actualización del 27/02/2020: misteriosamente la solución que indico aquí me solucionó a mí el problema pero no a otros usuarios del sistema. Lo que finalmente arregló la situación fue modificar los nombres por defecto de las cookies en el fichero config.php:

'session.phpsession.cookiename' => 'NOMBRE_PROPIO',
'session.authtoken.cookiename' => 'OTRO_NOMBRE_PROPIO',

Si queremos probar la aplicación que estamos desarrollando con vue-cli a través de ngrok puede que nos encontremos con el error “Invalid host header” si tenemos configurado el proyecto con un nombre de dominio que no sea localhost.

En estos casos hay que lanzar ngrok especificando el host header, por ejemplo:

ngrok http 8081 -host-header="dev.customer:8081"

En HTML los elementos se muestran en pantalla en el orden en el que aparecen en el código fuente. En este ejemplo:

<div class="grupo1">
  <div class="e1g1">Elemento 1 grupo 1</div>
  <div class="e2g1">Elemento 2 grupo 1</div>
</div>
<div class="grupo2">
  <div class="e1g2">Elemento 1 grupo 2</div>
</div>

el grupo 1 se mostrará antes que el grupo 2.

Antes de que existieran CSS Flex y CSS Grid la única forma de poder alterar ese orden era meter en el código una copia del grupo 2 con otra clase y mediante media queries mostrar la copia y ocultar el original al cambiar de ancho. Funcionaba, pero no era demasiado elegante.

Gracias a la magia de CSS Flex y CSS Grid resulta muy sencillo invertir el orden en el que se muestran los bloques, y podemos incluso definirlo visualmente con las áreas de CSS Grid.

Sin embargo hay una cosa que aún no podemos hacer solo con CSS y para lo que necesitaremos JS (de ahí el más o menos del título). ¿Qué pasa si queremos que a partir de un cierto ancho el div con clase e1g2 pase a estar dentro de grupo1? Que yo sepa no existe forma de cambiar el padre de un elemento mediante CSS.

Para eso viene a nuestro rescate enquire.js. Nos permite definir funciones JS que se ejecutarán cuando se activen / desactiven las media queries que le pasemos. Para nuestro ejemplo el código sería:

enquire.register("screen and (max-width:950px)", {
  match: () => {
    let nuevoPadre = document.querySelector("grupo1");
    let elementoAmover = document.querySelector("e1g2");
    nuevoPadre.appendChild(elementoAmover);
  },
  unmatch: () => {
    let nuevoPadre = document.querySelector("grupo2");
    let elementoAmover = document.querySelector("e1g2");
    nuevoPadre.appendChild(elementoAmover);
  }
});
    

Usando la misma sintaxis de las media queries tenemos una forma sencilla de mover un elemento de su sitio original a otro sitio dentro del DOM. Por supuesto, mediante CSS podremos definir la posición exacta de ese elemento dentro de “su nueva casa”.

Y además conseguimos esta funcionalidad sin engordar demasiado, la librería solo ocupa 0.8kb una vez minimizada y comprimida.