Debug de Safari iPad desde VirtualBox en Linux

Para poder hacer debug desde una imagen de Mac osX de Virtualbox de una web corriendo en el Safari de un iPad el procedimiento es este:

  1. Asegurarnos de que nuestro usuario está en los grupos vboxusers y vboxsf (lo miramos en /etc/group, si no está lo añadimos y reiniciamos).
  2. Instalar en VirtualBox el pack de extensiones (es un fichero con un nombre como Oracle_VM_VirtualBox_Extension_Pack-5.0.14.vbox-extpack, se instala desde dentro de VirtualBox, en Preferencias -> Extensiones). Esto habilitará USB 2.0 y 3.0. Seleccionamos 2.0.
  3. Añadir el iPad como dispositivo USB y, atención que esto es lo importante, en la opción Remote seleccionar Any.
  4. No hay que olvidarse de marcar la opción “Inspector Web” en las opciones de Safari del iPad, está en la sección “Avanzado”.

Configurar SSL de Lets Encrypt en Node JS

Recientemente he instalado en un servidor el certificado SSL gratuito de Let’s Encrypt, y todo ha ido como la seda, en cinco minutos estaba funcionando.

Más tarde en la web de ese servidor he puesto un pequeño sistema de mensajería instantánea que usa Node JS y no tenía muy claro cómo indicar en las opciones SSL los certificados necesarios, así que aquí va para el futuro:

var httpOpcionesSSL =
{
key: fs.readFileSync('/etc/letsencrypt/live/MIDOMINIO/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/MIDOMINIO/fullchain.pem'),
ca: fs.readFileSync('/etc/letsencrypt/live/MIDOMINIO/chain.pem')
};

Ejecutar Chrome Dev Tools en iPad

Hace tiempo ya hablé de cómo usar un iPad como monitor adicional en Linux. Llevo desde entonces usándolo y funciona estupendamente, pero hay una espinita que tenía clavada desde el primer día: no poder mover la ventana de las Chrome Dev Tools al iPad.

El truco que usamos para poder tener el iPad como segundo monitor es crear una nueva sesión X y conectarse a ella mediante VNC. Por desgracia, si una ventana se abre en una sesión X no se puede enviar a otra (en realidad sí se puede, pero es demasiado complicado). Así que como la ventana de Dev Tools se abre en la sesión del monitor principal no hay forma de enviarla al iPad.

Pero resulta que hay una alternativa. Ejecutamos una instancia de Chrome en nuestra sesión X principal indicando un puerto para depuración remoto:

/usr/bin/google-chrome-stable --remote-debugging-port=9222 --user-data-dir=remote-profile

En la sesión X del iPad, ejecutamos otra instancia:

/usr/bin/google-chrome-stable --user-data-dir=remote-debug

Y en esa ventana de Chrome que se nos abre en el iPad, navegamos a http://localhost:9222 y ¡bingo! Nos aparecerán las pestañas que tengamos abiertas en la instancia de Chrome que iniciamos en la sesión principal y podremos depurar desde el iPad.

Sublime Text 3: comprobar errores en PHP al grabar fichero

Gracias a Juan Prada he conocido un plugin muy majo que se llama SublimeOnSaveBuild, que lo que hace es lanzar un build cada vez que se guarda un fichero. Esto nos permite configurar ese build para buscar errores en nuestro código PHP (o en cualquier otro tipo de fichero).

Vamos a ver cómo hacer esto.

Lo primero es definir el build para PHP. En el menú nos vamos a Tools->Build System->New Build System. Se nos abrirá un fichero en el que escribiremos esto:

{
"cmd": ["/usr/bin/php", "-l", "$file"],
"selector": "source.php",
"file_regex": "^Parse error: .* in (.*?) on line ([0-9]*)"
}

En el campo cmd yo he puesto la ruta que tiene el ejecutable de PHP en mi equipo (Linux Mint), si usas otro sistema operativo deberás adaptar ese valor a lo que corresponda en tu ordenador.

Guardamos este fichero con el nombre PHP.sublime-build. A continuación deberíamos instalar el plugin SublimeOnSaveBuild desde el editor de paquetes de SublimeText, pero no lo vamos a hacer.

El motivo es que si lo instalamos tal y como viene “de serie” cada vez que grabemos un fichero PHP nos aparecerá la ventana del build, incluso aunque no haya errores. Esto es un tostón, lo ideal es que la ventana solamente aparezca (y nos llame la atención) si hay algún error.

Ya se dio alguien cuenta de esto (es el issue número uno del proyecto en GitHub), pero por lo que se ve no han llegado a encontrar una solución que satisfaga a todo el mundo porque no lo han incluido en el código principal. Rebuscando un poco entre los comentarios he encontrado una solución que, por lo menos para PHP, hace lo que yo quiero. Se trata de añadir en la carpeta del plugin un fichero CustomExec.py con un código que chequea el resultado de la compilación y cierra la ventana del build si no hay errores.

Para vuestra comodidad y la del Koas del futuro, aquí está la versión de SublimeOnSaveBuild que oculta la ventana si no hay errores. Solamente hay que ir a la carpeta de plugins de Sublime Text 3 (Preferences-> Browse Packages…) y descomprimirlo ahí.

Convertir HTML a PDF por línea de comandos

Coincide que en los proyectos que tengo para dos clientes diferentes necesito hacer la misma cosa: generar un PDF con datos personalizados. En un caso son facturas y en otro contratos.

Hasta ahora cuando necesitaba hacer un PDF usaba la librería de PHP FPDF, que está bastante bien, pero hay una alternativa mucho más sencilla: wkhtml2pdf.

Es importante que si vamos a usarlo en un servidor de producción, que no tiene servidor de ventanas, nos descarguemos la versión estática. Una vez instalado el proceso es tan sencillo como:

  1. Copiar el documento HTML base para tenerlo con el nombre que queramos.
  2. Modificarlo con PHP para incluir la información personalizada.
  3. Ejecutar wkhtml2pdf fichero.html fichero.pdf

Crear ventana de Chrome sin interfaz de usuario

Cuando estoy desarrollando para hive.ly me viene muy bien tener dos usuarios para comprobar interacciones, notificaciones, etc… Uno de ellos lo tengo en la ventana oficial de Chrome, a pantalla completa y con las herramientas de desarrollador en el otro monitor. El otro usuario lo tengo con una ventana de incógnito (para no interferir con las credenciales del usuario oficial) y no quiero que ocupe mucho, con un tamaño como el de un móvil pequeño me sirve.

En estos casos lo ideal es que la ventana de Chrome no tenga la barra de direcciones, ni las pestañas ni nada de nada, así ocupa lo mínimo imprescindible. Para conseguir esto abro la consola y escribo:

/opt/google/chrome/chrome --app=http://hivo --incognito

Con esto se consigue una ventana de Chrome sin interfaz de usuario, que puedo redimensionar y dejar en una esquina siempre visible.

Eliminar el cansino mensaje “Token mismatch” en phpMyAdmin

ATENCIÓN: esto solamente debe hacerse en instalaciones de phpMyAdmin de desarrollo local, nunca en un phpMyAdmin en un servidor de producción.

En el servidor local que uso para desarrollo tengo instalado phpMyAdmin y estaba ya hasta el gorro del mensaje “Error: token mismatch” que aparece cuando pasa un tiempo sin que hagas ninguna operación con él.

La solución más rápida que he encontrado para esto es abrir el fichero /libraries/common.inc.php (en mi equipo instalé phpMyAdmin con apt-get y está en /usr/share/phpmyadmin/libraries/common.inc.php), buscar este código

$token_mismatch = true;
if (PMA_isValid($_REQUEST['token'])) {
    $token_mismatch = ($_SESSION[' PMA_token '] != $_REQUEST['token']);
}

y cambiarlo por:

$token_mismatch = false;
/*if (PMA_isValid($_REQUEST['token'])) {
    $token_mismatch = ($_SESSION[' PMA_token '] != $_REQUEST['token']);
}*/

Así, a lo burro. Pero como es un servidor local al que no se puede acceder desde fuera el riesgo de seguridad que conlleva se puede asumir.