Modificar los atributos data de HTML5 con jQuery

Si en una entrada anterior vimos cómo leer los atributos data de HTML5 con jQuery hoy vamos a ver el otro caso: modificar dichos atributos.

El ejemplo va a ser el mismo que en el anterior artículo:

<div id='fruta' data-fruta='fresa'></div>

Ok, tenemos un div con el id fruta, el atributo data-fruta y en principio el valor fresa. ¿Cómo lo modifico haciendo uso de jQuery? Pues de nuevo con el método data(), pero en este caso pasándole dos parámetros en lugar de uno:

$("#fruta").data("fruta","pera");
window.alert($("#fruta").data("fruta"));

Si el método data() recibe solo el nombre del atributo al que queremos acceder nos lo devuelve, pero si recibe como segundo atributo una cadena entonces modifica el valor del atributo asignándole el de ese segundo parámetro que le pasamos.

Y voy a repetir exactamente el mismo párrafo que en el artículo anterior sobre la nomenclatura (para que no tengas que abrirlo): Fíjate que cuando le paso el nombre del atributo lo hago quitándole el prefijo data-. Y hay otra peculiaridad: si el nombre tiene varios guiones entonces estos desaparecen y escribimos el atributo siguiendo la convención camelCase.

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
$("#fruta").data("frutaOferta","fresa");
window.alert($("#fruta").data("frutaOferta"));
</script>

X11 forwarding sobre ssh

Llevo tanto tiempo lidiando con servidores Windows que se me empiezan a anquilosar las habilidades linuxeras más allá de lo que viene a ser el día a día. Creo que necesito preparar el LPIC aunque sólo sea para mantenerme en forma. El caso, que hoy tenía que ejecutar remotamente una aplicación con entorno gráfico de un servidor Linux y tuve que ir a ojear los viejos apuntes de sistemas operativos que guardo en una carpeta en la nube con manuales de todo tipo. Seguro que hay mil entradas por ahí pero yo os lo cuento igual:

Paso 1: Habilitamos el X11 forwarding en el servidor. ¿Cómo? Editando el fichero /etc/ssh/ssh_config y buscando allí la línea que pone X11Forwarding  para ponerle el valor en YES. Y tras esto reiniciamos el demonio de SSH.

Paso 2: nos conectamos mediante ssh pasando el parámetro -X:

ssh -X usuario@nombreEquipo

Y luego ya ejecutamos el programa en cuestión.

Si el cableado o la conexión es malo puede que te interese usar la opción que comprime los datos que te enviará el servidor. Carga más trabajo en la memoria del servidor y del cliente, pero reduce el tamaño del tráfico de red:

ssh -X -C usuario@nombreEquipo

 

Seguir partidos de la NBA desde un terminal de Linux

Mis amigos saben que me encanta el baloncesto, Linux y las cosas altamente freaks. Y esta mañana, cuando me levanté, me encontré con que uno me había compartido en el muro de Facebook esta entradade OMGUbuntu: Ver partidos de la NBA desde el terminal con NBA-Go.

¿Cómo va esto?

Bueno, lo primero es tener npm instalado instalado en vuestro equipo. Está en los repositorios de Ubuntu:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Y una vez tengamos npm instalado vamos a instalar NBA-Go:

sudo npm install -g nba-go

El programa principalmente ofrece dos comandos: game y player (abreviados g y p). Dentro de la opción game hay dos opciones posibles: ver qué partidos hay disponibles y ver uno en concreto.

A la hora de ver los posibles tenemos las opciones date, yesterday, today y tomorrow. La primera para una fecha concreta, la segunda para los partidos de ayer, la tercera para los de hoy y la cuarta para los de mañana. Vemos ejemplos:

//fecha formato año/mes/día
$ nba-go game -d 2017/11/02
$ nba-go game --date 2017/11/02
//ayer
$ nba-go game -y
$ nba-go game --yesterday
//hoy
$ nba-go game -t
$ nba-go game --today
//mañana
$ nba-go game -T
$ nba-go game --tomorrow

Una vez listado podéis navegar con el partido, ver la información previa al juego o seguir el desarrollo del mismo con las estadísticas en directo. También podéis ver el boxscore del partido ya finalizado con toda la estadística.

Aquí os dejo un gif de la página oficial que ilustra esto:

Seleccionar partido

Partido en directo

Con el comando player tenemos tres opciones: información general, estadísticas de la temporada regular o de los playoff. Voy a usar el mismo ejemplo que en la página oficial para que cuadre con el gif que voy a usar de la misma.

//info de Curry
$ nba-go player Curry -i
$ nba-go player Curry --info
//temporada regular
$ nba-go player Curry -r
$ nba-go player Curry --regular
//eliminatorias
$ nba-go player Curry -p
$ nba-go player Curry --playoffs
//todo junto
$ nba-go player Curry -i -r -p

Información de jugadores

Os dejo por aquí el enlace al proyecto en GitHub por si queréis ver el código o si queréis clonarlo.

SQL-Server: Select * vs Select 1 en una cláusula EXISTS()

Una duda que me asaltó hoy ¿Es más eficiente usar Select * o usar Select 1 en una subconsulta de una cláusula EXISTS?

En principio podríamos pensar que Select 1, al no tener que devolver una lista de columnas,sería mucho más eficiente. Pero si analizamos el plan de ejecución de la consulta vemos que no, que el rendimiento es similar. ¿Por qué?

La propia Microsoft lo explica en esta entrada de sus manuales: SQL-Server no produce ningún dato cuando una consulta está dentro de EXISTS, simplemente evalúa el WHERE de dicha consulta para comprobar si devolvería algo y, según esto se cumpla, devuelve TRUE o FALSE. Por tanto, usar Select * en este caso no empeoraría el rendimiento de la consulta.

Windows: Modificar márgenes de impresión del Explorer con una entrada en el registro.

Una actividad que tengo que hacer habitualmente en mi trabajo es configurar los márgenes de impresión de Internet Explorer en los equipos de los clientes. Una tarea tediosa y repetitiva que obliga a ir configurando los equipos uno a no ¿Puede agilizarse? Sí, con una entrada en el registro del sistema. ¿Cómo? Pues lo primero es abrir el block de notas y pegar este código:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup]
"header"=""
"footer"=""
"margin_bottom"="0.2"
"margin_left"="0.2"
"margin_right"="0.2"
"margin_top"="0.2"

En este caso estamos ajustando el margen a 0.2 cm, en vuestro caso poned el valor que corresponda a vuestra necesidad.

Simplemente guardáis ese código en un fichero con la extensión .reg y, cuando lo tengáis, lo ejecutáis con permisos de administrador. Y listo, ya quedó configurado.

¿Cómo descargar un vídeo de Twitter desde el móvil?

Ayer tuve que descargar un vídeo colgado en un post de Twitter para pasárselo a un colega que no tiene cuenta en esa red social (o no la usa). La cuestión es que no tenía muy claro cómo hacerlo, pero la cosa es muy sencilla

  • Lo primero es irte al tweet donde está el vídeo, abrirlo y darle a la opción de compartir. Cuando nos pregunte cómo queremos hacerlo seleccionamos «Copiar al portapapeles«.
  • Con el enlace copiado nos vamos a esta página y allí pegamos el enlace en el campo de texto que nos habilitan con ese fin (puedes ver en la imagen de abajo que es el que sale entre los dos anuncios). Ojo, que según la versión de la aplicación de Twitter a veces mete un texto antes del enlace al tweet. Revisa por si lo tiene, y si está se lo borras.Twitter Downloader
  • Ahora ya sólo queda pulsar el botón para descargar, que verás un poco más abajo en la web. Dependiendo del vídeo te dará a elegir la calidad de la descarga, elige la que más te interese.

SQL-Server ¿Es mejor usar IN o BETWEEN?

Otro tip rápido de SQL-Server ¿Es mejor hacer uso de IN o de BETWEEN? Bueno, en este caso la respuesta es rápida: debemos usar BETWEEN siempre que sea posible. Veamos dos consultas:

//primero con in 
Select Nombre from Pacientes where Id IN (3000,3001,3002,3003,3004);
//ahora between
Select Nombre from Pacientes where Id BETWEEN 3000 AND 3004

¿Por qué es mejor usar BETWEEN? Bueno, si no existe un índice para el campo sobre el que ejecutamos la búsqueda no notaremos mucho cambio, pero si hay índices la respuesta de BETWEEN será mucho más rápida. Siempre que se trate de buscar un resultado dentro de un rango BETWEEN será la mejor opción. ¿Cuándo debemos usar IN? Pues cuando busquemos un resultado dentro de un conjunto que no sea consecutivo. Por ejempolo en una situación como la siguiente:

//En este caso IN es lo correcto
Select Nombre from Pacientes where Id IN (3000,4001,5002,6003,8004);

SQL-Server: Rendimiento de los operadores en el WHERE

Un tip rápido sobre SQL-Server. De cara a mejorar el rendimiento de las queries es importante considerar qué operadores dentro del WHERE tienen mejor rendimiento:

  • La mejor respuesta siempre la conseguiremos usando el operador =
  • Después vendrían los operadores >, >=, <, <=
  • Tras esos estaría el LIKE
  • Finalmente tendríamos con el peor rendimiento el <> o los operadores !=, !>,!< que no forman parte de la especificación de TSQL.

Por eso recuerda que es importante construir las consultas de forma correcta para usarlos de la forma más optimizada posible.

 

Acceder a los atributos data de HTML5 desde javascript

Si eres lector habitual de este blog recordarás que no hace mucho vimos cómo hacer esto con jQuery. Vamos ahora a ver cómo hacerlo con javascript a pelo, sin tirar de esas librerías. Repitamos los mismos ejemplos pero sólo con javascript:

<div id='fruta' data-fruta='fresa'></div>

En el div con Idfruta” vamos a guardar un dato: que es una fresa (mismo ejemplo que en artículo anterior). ¿Cómo accedo a este valor usando javascript?

//opción A. A lo bruto
//funciona, pero no es elegante
window.alert(document.getElementById("fruta").getAttribute('data-fruta'));
//opción B. La buena
window.alert(document.getElementById("fruta").dataset.fruta);

Ahí tienes dos ejemplos en los que hacemos un alert() de los datos guardados en el atributo data. El primero, usando getAttribute(), en teoría es la opción «bruta» ya que en principio debería accederse a estos datos como en el segundo ejemplo, que se supone que sería el método correcto. El problema es que el acceso a dataset no está bien implementado en todos los navegadores, así que la opción de usar getAttribute() hoy por hoy, aunque no sea la correcta en la teoría, es la funcional.

¿Y cómo queda el tema de los guiones que habíamos visto en el ejemplo en jQuery? Bueno. Si usamos getAttribute() ponemos el nombre del atributo tal cual, si usamos dataset hacemos como en jQuery y quitamos los guiones (y el prefijo data) usando también notación camelCase:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
//con getAttribtue
window.alert(document.getElementById("fruta").getAttribute("data-fruta-oferta"));
//mediante dataset
window.alert(document.getElementById("fruta").dataset.frutaOferta);
</script>

Operadores de incremento y decremento en javascript

En javascript disponemos del operador aritmético de decremento y del operador de incremento ++. El primero resta uno al valor de la variable sobre la que lo apliquemos y el segundo añade uno. Esto en principio no requiere más explicación, el único intríngulis con estos operadores es la posición en la que los usamos,ya que no funcionan igual si van antes de la variable que si van después:

  • Si lo ponemos como prefijo, antes de la variable, entonces incrementa el valor de la variable y luego lo devuelve.
  • Si lo ponemos como sufijo, después de la variable, entonces devuelve el valor de esta y luego la incrementa.

Esto con un ejemplo se entiende mucho mejor. Veamos el incremento:

x=3;
y=++x;
//En este caso tanto x como y valdrían 4
x=3;
y=x++;
//En este caso x vale 3 e y vale 4

Con el decremento es lo mismo:

x=3;
y=--x;
//En este caso tanto x como y valdrían 2
x=3;
y=x--;
//En este caso x vale 3 e y vale 2