WordPress customize returns internal server error 500

Well sometimes things do not work as intended.

I have been setting a wordpress site for a local consumers cooperative www.kidekoop.org . The development was done an a localhost LAMP stack where everything worked fine. When the moment has come to upload the site I decided to do it with the WP-all-in-one Migration plugin to overwrite the old one.

Everything went smooth but… accessing the customize section of the theme throwned a internal server error 500.

the error log in the cPanel of the hosting company screemed :


Got error 'PHP message: PHP Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 122880 bytes) in ...

I searched the net for a solution and the one that worked for me was adding this line in the wp-config.php


define('WP_MEMORY_LIMIT', '256M');

Happy bloggin and eat your vegetables!

Javascript: Validate action before redirection from html link

A straightforward way to inform the user about something before using an html link is using the `confirm` javascript function. This function is a browser element that will print a simple text message giving two posibilities ‘Cancel’ an ‘OK’. The way it is rendered depends on the browser client used as well as the language used in the response buttons.

If we want to inform the user about something before sending him to the url we can do it like this.

Imagine an html link


<a href="url_to_redirect" onclick='confirm("Are you sure about this?")'>Anchor text</a>

Replace the content of the onclick attribute with any JS script.

MySQL and UTF-8

It seems that in the era of smart and conected devices we would have figured out how to do simple tasks such as rendering correctly human readable characters in a computer screen.

I have to admit that today in 2018 I still face problems of character enconding in various programs, programming interfaces and such. Just as I did 20 years ago when I first bought a PC.

Being a non-native english speaker with a different alphabet believe me I struggle every time I see broken characters.

I know it is probably because of my ignorance of what ASCII and UTF8 actually means or how to configure these things but anyway I decided long ago that I am not interested in learning them.

So I just wanted to share a MySQL hint for all those who have touble printing a unicode character from a MySQL database.


CONVERT (`column or data` USING utf8)

Link side scroll of two elements with jQuery()

This is a nice jQuery trick when you need to scroll the same way on one or several elements at the same time.

$('#divId1').on('scroll', function () {
$('#divId2').scrollLeft($(this).scrollLeft());
});

 

I find it especially usefull for large responsive tables where I make use of some sticky header feature.

I wanted to scroll left and right the same way in the body of the table and the sticky header div.

 

Pivot Tables con Awk (bash)

Pivot tables es una funcionalidad que suelen ofrecer los programas de hojas de calculo (MS Excel, LibreOffice Calc, etc.)

Es una herramienta para resumir datos (data summarization) desde una base de datos. Resulta muy cómodo para contar lineas en una hoja de calculo donde hay un patrón similar o para sumar números que pertenecen en una categoría.

Un ejemplo se puede ver en la entrada de wikipedia sobre los pivot tables.

AWK

Awk es un programa que permitir procesar texto. Nos permite acceder linea por linea cualquier archivo de texto y hacer operaciones sobre ellas. Es una herramienta algo mas complicada, ya que se utiliza a través de la linea de comandos. Entiende un lenguaje basado en bash y C++. Para entender la posibilidades que nos ofrece a la hora de procesar archivos de textos, podemos mirar la documentacion completa del programa awk

Los datos que estoy trabajando actualmente son gastos que hacen distintos departamentos de ayuntamientos españoles.

Se trata de un archivo TSV que tiene la siguiente forma

Actividad | centro | dni | quien | importe | date

Actividad : el concepto de contratos que hizo el ayuntamiento con una entidad

centro : El departamiento del ayuntamiento que realizo la actividad

dni : El DNI de la empresa o professional que realizo el contrato

quien : nombre de la empresa o professional o entidad que realizo el contrato

importe : importe en miles de euros

date : La fecha del contrato

Para el proyecto de visualización de datos en que estoy colaborando necesitamos resumir unos datos, como por ejemplo:

  1. El total de contratos realizados por la misma empresa
  2. El total del importe por cada empresa
  3. Los distintos centros de gasto
  4. resumen del tipo de actividad

Estos datos se guardan en tres archivos complementarios : thinglist.tsv, centroslist.tsv, viplist.tsv.

Estamos utilizando los pivot tables para generar estos resúmenes que luego integramos a nuestro gráfico que se puede ver aqui.

Ahora existe la intención de utilizar esa manera de visualizar los datos como una herramienta mas versatil que podria servir para visualizar cualquier cantidad en el tiempo. Faltan muchas cosas para definir si queremos darle forma de un programa de visualizacion de datos.

En esa direccion he pensado que tenemos que quitar la dependencia de programas externos (como Libreoffice Calc) que actualmente utilizamos para “preparar los datos” antes de lanzar la visualización. Utilizar awk en vez de Calc podria evitar hacer el trabajo manual que se esta haciendo cuando necesitamos visualizar unos datos.

He seguido un tutorial que explica como hacer pivot tables con awk y lo he adaptado para los datos de contratos menores.

Vamos a ver paso a paso como podemos generar los pivot tables.

Empezamos solo imprimiendo linea por linea el documento que contiene los datos

awk -F $'\t' ' {print}' data_val2015.tsv

 

aquí con el flag -F estamos diciendo a awk que las columnas de nuestro archivo esta separadas con tabulaciones $’\t’

En seguida podemos elegir imprimir solo unas columnas y no todas.

awk -F $'\t' ' {print $3, $5}' data_val2015.tsv

despues del print hemos precizado que queremos que devuelva solo la columna 3 y 5.

Luego para que podamos hacer operaciones matematicas necesitamos saltar la primera linea que contiene la descripcion de las columnas.

awk -F $'\t' ' NR>1 {print $3, $5}' data_val2015.tsv

Eso se hace con  NR>1 (Number of Rows)

ahora las cosas empezaran a ser un poco mas complicadas.

awk -F $'\t' ' NR>1 {a[$4]++;} END {for (i in a) {printf ("%s\t%i\n"),i, a[i]}}' data_val2015.tsv

Primero nos fijamos que nuestro programa tiene dos mas pequeños, cada uno entre corchetes{} y separados con la palabra END.

Esto resulta que la ejecución linea por linea sera todo lo que encontramos entre los primeros corchetes y una vez finalizado el documento (es decir END) ejecute el otro programa que se encuentra entre corchetes.

En la primera parte un array a[] con índice el campo $4 (nombre de la empresa) estará contando las veces que se encuentra cada empresa. Una vez hecho, la repetitiva for() se encargara de imprimir una por una las empresas que están en los índices i, y al lado la cantidad guardada en el array a[].

Finalmente vamos a hacer una tabla con las siguientes columnas

empresa | num_contratos | total_importe | DNI

awk -F $'\t' ' NR>1 {a[$4]++; b[$4]+=$5; c[$4]=$3} END {for (i in a) {printf ("%s\t%i\t%i\t%s\n"),i, a[i], b[i], c[i]}}' data_val2015.tsv

Igual que en el ejemplo anterior tres arrays a[], b[] y c[] estaran guardan respectivamente la suma de contratos con ++, la suma de importe con +=$5 y el DNI de la empresa que esta siempre en la columna 3.

La repetitiva for va a recorer todas las empresas y la printf se encarga de dar forma a los datos que vamos a imprimir. El sintaxis del printf es al estilo de C++.

 

Mejora de interactividad y rendimiento para un proyecto de visualización de datos

Llevo desde principios de Junio 2017 colaborando en un proyecto de visualizaciones de datos llevado por numeroteca.org

Contratos menores es un manera de visualizar los contratos de varios ayuntamientos españoles de forma interactiva. El proyecto esta ya en punto avanzado y en el momento que me he incorporado al proyecto se pueden ver en un gráfico de barras los contratos de varias empresas. Como se puede ver en la imagen, la persona que esta visualizando los datos puede ver los contratos que van a una sola empresa ó los que se hacen desde un centro del ayuntamiento ó que tengan una descripción concreta p.ej. limpieza.

Mi colaboración con el proyecto tiene ya marcados unos objetivos.

  1. Solapar los filtros ya existentes (empresa, centro de gasto, descripción)
  2. Mejorar el tiempo de carga sobre todo para ayuntamientos con muchos datos
  3. Añadir maneras de interactuar con los datos.

Propuesta 1

Crear filtros compuestos de tipo empresa+centro+descripción daría una funcionalidad añadida a la hora de ver a donde y como se gasta el dinero en un ayuntamiento.

Propuesta 2

La carga de las paginas puede ser muy lenta, en algunos casos como las facturas de Zaragoza, puede tardar hasta 10 o 15 segundos. Eso e principalmente debido a que los archivos de los datos en algunos casos son muy grandes y su descarga e importación puede durar mucho.

Propuesta3

Ofrecer nuevas formas de visualizar los datos. Hasta ahora, el gráfico proporciona la mayor parte de información relacionada con los contratos. Presentar totales y medias por empresa o centro o por algunas combinaciones de ellas seria un manera de aumentar la información.

En ese blog se podrá seguir el trabajo técnico y conceptual de esa colaboración.

Escalas lineales en d3 e interacción con los datos mapeados con d3.invert()

En gráficos de tipo time-series como en contratos menores se exponen datos en dos ejes. El eje X, suele representar el tiempo en alguna medida (día,mes, año, etc) y en el eje Y se presenta una cantidad abstracta. En la mayoría de los casos se tiene que hacer un ´mapping´ de estos datos para convertir la cantidad abstracta (aqui dinero en miles de €) en píxeles segun las dimensiones que queremos que tenga nuestro grafico. Existen muchas manera de hacer el mapping con la lineal siento la mas común cuanto se expone datos de dinero.

D3js tiene unas funciones que permiten mapear una serie de numeros a una otra de manera linear:

var x = d3.scaleLinear().domain([10, 130]).range([0, 960]);

En el ejemplo se ha definido una función x. Unos datos que están entre 10 y 130 se mapean en una escala de 0 a 960.

Esa función la podemos utilizar de la siguiente manera.

x(10);

<- 0

x(130);

<- 960

x(70);

<- 480

x(2);

<- -64

Se puede observar que dando un numero fuera de rango del .domain() se devuelve un valor negativo. Finalmente la funcion X representa una manera de proyectar un valor de una escala lineal a una otra.

La función x se puede también invertir con x.invert() que seria en realidad como hacer :

var y = d3.scaleLinear().domain([0, 960]).range([10, 130]);
o hacer:
x.invert()

Pero utilizando .invert() tiene la ventaja, aparte la economía de código, podemos tener un mapeo que no sea fijo, si por ejemplo tenemos un gráfico que cambia sus dimensiones según el tamaño de la pantalla. .invert() nos asegura que la inversión sera correcta.

Resulta muy cómodo a la hora de interactuar con los datos. Se pueden obtener la cantidad inicial para imprimir la en la pantalla p.ej. En seguida veremos como hemos aprovechado de esa funcionalidad para calcular el importe en dinero de todas las barras activas en el grafico de contratos menores.

Una vez aplicados unos filtros de empresa, centro de gasto o categoria de gastos, en nuestro grafico aparecen los que cumplen estos filtros.

barrasActivas = d3.selectAll(‘svg .bar’+ filters);

Cada barra tiene un attributo height que ha sido calculado con el scaleLinear() como en el ejemplo arriba. haciendo la inversion con :

altura = barrasActivas.attr(‘height’); // Leer la altura en pixeles

dinero = yScale.invert(altura) // Revesar la operación que mapeo el importe del contrato en una altura en píxeles

Haciendo una repetitiva se puede sumar los importes de todas la barras activas y imprimir la en la pantalla.

 

Filtrar selecciones en d3.js II

En el anterior articulo vimos como construir el selector para poder ver los contratos que cumplan mas de un filtro.

En ese post vamos a ver como utilizando el metodo d3.filter() de d3.js y como podemos saber los centros de gasto que tienen al menos un contrato con una empresa, una vez que ella haya sido seleccionada.

Si hemos realizado una seleccion con d3.selectAll() que la llamemos select:

var select = d3.selectAll(‘selector’);

Luego podemos filtrar todavia mas :

select.filter(‘nuevo_selector’);

Esa funcionalidad me ha ayudado repasar con un .each() todos los centros de gasto del ayuntamiento cuando se elige una empresa. En cada iteración, se verifica si el .filter(‘centro_de_gasto’) da un array vacio o no. Si no esta vacio entonces con .style(‘background-color’,’yellow’) se cambia el fondo del boton avisando asi que tiene contenido.

Tambien el fondo se pone gris cuando se de-selecciona la empresa.