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.

Desactivar la opción “Upload open files” en el plugin SFTP de Sublime Text 3

Una de las cosas que me encanta de Sublime Text es la cantidad de plugins que tiene. Uno de ellos es Sublime SFTP, que permite subir y bajar ficheros por FTP directamente desde el Sublime Text.

Sin embargo hay una cosa que no me gusta de este plugin: en el menú contextual las opciones de subir fichero (que sube al servidor el fichero actual) y subir los ficheros abiertos (que sube todos los ficheros que tengamos abiertos) están seguidas, lo que hace que a veces seleccionemos la segunda en vez de la primera. Esto me ha pasado ya un par de veces y por suerte sin consecuencias, pero puede haber ocasiones en las que subir todos los ficheros que estamos editando pueda causar problemas.

Para solucionar esto lo más sencillo es modificar el menú contextual y mover la opción de subir los ficheros abiertos más abajo. Abrimos la carpeta de los paquetes (Preferences -> Browse Packages) y entramos en la carpeta SFTP. Allí encontraremos el fichero Context.sublime-menu, en el que simplemente moveremos la línea

{ "caption": "Upload Open Files", "command": "sftp_upload_open_files" },

a cualquier otra parte. Yo la he puesto debajo de la opción Browse remote.

SiteInfo – Una clase para obtener información de una web

Trabajando en la sección de links de hive.ly necesitábamos obtener una imagen de los enlaces que suben los usuarios. He hecho una pequeña clase de PHP que obtiene algunos datos de una URL que se le proporcione, entre ellos una imagen. Primero se buscan imágenes grandes (como las de las etiquetas OpenGraph) y si no imágenes de MS, Twitter o iconos de Apple.

La clase es gratuita y está disponible en Github.