Letras gordotas para los minimapas de los IDEs

El minimapa que muchos IDEs muestran a la derecha de un fichero abierto resulta bastante útil.

Y en esta página web podemos generar texto en letras goooordas (yo uso la fuente ANSI regular).

El resultado es que podemos usar estas letras gordas para dejar indicaciones visuales en el minimapa de dónde empiezan ciertas secciones. La imagen del ejemplo es de un fichero donde defino los filtros que pueden usarse en diferentes tablas de datos en una aplicación web.

Cambiar la ordenación de fechas NULL en MySQL

Al ordenar por un campo de fecha los campos NULL se consideran menores que cualquier fecha definida.

Supongamos que tenemos una tabla con tres fechas: 1-1-2020, 1-1-2021 y NULL. Ordenando por ese campo de fecha ASC el resultado es:

NULL
2020-01-01
2021-01-01

y con DESC sería

2021-01-01
2020-01-01
NULL

Si queremos modificar este comportamiento y que al ordenar por un campo de fecha se considere NULL como mayor que cualquier fecha conocida tenemos que añadir un – al nombre del campo de fecha. ¡Ojo! Esto hará que si ordenamos por ASC el resultado sean fechas en orden descendiente y viceversa, así que quizá tengas que tenerlo en cuenta en tu código (en mi caso como es para ordenar una columna de una tabla de datos no importa mucho).

SELECT dateField FROM table ORDER BY -dateField ASC

NULL
2021-01-01
2020-01-01

SELECT dateField FROM table ORDER BY -dateField DESC

2020-01-01
2021-01-01
NULL

Redsys y Cloudfare

Si en el dominio en el que queremos integrar Redsys usamos Cloudfare las notificaciones (webhooks) que nos quiera enviar Redsys no nos llegarán porque Cloudfare las bloquea al considerar que no las está realizando un navegador al uso. Bien por Cloudfare, que para mucha morralla antes de que llegue a nuestro servidor, pero mal por el Koas que se tira un día y pico sin comprender por qué el webhook funciona si se llama a mano y no cuando lo hace Redsys.

La solución es incluir una regla en el cortafuegos de Cloudfare para que las peticiones que lleguen desde Redsys a la dirección del webhook no realicen esa comprobación. La forma de hacerlo está perfectamente explicada en esta entrada del blog de Marc Pàmpols.

Integración de pasarela de pago de Redsys tipo “insite”

La integración de la pasarela de pago de Redsys en modo insite es bastante simple pero tiene algunos momentos wtf. Dejo aquí algunos apuntes para no volver a tropezar con ellos en el futuro:

  • Hay que hablar con el contacto del banco que nos ofrezca la pasarela y pasarle una lista con todos los dominios en los que vayamos a usarla, tanto de desarrollo como de producción. Esto es lo primero que hay que hacer, hasta que no nos habiliten esos dominios no nos aparecerá el formulario incrustado para meter los datos de la tarjeta.
  • No se pueden repetir números de pedido. Si lo hacemos la petición de id de operación se completará sin error pero nos devolverá un id de operación de -1.
  • El código de comercio y el número de terminal deben enviarse sin ceros a la izquierda, y el número de pedido debe pasarse como string, si se pasa como número se nos devolverá un error (no un código de error, el iframe solo devolverá la palabra Error).

Actualización: los dos últimos puntos no vienen indicados en la documentación de integración del Santander, pero sí vienen en la oficial de Redsys, así que lo mejor es usar esa.

Componentes dinámicos en Vue.js

Hay veces que en una aplicación de Vue tenemos una pantalla donde puede haber un número variable de componentes que el usuario puede configurar, por ejemplo en un dashboard o en una pantalla de definición de filtros.

En estos casos usar la sintaxis habitual para importar componentes se hace tedioso y es más sencillo utilizar el componente de Vue component y un sistema de carga dinámica. En esta página lo explican perfectamente.

TL,DR: en la parte de template definimos el componente:

component(:is="currentComponent")

Y definimos la propiedad computada así:

currentComponent()
{
    let name = "Aquí establecemos el nombre del componente a cargar";
    return () => import(`@/components/Ruta1/Ruta2/${name}`);     
}