JQuery se actualiza su numero de versión

Los desarrolladores de jQuery anunciaron la salida de una nueva versión de la librería de JavaScript más usada jQuery, y con ella una nueva nomenclatura para acompañar las nuevas versiones.

Nota original en ingles: http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/

Al momento de escribir esta nota tenemos disponible dos versiones estables jQuery 1.11.1 que es compatible con la gran mayoria de exploradores, y jQuery 2.1.1 que eliminó el soporte de exploradores antiguos como IE 8, Safari 5 y Opera 12.

Pero con la nueva definiciones vamos a tener se renombra la libreria de la siguiente manera:

jQuery 1.11.1  >  jQuery Compat 3

jQuery 2.1.1 > jQuery 3

y la definición permanece de la misma manera, esta es solo una forma de adaptarse a las nuevas convenciones de versionado y aclarar un poco la mayoria de inconvenientes que se han presentado con el número de la versión usada.

Crear sintetizadores usando Web Audio API (Parte 1)

El Web Audi API representa el conjunto de librerías con las que se pueden reproducir sonidos, o inclusive crearlos usando un oscilador por código.

Antes de mostrar como es que se crean los sintetizadores es importante ver algunos de los aspectos básicos de esta API, y para eso se encuentra esta genial entrada en html5rocks donde se muestran las funcionalidades básicas.

http://www.html5rocks.com/en/tutorials/webaudio/intro/

Antes de comenzar recomiendo leer también este genial articulo en el que se explican las escalas musicales y sus frecuencias, esto es una buena base matemática y musical para la construcción del sintetizador:

http://www.lpi.tel.uva.es/~nacho/docencia/ing_ond_1/trabajos_05_06/io2/public_html/escalas.html

 

escala5

Este es un gráfico tomado de la pagina, que representa cada una de las frecuencias para cada una de las escalas, para el sintetizador que vamos a realizar tomaremos las siete primeras notas de la escala de sol:

Nota Frecuencia
Do 261,63
Re 293,66
Mi 329,63
Fa 349,23
Sol 392,00
La 440,00
Si 493,88

Comencemos con el código, lo primero es validar que el dispositivo sea compatible con el Web Audio API.

var context;
window.addEventListener('load', init, false);
function init() {
  try {
    // Fix up for prefixing
    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    context = new AudioContext();
    alert('Tienes acceso al Web Audio API');
  }
  catch(e) {
    alert('Web Audio API no es soportado por el explorador.');
  }
}

Para comenzar se crea la variable “context” en la que se instancia el objeto de audio.

window.AudioContext = window.AudioContext||window.webkitAudioContext;

Esta linea es un poco mas interesante se inicia “window.audioContext” si está disponible, o en caso contrario se intenta asignar su representante de webkit que corresponde a Chrome, Safari y similares.

context = new AudioContext();

Se crea el objeto del contexto de audio.

Listo ya tenemos nuestro contexto de audio, con el que podemos trabajar ahora intentemos reproducir un sonido.

var context;
var osc;

window.addEventListener('load', init, false);

// definicion de variables
var mensajes = document.getElementById('divMensajes');

// Eventos de los botones
document.getElementById('btnReproducir').addEventListener('click',function(){
  reproducirFrecuencia();
});

document.getElementById('btnDetener').addEventListener('click',function(){
  detenerFrecuencia();
});

//Funcion de inicio
function init() {  
  try {
    // Fix para el inicio del contexto de audio
    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    context = new AudioContext();
    
    mensajes.innerHTML = 'Web Audio API es sorportado';
  }
  catch(e) {
    mensajes.innerHTML = ('Web Audio API no es soportado por el explorador.');
  }
}

//funciones de control de sonido
function reproducirFrecuencia()
{
  //detiene el sonido si se estaba reproduciendo
  if(osc)
  {
    osc.stop(0);
  }

  // Crear Oscilador
  osc = context.createOscillator();
  osc.frequency.value = 261.63;
  osc.connect(context.destination);
  
  //Inicia la reproduccion de la frecuencia
  osc.start(0);
}

function detenerFrecuencia()
{
  // Detiene la reproduccion de la frecuencia
  osc.stop(0);
}

Ahora expliquemos las adiciones relevantes al trabajo con el oscilador.

var osc;

Lo primero es crear la variable de manera global ya que la usaremos con visibilidad dentro de toda la aplicación.

osc = context.createOscillator();

Se inicia el oscilador a partir del contexto del Web Audio API.

osc.frequency.value = 261.63;

 

Se asigna la frecuencia con la que el oscilador producirá el sonido, como te puedes dar cuenta el 261.63 corresponde a la nota de Sol expuesta en el sintetizador de la parte superior.

osc.connect(context.destination);

Se conecta el oscilador con el contexto en el cual se emitirá el sonido.

Y listo, de esta manera estamos generando un sonido a partir de un oscilador usando únicamente JavaScript, sin ningún tipo de complemento externo.

Si quieres ver el código funcionando puedes ir al siguiente codepen:

http://codepen.io/ismaproco/pen/fpwdG?editors=101

Pronto en la parte 2, completaremos el codigo para tener un mini sintetizador emitiendo los sonidos de las frecuencias especificadas.

Sublime Text 3 se ha actualizado

Sublime Text [3] http://www.sublimetext.com/ es uno de los editores que mas se han hecho querer en los últimos años, esto se ha debido tal vez a que se encuentra disponible para la mayoría de sistemas operativos, a que es muy rápido y sencillo, y que además tiene una comunidad inmensa creando plugins para él.

Pero por algunos inconvenientes su desarrollo se estancó y este año no se había presentado ninguna actualización, pero el día de hoy han sorprendido con una buena cantidad de cambios.

Son los siguientes:

  • Se agregaron iconos a la barra lateral
  • Se agregaron identificadores de carga en la barra lateral
  • La barra lateral recuerda los directorios que se expandieron
  • Mejorado el comportamiento cuando se cerraba una ventana con ctrl+w / cmd +w
  • Mejorada la lógica de colocado de comillas
  • La selección de grupos ahora es almacenada en la sesión
  • Agregada la configuración remember_full_screen (recordar pantalla completa)
  • Arreglado bloqueo que se producía cuando se pasaba del cursor parpadeante al solido.
  • Arreglado el cerrado del plugin_host
  • Arreglado el cerrado producido por la acción de “Goto Anything”  cuando se clonaban las vistas
  • Windows: Agregado ayudante de linea de comandos en subl.exe
  • OSX: Agregada entrada ‘New Window’ (nueva ventana) al dock menú.
  • Posix: Se usan los permisos correctos en la creación de nuevos archivos o directorios.
  • API: Se actualizó a Python 3.3.3

Es un buen conjunto de cambios para el editor que se encontraba un poco olvidado.

Puedes descargar la última versión del siguiente enlace: http://www.sublimetext.com/3

Ignorar cambios de archivos en repositorios de GIT

Git se ha convertido en uno de los mas importantes tipos de repositorios, principalmente por su carácter distribuido y de que tiene varias empresas detrás que le dan soporte, dentro de ellas Linux foundation, Github, BitBucket y muchas otras.

Lo que quiero compartir ahora es un valioso script que nos permite ignorar archivos con cambios de los cuales no deseamos hacer commit, de modo que pueden cambiar de forma local sin necesidad de subirlos al repositorio.

Y para ello solo es necesario ejecutar:

git update-index --assume-unchanged

Y cuando desees que el archivo vuelva a hacer parte del repositorio haces lo siguiente:

git update-index --no-assume-unchanged

Y de esa manera puedes ignorar ese tipo archivos sin necesidad de omitirlos por siempre.

Entrada basada en el siguiente artículo:

http://gitready.com/intermediate/2009/02/18/temporarily-ignoring-files.html

Convertir CSV a JSON usando JavaScript

Buscando alguna forma sencilla de hacer la labor de convertir un CSV a JSON muchas cosas salieron a flote, y no muchas de ella me convencieron, hasta que encontré a Papa Parse:

http://papaparse.com/

Esta excelente librería te permite de manera muy sencilla convertir archivos CSV ya sean strings, archivos o inclusive ubicaciones web en objetos JSON para ser usados, por medio de un sencillo llamado (Obviamente ocurren muchas mas cosas internamente durante el proceso).

Por ejemplo, como ellos colocan al principio de la página:

var results = Papa.parse(csv);

Y eso es todo lo que se necesita para convertirlo, sin mayor cantidad de problemas, y no solamente eso, también es muy versátil, ya que permite modificar el delimitador, manejo de errores y ademas convertir JSON devuelta a CSV de una manera igual de sencilla:

var csv  = Papa.unparse(jsonData);

 

Así que sin más puedes dar un vistazo a esta fantástica libreria.

Generar captura (screenshoot) de una URL con PhantomJS

PhantomJS es una aplicacion que tienen como objetivo facilitar la creación de pruebas, capturas de pantalla, automatización de scripts y monitoreo de red.

Son muchas cosas las que se pueden hacer, y de muchas maneras, por eso mismo en este momento quiero mostrar la generación de una captura de pantalla usando PhantomJS.

1. Primero debes instalar PhantomJS

La instalación es muy sencilla solo hay que descargar los compilados de la pagina, se encuentra disponible para Linux, Windows y Mac OS.
http://phantomjs.org/download.html

2. Voy a utilizar el documento de ejemplo de la pagina de PhantomJS, Que genera una imagen con el contenido de la pagina principal de github, para ello, crea un archivo con el nombre github.js con el siguiente contenido:

var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});

3.Ya solo queda ejecutar el PhantomJS con el archivo como parámetro:

phantomjs github.js

4. En el directorio donde ejecutaste el comando, ahora existe el archivo github.png con la captura de la página.

 

Minimizar el tiempo de carga de AngularJS

Si has usado AngularJS seguramente te has percatado del aumento de tiempo en que las páginas toman en cargar. Y se debe básicamente a los diferentes Resquests que se realizan al servidor para obtener cada uno de los scripts (css y JavaScript).
Zack Nelson ha construido una util guía para mejorar los tiempos de carga usando “Templates” y “RESTful resources
Puedes encontrar los detalles en la siguiente dirección.

https://medium.com/@_zaknelson/minimizing-initialization-time-in-angularjs-f8ae57e2cec3