Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Javascript: Arrow functions

Arrow function es otra de las novedades de Ecma Script 6 y para quienes usamos C# nos va a resultar familiar la sintaxis.

Básicamente nos permite expresar cualquier función usando una flecha ( => ) hasta ahora podíamos hacer esto:

 

[1,2,3,4,5,6,7,8].filter(function(item) { 
  return item > 4 ;
});

con ES6 se puede hacer así:

[1,2,3,4,5,6,7,8].filter( item => { 
  return item > 4;
});

En definitiva no es más que una forma corta de declarar una función anónima.

Parámetros

Con respecto a los parámetros podemos hacer varias cosas dependiendo de si tenemos parámetros, o cuántos tengamos uno o muchos, por ejemplo.

cuando no tenémos  parámetros podemos poner los dos paréntesis o un guión bajo.

var a = () => { console.log("hola");}
var a = _ => { console.log("hola”);}

Cuando tenemos un único parámetro podemos usar o no los paréntesis

var a = (y) => { return y };
var a = y => { return y };

En cuando a varios parámetros siempre usamos los paréntesis

var a = (x,y) => { return x + y;}

Retorno implícito

En ciertas circunstancias las arrow functions crean el return por nosotros, es decir, no siempre es requerido utilizar return

var a = (x, y) => x + y;

Es equivalente a

var a = (x, y)=> { return x + y; }

En resultado

Usando arrow functions el primer ejemplo quedaría así:

[1,2,3,4,5,6,7,8].filter(item => item > 4)

Nos leemos.

Tips de Javascript: Lograr que JSON.stringify se comporte a nuestro gusto

Hace ya bastante tiempo que contamos con JSON.parse() y JSON.stringify() para des-serializar y serializar objetos, lo que hace este último es generar una representación JSON de nuestro objeto, al recorrer todas las propiedades del objeto y sus propiedades anidades también, algo así:

image

Esto está muy bien, pero existen ocasiones en las que no queremos esto, por diferentes motivos: no queremos serializar todo, queremos que tenga otra forma, etc. por supuesto que podemos siempre echar mano de un método propio y no usar JSON.stringify, pero si quien consume nuestro código no sabe de la situación es probable que termine haciéndolo, entonces, ¿podemos modificar este comportamiento?

Modificando el comportamiento de JSON.stringify

Sí, existe una forma estándar de decirle al navegador que en lugar de comportarse como lo hace siempre haga exactamente lo que nosotros queremos cuando se usa JSON.stringify, y es tan simple como escribir nuestro propio método toJSON, así algo así;

image

Y magia, vemos que ahora utilizando la función estándar del navegador obtenemos justo lo que queremos.

Nos leemos.

¿Cómo obtengo la geolocalización del browser?

Los hemos visto muchas veces, entramos a un sitio y el navegador no dice que el sitio en custión quiere obtener nuestra ubicación, ¿pero cómo lo hace?

Es muy simple

Desde hace tiempo que los navegadores traen incluído un objeto dentro navigator llamado geolocation que nos permite consultar la ubicación

navigator.geolocation.getCurrentPosition(function(pos){
	console.log(pos);
});

El único tema es que el navegador por defecto nos advierte que el sitio en cuestión quiere saber nuestra ubicación (lo cual, en principio, no está mal)

 

image

Complicando un poco las cosas

Podeoms hacer un poco más que obtener la position, si nos referimos a la documentación del método getCurrentPosition vemos que acepta 3 parámetros, además del callback que nos devuelve la posicion tenemos otros para errores y un objeto para indicar algunos detalles, como el timeout y la precisión.

function getLocation() {
	navigator.geolocation.getCurrentPosition(function(position){
		console.log(position);
	}, function(error){
		console.log(error);
	}, 
	{
		enableHighAccuracy: true,
		timeout: 5000
	});
}

 

image

Un poco más bonito, en caso de que la obtención de la posición tome más tiempo llama al callback de error

PositionError { code: 3, message: "Position acquisition timed out" }

 

No nos queda más que usar la posición para hacer nuestras cosas.

Nos leemos.

Sacando el jugo a console.log en el navegador web

La buena consola del navegador (esa que llamamos al hacer dumps de variables por ejemplo) hace algunas cosas que todos sabemos, como el famoso console.log(“algo”); sin embargo con el correr del tiempo se fueron agregando funcionalidades que no todos conocemos/usamos, y algunas son realmente interesantes.

console.log y más allá

Todos hemos usado console.log, bien en lo que se refiere a visualizar texto en realidad tenemos 4 métodos con los que lo podemos hacer:

  • console.log()
  • console.linfo()
  • console.warn()
  • console.error()

Uso básico

El uso más simple es pasar como parámetro un objeto o variable (o texto, claro) y el navegador nos mostrará la representación del objeto en forma de string.

image

Nótese que el navegador (Chrome en este caso) muestra un ícono diferente dependiendo del método usado, de hecho el último que hicismo con error genera un error en la consola y el warn una adverencia

image

También podemos pasar texto junto con el objeto

image

Sustituciones de strings

Existe la posiblidad de usar patrones de string para que la cadena haga reemplazos, para ser más claro mejor una tabla

String de sustitución Descripción
%o o %O Muestra un objeto y permite abrir el detalle
%d o %i Mustra un número,permite formato, ej. %.2d
%s Muestra un string
%f Muestra un número de punto flotante, soporta formato

 

Gracias al soprote de sustitución de string podemos hacer cosas como ésta en Firefox:

image

Cool, hay muchas otras cosas que se puden hacer en console, pero lo dejamos para más adelante.

Nota: no todos los navegadores dan el mismo resulado.

Nos leemos.

Firebug Lite: Firebug en todos lados, incluso en Edge y Chrome.

Tal vez nuestro navegador principal sea Firefox o no, pero nos gusta más el modo en que Firebug funciona, bueno existe la posiblidad de tener una versión reducida de Firebug en los otros navegadores.

Firebug Lite.

La gente de Mozilla ha desarrollado Firebug Lite, una versión reducida de Firebug que nos permite contar con varias de las características de éste en cualquier navegador.

Instalación.

Existe en forma de plugin para Chrome o directamente agregando la referencia como script en nuestra página.

Usando Firebug Lite en Microsoft Edge.

Agregamos un tag script a nuestra pagina y listo, no queda más que presionar F12 para ver el mismo look and feel de Firebug.

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

 

image

Lo primero que notamos es que tenemos la solapa “console” y es totalmente funcional.

image

Inspección y modificación del DOM

Sí, podemos hacer “inspect” y ver las propiedades del elemento en el que estamos parados y modificar sus atributos.

image

Extensiones

Sí, también se puden crear extensiones para agregar a Firebug lite.

Usan un wrapper similiar a las extensiones de Firebug.

Firebug.extend(function(FBL) { with (FBL) {

// extension code

}});

 

Hay una lista con todas las últimas funcionalidades soportadas acá

¿Qué no podemos hacer?

Hay cosas importantes que no podemos hacer como:

  • Observar los mensajes en la red
  • hacer debug del código

ya que muchos de estas caracteristicas están fuertemente asociadas al funcionamiento interno de cada navegador. Hay una  lista completa acá.

 

Nos leemos.