Lowercase y Uppercase no son suficientes

Lowercase y Uppercase no son suficientes

Javascript es un lenguaje muy potente y versátil, nos permite expandir las posibilidades de uso al máximo de nuestras necesidades y creatividad. Muchas veces las funciones de Lowercase o Uppercase no son suficientes a la hora de formatear contenido, cuando todo está en mayúsculas y necesito que tenga formato de título, es decir, la primera letra en mayúscula.

Todos los objetos en JavaScript tienen una propiedad especial llamada prototype que es una referencia a otro objeto simulando una herencia (recordemos que en JavaScript no existe la herencia basada en clases), si queremos agregar métodos o propiedades a un objeto podemos hacerlo mediante el prototype, esto es muy útil para encapsular y reutilizar el código, dando la posibilidad de adaptar tus códigos al diseño orientada a objetos.

Ahora volviendo un poco al propósito de este Post, cuando necesitamos usar un Title Case para que cada palabra comience con mayúscula, este método fue creado precisamente para solucionar este problema.

A continuación les dejo una solucion para javascript de Title Case.

Si quieres que sea una función nativa de String podríamos agregarlo en prototype:

Si probamos la función anterior tendremos:

¿Donde más podemos usarlo?

Esta solución puede ser nuestro mejor aliado si tenemos un poco de ingenio. Podríamos aplicarlo en Handlebars.js, un motor de plantillas muy popular, potente y fácil de utilizar separando el diseño HTML del resto de tu Javascript, para así escribir código mucho más limpio. Este motor de plantillas permite crear o customizar funciones por medio de helpers.

Podemos registrar un helper en Handlebars.js que permita aplicar el método aprendido más arriba:

Si probamos el helper declarado anteriormente tendremos:

¿Sabes de algún otro lugar donde las funciones de Lowercase o Uppercase no sean suficientes y necesitas usar un formato de Título?

Espero les sea tan útil como a mi.

¡Hasta un próximo post!

Configuración esencial de Grunt

Hace algunos años atrás un desarrollo requería añadir en nuestro proyecto de producción muchísimas hojas de estilo, scripts en javascript, e imágenes de diferentes tamaños. Esta cantidad de requests consumen muchísimo tiempo de carga en el servidor y de descarga del lado del browser, además, Google comenzó a penalizar en su Page Rank las páginas no optimizadas.

Luego se comenzó a escribir todo en 1 solo archivo CSS o JS, solucionando la cantidad de requests y obteniendo archivos enormes que hacían sumamente tedioso el mantenimiento de estos archivos.

Al pasar del tiempo y buscando soluciones, se comenzó a minificar los archivos para mantener todo en 1 solo archivo y optimizando el tamaño de los mismos, de igual forma no se lograba solucionar la facilidad de mantenimiento.

Hasta que finalmente comenzaron a salir a la luz los preprocesadores como LESS, SASS, COFFEE SCRIPTS entre otros, estos permiten optimizar los estilos y scripts para luego ser compilados y obtener archivos minificados, optimizados y de fácil mantenimiento en el tiempo.

Pero surge otro problema, hacer esta compilación y minificación constantemente consume muchísimo tiempo y durante el tiempo de desarrollo se convierte en algo tedioso de realizar por ser una tarea repetitiva.

Por ello se buscó optimizar y automatizar estas tareas, llegando asi GRUNT a solucionar esta labor, empleando menos horas de trabajo en tareas repetitivas como minificación, compilación, pruebas unitarias, validaciones, etc. Utilizando NodeJS como motor de compilación, y un archivo de configuración, es capaz de realizar múltiples tareas en paralelo y de forma asíncrona, al igual que añadir nuevas mejoras y plugins de forma facil ya que basicamente es Javascript.

Las configuraciones son variadas y dependen del desarrollo en el cual te encuentres, a continuación te dejo una configuración básica para cualquier proyecto.

Y por supuesto, si le sacaste provecho a este post, ¡no olvides compartirlo en tus redes sociales!

¡Hasta un próximo post!

Actualizar parametros en un URL QueryString

Esto no es mas que la forma rápida de actualizar un valor en un  URL QueryString.

¡Hasta un próximo post!

Raw output Handlebars.js

Muchas veces necesitamos colocar en HandlebarsJS caracteres especiales que no deben ser parseados o convertidos. Para esto hay una solución muy sencilla, y lo dejo aquí como un recordatorio que esto existe.

Para lograr conseguir este raw HTML output simplemente debes usar triple llave {{{ }}}

Y todo el contenido HTML no interpretado por el navegador se irá.

¡Hasta un próximo post!

Usando Bower en Grunt

Luego de ver varias tareas de grunt y tantas herramientas adicionales que se deben instalar, configurar, inclusive implementar de otra forma, encuentro que esto es algo común que debería acompañarse dentro de las tareas repetidas en grunt. Este sencillo snippet busca aprovechar las bondades y fácil configuración junto con los beneficios de trabajar con Bower.

Esto usa el archivo estándar .bowerrc y la configuración de bower.json para la lista de dependencias a instalar.

¡Hasta un próximo post!

Custom Event Listeners Javascript

custom event listeners javascript

You can custom event listeners javascript and use fireEvent on IE, and w3c’s dispatchEvent on most other browsers. To create the custom event you want to fire, and you can use listeners either createEvent or createEventObject depending on the browser.

custom event listeners javascript

Here is a self-explanatory piece of code (from prototype) that fires an event data available on an element:

And adding the event listener

Acortador De Direcciones Web Con node.js

Este post lo encontré muy interesante y decidí compartirlo con ustedes. Es un acortador de direcciones hecho en Node.js y mongoDB.

Para acortar una dirección usando la API tenemos que hacer un POST a http://zx8.in/api/shorten especificando en el campo URL la que queremos acortar:

Y obtendremos la respuesta en formato JSON:

El campo ‘already’ indica si nuestra url original ya había sido acortada previamente y por tanto ya estaba en la base de datos.

Para obtener estadísticas de una url corta, igualmente hacemos POST a la siguiente API: http://zx8.in/api/stats. Esta vez en el campo URL hemos de indicar la url corta.

Y obtendremos el siguiente código JSON:

Espero te sea útil.

Fuente: daniel-munoz.com

Console not defined en RequireJS

En esos momentos cuando estas programando con RequireJS + BackboneJs y necesitas console.log para debug en firefox o chrome y te das cuenta que RequireJS no permite variables globales.

Para ello debes incluir console como una libreria de Javascript

Paso 1: Crea un archivo llamado console.js y pega esto:

Paso 2: Te vas a tu archivo main.js y añades la siguiente linea

Paso 3: En el mismo archivo main.js un poco mas abajo debes añadir

Listo, ahora puedes añadir console en cualquier parte como una libreria mas.

Ejemplo:

Si te ha gustado este post o tienes problemas agregando console a tu proyecto, puedes escribirme tu comentario y te respondo lo antes posible.