Javascript

Snake game en JS En mi infancia me gustaba jugar al juego de Snake en un nokia. No pensé que algún día en el futuro podría hacer una “copia” del mismo. Claro que no es una réplica exacta y faltan muchas cosas, pero al menos funciona. Así que igual y a otra persona le sirve. Está escrito en javascript puro, utiliza imágenes para los sprites; por lo que puedes personalizarlos. Se adapta a la pantalla completa y se juega con las flechas del teclado. ...

Introducción PouchDB es una base de datos que se sincroniza. Permite trabajar offline y online, con una sincronización de la cual no tenemos que encargarnos nosotros. Esto viene perfecto para desarrollar sistemas que trabajan tanto con y sin internet. Es importante notar que si no queremos la sincronización, no pasa nada. Por lo que no estamos obligados a sincronizar ningún sólo dato. Además, la base de datos se sincroniza entre todos los dispositivos. Esto es algo muy genial, aunque claro, tampoco es tan poderosa como MySQL, MS SQL Server, etcétera. ...

Introducción Antes que nada, quiero decir que este macro está basado en este post. Simplemente me di a la tarea de modificarlo un poco y explicar su instalación y funcionamiento en español. También cabe mencionar que este macro funciona como un encanto en Sublime Text 3, pero el autor original lo probó en ST2 y también funcionaba. Todo es cuestión de probar. Una vez dicho eso, comencemos. ¿Qué hace este macro? Si eres un desarrollador web de Javascript, te habrás encontrado en algún momento de tu vida con que tienes que hacer un console.log para escribir mensajes en la consola y depurar algunas cosas. ...

Introducción angular.copy es una función que trae el framework AngularJS. Funciona para, como su nombre lo indica, copiar variables. Cada que utilizamos angular.copy, ésta función devuelve una nueva copia exacta del objeto que le pasamos, pero sin mantener la referencia en el objeto original. Así, aunque esta nueva copia sufra cambios, el original no se verá afectado. Y lo mismo pasa si el original sufre cambios Demostración sin angular.copy Para explicar mejor el funcionamiento, hagamos un pequeño ejemplo que guarde el nombre y la edad de las mascotas en un arreglo. Y luego, que lo dibuje en una tabla. ...

Introducción Recientemente hice una entrada sobre la api de binbox.io en Python y dije que escribiría un poco sobre cómo consumirla pero ahora con Javascript nativo, el cual se puede ejecutar en el navegador. Incluyendo scripts Esto es muy, muy simple. Creamos un documento HTML nuevo e incluimos el script de binbox.io al final. Dicho script se puede encontrar en esta ruta. Esto proporcionará un objeto global el cual contiene una clase que podemos instanciar. ...

Introducción Siempre vamos a necesitar imprimir en la mayoría de aplicaciones que desarrollemos, independientemente del lenguaje en el que lo hagamos. En este caso veremos cómo imprimir con HTML y Javascript, conservando los estilos y obteniendo una impresión que es exactamente igual a lo que vemos en pantalla. Precisamente esta mañana tuve que investigar un método fácil, rápido y viable para imprimir contenedores, y aquí traigo los resultados. Nota: para investigar la mayoría de lo que expongo aquí tomé como referencia la maravillosa respuesta a esta pregunta de StackOverflow ...

Introducción Independientemente de qué tanto sepamos Javascript, en algún momento alguien nos dijo o descubrimos que en Javascript podemos hacer dos cosas un poco raras: Declarar variables sin la palabra reservada var No poner punto y coma al final de cada sentencia Cada una de estas cosas tiene su explicación. Y deberíamos omitir siempre ambas. Declarar variables sin var Comenzamos con declarar variables sin var. Pues bien, recordemos que para declarar una variable normal usamos lo siguiente: ...

Introducción En este post daré una pequeña introducción a la creación de gráficas de barras usando el poderoso y superheroico framework AngularJS. Usaremos también la librería llamada ChartJS y otra llamada angular-chart. Lo que hace ésta última es “pegar” o juntar a las dos primeras. ChartJS puede ser usado sin ningún framework; es decir, podemos hacerlo con simple javascript, pero no queremos eso ahora. AngularJS, como todos lo sabemos, refresca la vista cuando detecta que algo en el controlador cambió, pero como ChartJS no tiene que ver nada con él, las gráficas no se dibujarán de nuevo cuando algún dato cambie. Aquí es en donde viene angular-chart que, como lo dije, funciona como un pegamento y hace que trabajemos con gráficas in the angular way. ...

Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí. Nunca imaginé que algún día se podría tomar una foto y guardarla en un servidor usando código nativo de Javascript y la cámara del dispositivo. Eso abre un mundo de posibilidades que permite a nuestras aplicaciones tener más características. Hoy mostraré aquí un pequeño tutorial que nos permitirá tomar una simple foto y subirla a un servidor que tendrá PHP. No se usará ningún framework, ni de Javascript ni de PHP. Nota: debido a que vamos a tomar una foto con la cámara, debemos servir nuestra app en localhost (para hacer pruebas locales) o en un servidor con https. Es decir, nuestro código debe estar en un servidor con un certificado SSL, o corriendo en nuestra máquina. Si te gusta programar en Python, te invito a leer cómo tomar una foto de la cámara web, utilizando Python. ...

Si tenemos un arreglo con números dentro de él y queremos calcular el promedio de dichos valores podemos usar algo así: var suma = 0; for(var x = 0; x < arreglo.length; x++){ suma += arreglo[x]; } var promedio = suma / arreglo.length; Lo que hoy explicaré es una función de los arreglos en dicho lenguaje llamada reduce, dicho procedimiento no necesita ningún ciclo for y es un poco más elegante. ...