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!

Generar QR Code con Google Charts

Generar QR Code con Google Charts

Como desarrolladores sabemos que los códigos QR permiten interactuar con el mundo a través de un teléfono inteligente, podemos generar QR Code con Google Charts muy fácilmente.

Hoy en día, los códigos QR se pueden ver en folletos, carteles, revistas, etc. Permiten de una forma rápida y sencilla de almacenar información que luego puede ser interpretada por nuestro teléfono inteligente.

Al escanear un código QR utilizando el teléfono inteligente, se obtiene un acceso inmediato a su contenido. El lector de código QR puede realizar una acción, como abrir el navegador web para una URL específica, abrir una aplicación, desbloquear una bicicleta, realizar un pago y una infinidad de acciones posibles.

Depende del lenguaje hay dependencias que te permiten manejar la generación de estos códigos, el problema muchas veces es que para poder implementar algo tan sencillo, requerimos de la instalación de varios repositorios, dependencias, paquetes, configuraciones y tener habilitado nuestro servidor para poder generarlos. ¿Qué problema no?

Bueno, buscando una forma de poder generar fácilmente y evitando toda la configuración anterior, encontré una solución donde podemos generar QR Code con Google Charts fácilmente.

Tenemos una URL http://chart.apis.google.com/chart la cual debemos pasarle por query params los siguientes argumentos:

  • cht: Indica el tipo de gráfico que queremos mostrar, para nuestro caso sería qr.
  • chl: Es el contenido en String que queremos como contenido de nuestro código QR.
  • chs: Es el tamaño width, height qué deseamos para nuestro código.

Todos los argumentos son requeridos así que no olvides enviarlos todos.

Este sería un ejemplo de QR que apunta a este mismo post.

Si te gustaría conocer más sobre los argumentos que acepta esta api puedes revisarlo en la documentación de Google Charts

Si te ha parecido útil, compártelo con tus amigos en tus redes sociales.

¡Hasta un próximo post!

Nuevo Theme para Febrero 2016

Theme para Febrero

Este blog comenzó como una recopilación de aprendizajes a lo largo de mi carrera profesional, compartiendo cada experiencia vivida, celebrando las cosas buenas y como las que no han sido tan buenas también. Muchos themes han ido y venido, la mayoría no han sido mis favoritos y es hora de cambiar las cosas, por eso he decidido que debo tener un nuevo theme para febrero 2016.

Ya en publicaciones anteriores había comentado que estoy buscando un nuevo theme para mi website, el que estaba nunca me gustó del todo, pero había que salir con algo, aplicando la teoría del Producto mínimo viable
(MVP) nos dice que:

Un producto mínimo viable tiene sólo las características básicas suficientes para lanzar el producto, y no más.

Y por eso decidí comenzar con lo que tenía para ese entonces, pero desde hace un tiempo para acá he seguido de cerca lo fácil que es leer en medium.com por su estilo de diseño, fuente, facilidad de lectura y muchas cosas más, me inspiró a cambiar de theme.

Luego de tanto buscar finalmente me decidí a probar este theme (que está instalado actualmente), pensando que sería solo el nuevo Theme para Febrero 2016, vamos a ver cómo influye esto en visitas, calidad del contenido, comentarios y todo el feedback de todos los lectores, ustedes serán los primeros influenciadores para mantener este Theme o si busco otro para marzo. WOW ya vamos para marzo…

Bueno, espero que les guste este cambio de diseño en el blog, yo lo estoy disfrutando un montón.

¡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!

Tamaño estandar de banners

Este es un artículo algo viejo pero puede servir de mucho como un histórico. Cual es o fue el tamaño estándar de un banner. La publicidad en Internet ha cambiado mucho desde aquellos tiempos en los que un banner estático invadía la pantalla.

¡Hasta un próximo post!