Una sinfonía en C#

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

¿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.

Novedades de C#7

Vamos a ver un resumen de algunas de la novedades que trae C#7.

Variable de salida:

Hasta hoy si queríamos usar una variable de salida (out) por ejemplo en un TryParse, hacíamos así:

int i = 0;
string s = "10";

if(int.TryParse(s, out i)) {
  //hacer algo
}

No está mal, una vez confirmado el if podemos usar el valor en i, con C#7 podemos hacerlo de una manera más resumida

string s = "10";

if(int.TryParse(s, out int i)) {
  //hacer algo
}

Nos ahorramos la declaración de i por fuera del if, sin embargo dentro del if tenemos acceso a i.

Pattern matching

Esta característica es mucho más potente, nos permite hacer varias cosas, vamos a ver una de las que más me llama la atención, usar tipos en los switch

switch(shape)
{
    case Circle c:
        WriteLine($"circle with radius {c.Radius}");
        break;
    case Rectangle s when (s.Length == s.Height):
        WriteLine($"{s.Length} x {s.Height} square");
        break;
    case Rectangle r:
        WriteLine($"{r.Length} x {r.Height} rectangle");
        break;
    default:
        WriteLine("");
        break;
    case null:
        throw new ArgumentNullException(nameof(shape));
}

Como vemos podemos hacer un switch y poner tipos en los case, incluso con condiciones dentro de los mismos, obviamete las condiciones se evalúan solo si el tipo coincide, genial.

Notemos que incluso se evalúa null como un tipo, no nos confundamos a pesar de que el default está antes del null siempre se evalúa defaul en último lugar.

Sin llegar a usar un case podemos hacer otras cosas interesantes como ésta

if ((shape is Rectangle s) && s.Width == s.Length)  

Básicamente evaluamos si shape es del tipo Rectangle y si lo es asignamos el resultado de la igualación de tipos a la variable s, nuevamente, el scope de la variable es el if. Muy bueno.

Y hay más

Hay otras funcionalidades que se agregan a C# y otras que están planificadas, hay una buena lista acá.

Seguramente iremos viendo más en la medida que estén disponibles.

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.

¿Cómo verificar la integridad de los scripts usando subresource integrity?

Los CDN nos permiten tomar recursos como archivos Javascript de terceros (léase frameworks o librerías) sin necesidad de hostearlos nosotros y delegando esa reponsabilidad en servidores más robustos, con replicación, mejor capacidad y con un potencial uso de cache, sin embargo esto podría ser riesgoso.

Por ejemplo si el CDN es hackeado o de alguna manera las peticiones redireccionadas podemos estar potencialmente en peligro de cargar archivos maliciosos en nuestro sitio web, por suerte hay una manera de evitarlo.

Integridad de subrecursos

La integridad de subrecursos (SRI) es una característica de seguridad que permite a los navegadores verificar que un recurso recuperado (de un CDN o cualquier otro origen) no ha sido manipulado permitiendo, para ello, espeficar un hash que el navegador utilizará.

Sencillamente podemos indicar en nuestro tag script un hash calculado con algún algorítmo conocido para que el navegador verifique la integridad del recurso que se intenta cargar, veamos el caso de jQuery por ejemplo:

Llamada “normal” al CDN de jQuery

<script src="https://code.jquery.com/jquery-3.1.0.min.js">

 

El problema acá es que no estamos verificando que el archivo jquery-3-1-0-min.js sea lo que esperamos,

Llamada verificando la integridad del recurso

La forma de agregar la verficación de integridad sería la siguiente:

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

Nótese que agregamos el atributo “integrity” con el valor que indica el hash para verificar la integridad del archivo.

Si intentamos carga el recurso y el hash es incorrecto pasa esto:

image

¿Cómo podemos calcular el hash?

Bien, hay varias formas,:

Y listo, basante simple, más información sobre SRI en al sitio de Mozilla.

Nos leemos.