Esta página es muy útil para verificar que hemos configurado correctamente las cabeceras de seguridad:
Author: koas
Montar carpetas de S3 en nuestro sistema de ficheros
Instalamos s3fs:
sudo apt install s3fs
Creamos un usuario IAM y obtenemos su Key y Secret. Con estos datos creamos un fichero de contraseñas, por ejemplo en ~/.s3Secret:
ACCESS_KEY_ID:SECRET_ACCESS_KEY
chmod 600 ~/.s3Secret
Finalmente montamos la carpeta:
s3fs nombreDelBucket /ruta/donde/queremos/montar -o passwd_file=~/.s3Secret
Depurar Android Chrome mediante wifi
A partir de creo que es la versión 11 de Android podemos enlazar un móvil con nuestro ordenador y usar las herramientas de desarrolladores para depurar páginas web usando wifi. El ordenador y el móvil deben estar conectados a la misma wifi.
Lo primero que debemos hacer es instalar la versión más reciente de adb
en nuestro ordenador. A continuación activamos la depuración por wifi en las opciones de desarrollador.
Hecho esto pulsamos en la opción de enlazar mediante código PIN, que nos mostrará una dirección IP, un puerto y un código pin. Con estos datos ejecutamos el comando:
adb pair IP:PUERTO
Introducimos el código pin y nos indicará que el enlace se ha realizado correctamente. Pero aún hay que hacer un paso más:
adb connect IP:PUERTO
y en este caso el puerto es el que nos aparece en la sección principal de “Depuración por wifi” del teléfono.
Después de hacer esto nos aparecerá el teléfono al listar los dispositivos:
adb devices
Nos vamos al navegador y abrimos una pestaña con esta URL:
chrome://inspect/#devices
Y nos aparecerán las pestañas abiertas en el Chrome de nuestro móvil; desde allí podemos lanzar el inspector web.
Devtools para móviles y tabletas
eruda es una librería para mostrar las herramientas de desarrollador en navegadores móviles, donde por lo general no es sencillo hacer esta depuración.
Migrar a Vue3
Voy a ir dejando por aquí cómo migrar ciertos elementos de Vue2 a Vue3 para tenerlo todo junto en un mismo sitio hasta que me lo aprenda.
Scoped slots
Dentro del componente:
slot(name="icons" :row="scope.row")
Para acceder al slot dentro del código del componente:
import { useSlots } from "vue";
const slots = useSlots();
console.log(slots.icons);
En el padre:
template(#icons="{ row }")
div {{ row }}
nextTick
nextTick(() => {});
Acceder a los datos de una fila de el-table
template(#default="scope")
pre {{ scope.row }}
Emitir eventos
const emit = defineEmits(["myEvent"]);
emit("myEvent", { foo: bar });
Llamar a un método de un componente desde una referencia
Por defecto todos los métodos del componente son privados, así que hay que indicar que queremos que se pueda acceder desde fuera:
defineExpose({ nombreDelMetodo1, nombreDelMetodo2 });
SQLite y el error “attempt to write a readonly database”
Este error es la seguna vez que viene a morderme el culo, hace poco fue con nginx, que se emperraba en decir que no podía leer el fichero index.html de un bloque.
La solución en ambos casos es la misma, así que a ver si escribiéndola me la consigo aprender: no basta con tener permisos en el propio fichero, la carpeta que los contiene tiene que tener el permiso de escritura.
Edición de cinco minutos después: acabo de caer en la cuenta de que en las instrucciones de una clase que subí a Github hace cinco años (phpLoginBlacklist) especifico claramente:
It is recommended to provide a path outside the web document root (remember to give write permissions on that folder to your web server user).
Así que queda demostrado que en lo referente al sistema de ficheros de Linux mi memoria es equivalente a la del pez Dory. 🤦♂️
PDFs con Puppeteer: ojo con flex
Si tenemos un contenedor con display: flex en nuestro documento no funcionarán los estilos CSS page-break-inside de sus hijos.
Reducir la resolución de un vídeo con ffmpeg
Desde la línea de comandos ejecutamos este comando, poniendo en el parámetro scale la resolución que queramos (respetando claro la relación de aspecto del vídeo original):
ffmpeg -i input.mp4 -vf scale=1280x720 output.mp4
Comando para reducir el tamaño de los PDF
Con el parámetro dColorImageResolution podemos modificar el peso de las imágenes sin perjudicar el texto.
gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dDownsampleColorImages=true -dColorImageResolution=150 -dNOPAUSE -dAutoRotatePages=/None -dBATCH -sOutputFile=output.pdf TimeLineOk.pdf
Proxy inverso para websockets de socket.io con nginx
Si tenemos configurado y funcionando un servidor web podemos añadirle capacidades de websockets sin tener que complicarnos con nuevos puertos, certificados de seguridad, etc.
Para eso vamos a usar nginx como proxy inverso. En mi caso necesitaba poder conectar a un programa escrito en node mediante websockets (desde el navegador del cliente) y mediante http (desde mi API en el servidor).
El programa de node usa socket.io y escucha en el puerto 1978.
Esta es la configuración que he utilizado. En el fichero nginx.conf añadimos esta directiva dentro del bloque http:
upstream websocket {
server localhost:1978;
}
Y en el fichero de configuración de nuestro servidor, dentro del bloque server:
# Esta es la ruta que usa socket.io para escuchar conexiones de websockets
location /socket.io/ {
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
# Esta es la ruta a la que podremos llamar desde la API.
location /fry/ {
proxy_pass http://localhost:1978;
}
En el código JS del cliente usaremos como host de conexión de socket.io https://midominio.com y para conectar desde PHP https://midominio.com/fry/endpoint