Category: Programación

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.

Efecto de bote para iconos

Hace mucho tiempo probé una distribución de GNU Linux (no recuerdo cuál) que usaba KDE como entorno de escritorio, y me hizo mucha gracia que al iniciar un programa aparecía al lado del cursor el icono de la aplicación botando.

Lo implementé en su momento en mi entorno de ventanas para aplicaciones web, para indicar al usuario que la aplicación se estaba cargando, y ahora como he visto que llevaba un tiempo sin publicar nada de código libre he decidido subirlo a GitHub.

Así que presento al mundo bouncingIcon, una función muy sencilla que permite poner a botar un icono (bien fijo en una esquina, bien siguiendo al cursor como hacía KDE) que le indique al usuario que se está realizando una operación en la página. El repositorio de GitHub es https://github.com/koas/bouncingIcon y la página de demo para verlo funcionar es http://koas.github.io/bouncingIcon/

Espero que le resulte útil a alguien.

Detectar si una página deja de ser visible: Page Visibility API

Hay veces que nos interesa saber si la página web en la que estamos ha dejado de ser visible. Por ejemplo, si el usuario no está viendo nuestra página quizá queramos notificarle de novedades mediante una notificación o un cambio de título de la pestaña del navegador.

Para esto, y para navegadores relativamente modernos, disponemos de la Page Visibility API. Con esto podremos saber cuándo nuestra página ha dejado de ser visible y cuándo vuelve a serlo, y actuar en consecuencia.

Detectar el ancho de la barra de scroll del navegador con JavaScript

Para detectar el ancho de la barra de scroll del navegador podemos usar este pequeño código:

function anchoBarraNavegador()
{
    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; \
    			       position: absolute; top: -9999px;';
    document.body.appendChild(scrollDiv);

    var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
	
    document.body.removeChild(scrollDiv);

    return scrollbarSize;
}

Ejecutar código de jQuery cuando todas las imágenes se hayan cargado

En jQuery podemos ejecutar un código cuando la página haya terminado de cargarse de dos formas:

A) Cuando el DOM se haya cargado:

$(document).ready(function() 
{
    // Nuestro código
});

Esto significa que ese código se ejecutará cuando el navegador haya cargado todo el código HTML de la página y lo haya interpretado, teniendo así ya disponible el DOM.

B) Cuando se hayan cargado todos los elementos de la página:

$(window).load(function() 
{
    // Nuestro código
});

Este código se ejecutará cuando todos los elementos de la página se hayan cargado. Es lo que querremos usar si queremos ejecutar nuestro código cuanto todas las imágenes se hayan cargado.

Automatizar prefijos CSS con Sublime Text

Hay muchas propiedades CSS que todavía no están implementadas en los navegadores con los nombres que define el estándar, sino que cada navegador las implementa con un prefijo.

Por ejemplo, si queremos que un usuario no pueda seleccionar el texto de un elemento tendremos que escribir este código CSS para asegurarnos de que funciona en todos los navegadores:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Esto, por supuesto, es un tostón hacerlo a mano. Aquí es donde el plugin AutoPrefixer para Sublime Text nos puede echar una mano. Nos lo instalamos y al seleccionarlo en la paleta de comandos (Ctrl + Shift + P) revisará nuestro fichero (o el texto que tengamos seleccionado) y añadirá todas las propiedades específicas para navegadores allí donde haga falta.

Además se puede configurar indicando el número de versiones anteriores a la actual de los navegadores que queremos soportar.

Inspeccionar Local Storage en Firefox

Las developer tools de Chrome son una maravilla, desde su pestaña Resources se pueden ver las cookies y el Local Storage de una página muy fácilmente. Sin embargo en Firebug para Firefox no existe la posibilidad de ver / editar el contenido del Local Storage.

A no ser que instalemos FireStorage Plus!, un plugin para Firefox que añade una pestaña para consultar y editar el contenido del Local Storage de una página web.