programación

Recordatorio a validar tu código

Respecto a escribir pruebas para tu código (TDD y otros) y validarlo (Integration Testing):

“Entonces, por supuesto, hazlo de otra manera si eso es lo que mantiene tu bote a flote. Pero sé honesto contigo mismo sobre tus razones [de no tener pruebas de validación]. Eventualmente, sea cual sea tu justificación, tu código revelará la historia real.”

Tomado del cierre del artículo Don’t Want to TDD? Don’t TDD. Just Be Honest About Your Reasons.

free topic

Puerto Rico y el Huracán María

Para información de todos aquellos que de alguna forma visitan esta publicación quiero informales que mi país ha sufrido y continua sufriendo la devastación producida por el poderoso huracán, María. A pesar de todo lo publicado en los medios noticiosos internacionales, les puedo notificar de primera mano que Puerto Rico se levanta pero no al ritmo que se espera. Son muchas las situaciones que estamos viviendo (basta con googlear Puerto Rico) y aunque poco a poco nos movemos hacia cierta normalidad el camino no luce muy alentador. Hemos tenido que, por momentos, dejar de escuchar las noticias para poder recibir un poco de descanso ante la ola de situaciones embarazosas que no aportan al bienestar de nuestro país (no abundaré para no entrar en fatiga). Pero dentro de todo lo negativo que surge de este tipo de situaciones, y que se complica debido a nuestra peculiar situación de país, también se confirma que nosotros los boricuas somos una nación con un gran corazón y de espíritu inquebrantable. Desde el que lleva agua a lo más recóndito de nuestra isla hasta aquel que ha tenido de abandonar su tierra en busca de mejores oportunidades en el extranjero, todos y cada uno de nosotros hemos tenido que ajustarnos a nuestro nuevo país. Siempre hay sus excepciones – y a todos esos que han sido estorbo – estoy seguro que su factura llegará. No será fácil reconstruir nuestra infraestructura, no será fácil enfrentar nuestra quebrantanda economía, no será fácil mantenerse en pie de lucha, pero de esta salimos airosos, cueste lo que cueste nos tome lo que nos tenga que tomar. La voluntad está presente. 

programación

Mejor manejo de paquetes en npm

npm es de esas herramientas que una vez usas te das cuenta que has creado una dependencia inmediata. Si eres un JavaScript developer el valor que provee es impresionante. Así mismo podemos perder el hilo de los paquetes que hayamos instalado o estén “fuera de moda”. Hay tres instrucciones que nos pueden proveer luz y control al proceso de manejo de paquetes.

  • list
  • outdated
  • prune

Consejo, nunca actualizes ciegamente las dependencias en tu proyecto. Para saber cuales son los paquetes que hemos instalado de forma global usamos npm list -g --depth=0. Si solo deseamos ver los paquetes de nuestro proyecto omitimos g.

Si deseas discriminar entre los paquetes en producción y development usas --prod y --dev respectivamente.

Ahora viene lo interesante. Para poder visualizar el estatus de las versiones de los paquetes, utilizas npm outdated. Esta opción generará un hermoso listado que indica el nombre de la dependencia, que versión está instalada, cual es la versión que se desea según la configuración de la versión semántica y cuál es la versión más reciente disponible.

Y por último npm prune para limpiar la carpeta de paquetes node_modules. Si le añades --production los paquetes que estén marcados como paquetes de desarrollo serán removidos.

¿Tienes algún consejo para el manejo de paquetes en npm? Déjamelo saber en la sección de comentarios.

programación

Los sabores de Vue.js – Standalone y Runtime-only

Anteriormente hemos hablado como instalar Vue.js para crear nuestras aplicaciones web. A continuación, me gustaría tocar el tema de como funcionan los dos sabores disponibles para crear nuestros componentes y por ende nuestra aplicación. En la documentación de Vue.js estos dos sabores son llamados Full distribution y Runtime-only distribution. Por conveniencia vamos a llamar de ahora en adelante a la versión Full, Standalone. Veamos que las hace especial y cómo podemos sacar mejor provecho a la hora de comenzar nuestro proyecto.

Standalone

Esta es la versión que comúnmente utilizamos cuando empezamos con Vue.js. Aquí encontraremos el compilador y el runtime para ejecutar toda la magia de Vue.js. El compilador es el encargado de transformar todo lo que tenemos en nuestro template a funciones render de JavaScript. Este señor se encarga de hacer “todo el trabajo pesado” por nosotros. Cuando utilizas Vue.js desde tu navegador a través de la etiqueta <script>, básicamente estas cargando el compilador y el runtime.

Aquí lo más importante es recordar que el compilador es el encargado de compilar el html o los templates para hacer el rendering al navegador.

Runtime-only

Esta versión no incluye la opción o la habilidad de compilar in-DOM templates como lo hace la versión Standalone. Para poder mostrar html en el navegador debes hacerlo a través de una función de render. A fin de cuentas así es como lo hace la versión Standalone. En realidad, la única tarea que no podemos realizar con el Runtime es la compilación de templates. Todo lo demás es posible – crear instancias, manejar el Virtual DOM, reactividad, ya sabes, todo menos compilar templates.

Hacer render más allá del navegador

Cuando usas la versión Standalone, esta usa los API disponibles a través del navegador para hacer el rendering. La versión Runtime-only no posee esta habilidad. Pero esta carencia le brinda la flexibilidad de poder hacer rendering en ambientes donde no existe la presencia de un navegador, por el ejemplo, en el servidor. No vayas a pensar que la versión Runtime-only es inferior, por el contrario, esto le permite a Vue.js poder ejecutarse en lugares antes no posible. Proyectos como Weex (similar a React Native) y Nuxt.js (Server-Side Rendering usando Vue.js) son posibles gracias al Runtime. Técnicamente el Runtime es el corazón de Vue.js.

Componentes en un archivo único

Continuando con el tema de fortalezas y desventajas, para proyectos pequeños o prototipos rápidos no hay mejor opción que usar la versión Standalone. Ya cuando el proyecto haya crecido suficiente o entiendas que es de una complejidad moderada lo mejor es usar directamente el Runtime. Ahora bien y como ya hemos mencionado, la única mejor manera de usar el Runtime es a través del Vue-cli y usar Single File Components. El problema con los templates es que terminas escribiendo CSS o HTML dentro de un archivo JavaScript, a lo JSX, para arreglar las cosas del HTML en el JavaScript. Aquí es donde Vue.js se destaca de los demás. Los componentes de un solo archivo de Vue es probablemente una gran solución, que te permite poner todo lo relacionado a un componente en un solo lugar resolviendo un gran número de decisiones en torno a la arquitectura de componentes.

Un asunto a considerar es si deseas moverte de usar la versión Standalone a usar solo el Runtime. Ir del código en versión Runtime-only a Standalone es un paseo, técnicamente le has hecho un favor al compilador. Ahora bien, para ir viceversa, de Standalone a Runtime-only tendrás que rescribir todos los componentes para usar funciones render.

Ejemplos

El artículo 7 Ways To Define A Component Template in Vue.js contiene excelentes ejemplos de como crear componentes en Vue.js. No los copiaré aquí pero en resumen los ejemplos de 1-4 usan la versión Standalone y los ejemplos 5-7 usan solo el Runtime.

De no tener claro las ventajas y desventajas de ambos sabores, no dudes en comentarlo.

diseño

Conectar Vue.js a una base de datos

Cuento largo corto es que no es posible ir directamente de Vue.js a la base de datos. Pero en este caso no debemos aceptar un simple “no es posible” como respuesta. Veamos el porque no es posible.

El manejo de la base de datos en una aplicación web no es un problema pertinente o relativo a las funciones de Vue.js, la creación de interfaces de usuario, por lo tanto es un problema que Vue.js no resuelve como framework. Simplemente no es para eso. Para comprender porque no es posible ir de Vue.js directamente a una base de datos vamos a definir que pasos necesitamos para llevar la data de x aplicación hasta la pantalla del usuario. Si usted ya conoce esta historia o está familiarizado con el proceso, no descubrirá nada nuevo aquí, así que le recomiendo continuar navegando por el blog.

Para poder conectarse a una base de datos usted necesita una aplicación del lado del servidor. Por ejemplo, para conectarse a su base de datos Mysql puede utilizar, PHP, Node.js o .Net Core. Todo esto puede estar instalado en un servidor o en varios. Con estas herramientas crearas los que se conoce como un API. El API se encargará de exponer la data. Ya que Vue.js es una aplicación del lado del cliente (vive en su navegador) y Mysql es una aplicación del lado del servidor usted necesitará de un mecanismo del lado del servidor para poderse conectar a su base de datos a través del API creado. Este mecanismo puede ser a través de llamadas REST usando como canal el protocolo HTTP. En Vue.js puedes manejar y/o consumir llamadas tipo REST pero lo que necesitas es poder crear estos recursos (API) para que Vue.js o cualquier herramienta pueda consumirlos.

En resumen, Vue.js se ejecuta en la parte del cliente, dentro del navegador (front-end). La parte de la base de datos se ejecuta en el servidor (back-end). Desde Vue.js puedes accesar los datos de la base de datos usando como mecanismo el protocolo HTTP. Para esto creas llamadas usando Ajax desde el cliente y así puedes consumir los datos de la base de datos a través de un API. Recuerda, estos datos se manejan en el servidor a través de un HTTP server que expone la data como un API al cliente. Este API se encarga de manejar la seguridad y todo lo necesario para mostrar la data de forma accesible al cliente en este caso Vue.js. Pero es lo mismo para React, Angular, Aurelia, etc.

tecnología

Git Bash vs Git CMD

Hablemos un poco sobre Git-Bash vs Git-CMD. En Windows cada instalación de Git añade tres elementos básicos:

  • Git Bash
  • Git CMD
  • Git GUI

Para aclarar la curiosidad repasemos que son cada una de estas opciones.

Git GUI

Git GUI es la más fácil, es el editor gráfico nativo que provee Git. Confieso que no uso esta herramienta ya que prefiero SourceTree y como segunda opción GitHub Desktop. Pero de vez en cuando juego con ella y no está nada mal.

Git CMD

El único propósito de Git CMD es podamos utilizar Git desde el terminal de Windows. Suena obvio pero para entender porque existe debemos acordarnos que las cosas funcionas diferente en Windows. Git es una herramienta que nace en el corazón del desarrollo de Linux. Para poder proveer la portabilidad de Git entre ambos sistemas, Git CMD provee un elegante wrapper que le permite a los desarrolladores de Windows seguir usando el CMD sin necesidad de brincar a otro Shell. Ahora, la próxima vez que tengas que instalar Git en Windows podrás entender un poco mejor la siguiente imagen:

Windows Git Setup

Si nunca has usado Git CMD no necesitaras de esta opción en la instalación.

Git Bash

Git Bash le permitirá usar herramientas MinGW/Linux Bash con Git en la línea de comandos. Todas esas cosas bonitas que se hacen en Linux también las podemos hacer en Windows a través de Git Bash.

Si usas VSCode hay manera de configurarlo para usarlo desde el editor.

diseño

Incorporar SASS en Vue.js

Comenzar un proyecto usando Vue.js es bien fácil. A través del vue-cli tenemos lo básico para arrancar de inmediato. Una de las opciones que incluye esta configuración es la habilidad de poder utilizar SASS o SCSS en tu proyecto. En resumen, SASS/SCSS es el siguiente paso, una vez nos sintamos cómodos con CSS, para poder construir hojas de estilo manejables y de fácil mantenimiento. Para poder aprovechar dicho funcionamiento debes añadir los módulos: npm install sass-loader node-sass –save-dev.

En el siguiente ejemplo, hemos incorporado elementos escritos en SASS de la librería Bulma a un componente de Vue.js.

<template>
  <div id="app">
    <a class="button is-active">Hello</a>
    <a class="button is-primary">Primary button</a>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss" scope>
  @import '../node_modules/bulma/sass/utilities/_all.sass';
  @import '../node_modules/bulma/sass/elements/button.sass';
</style>

Utilizando el atributo lang le estamos indicando a Webpack que procese los archivos .sass y los compile a CSS. Si te preguntas cual es la diferencia entre SASS y SCSS… pues la primordial es la sintaxis como se escriben las reglas de estilo. SASS utiliza espacios e indentación para organizar las reglas (similar a HAML) y SCSS es más expresivo, la sintaxis es similar a vanilla CSS.

Recuerda, utilizar SASS en tu proyecto es opcional. Pero cualquier opción que ayude a mejorar la claridad de código y aporte al mantenimiento del mismo debe ser considerado.

tecnología

Cómo configurar Git Bash en VSCode

VSCode es una joya. Con la opción de poder levantar un terminal en el mismo editor mi corazón de developer se siente más que agradecido. Pero, la opción por default que ofrece es Powershell. No tengo nada en contra de Powershell pero mi corazón pertenece a Git Bash. Lo mejor de VSCode es que lo podemos adaptar a nuestro gusto y necesidad. Hagamos el cambio para usar poder disfrutar de Git Bash en VSCode.

Primero vamos al área de los settings. File > Preferences > Settings. Para facilitar la búsqueda entre los cientos de settings disponibles VSCode provee una barra de búsqueda en la parte superior donde se encuentran las distintas opciones, Search Settings. Con solo escribir Shell será suficiente. Ahora necesitamos modificar las siguientes dos opciones.

// The path of the shell that the terminal uses on Windows. When using shells shipped with Windows (cmd, PowerShell or Bash on Ubuntu), prefer C:\Windows\sysnative over C:\Windows\System32 to use the 64-bit versions.
 "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\WindowsPowerShell\\v1.0\\powershell.exe",

  // The command line arguments to use when on the Windows terminal.
  "terminal.integrated.shellArgs.windows": [],

Vamos a cambiar dichas propiedades de la siguiente manera:

  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.shellArgs.windows": [
    "--init-file",
    "C:\\Program Files\\Git\\etc\\profile"
  ]

Recuerda que con tan solo hacer clic en el lápiz la propiedad se copia a tu archivo settings.json. Una vez hagas el cambio todo esta listo. Presionas Ctrl + ` y ya tienes Git Bash en la terminal de VSCode.

tecnología

Puerto Rico se prepara para Hackea por una Causa

Hackea por Una Causa” es el primer hackathon y bootcamp empresarial para causas benéficas de Puerto Rico. En este evento se estarán reuniendo diferentes organizaciones sin fines de lucro con el propósito de presentar ante un grupo de programadores, innovadores, diseñadores, y empresarios diferente necesidades que puedan ser suplidas a través de la tecnología, el empresarismo y la innovación social. Actualmente “miles de organizaciones sin fin de lucro [en Puerto Rico] no tienen acceso o conocen cómo integrar adecuadamente la tecnología para adelantar su causa y lograr un mayor impacto.” La intención de Hackea por Una Causa es acortar esa brecha tecnológica.

Las organizaciones tienen desde hoy para someter sus necesidades. El evento será del 31 de Marzo al 2 de Abril en la Fundación Banco Popular.

Esta es una oportunidad única para demostrar que unidos podemos hacer obra de gran impacto social a través de la tecnología. Te animo a que vayas preparando tu equipo de trabajo y busques mas información en su pagina web.

Se parte del cambio. Revolución con causa.

programación

React Snippets código fácil sin compromiso

Repetir lo mismo una y otra vez es una tarea tediosa. A la hora de crear clases en React te das cuenta que la misma base se repite una y otra vez a lo largo de los componentes. Una forma de atacar esta incomodidad es a través del uso de snippets. Los snippets son bloques de texto predefinidos que podemos añadir a nuestro código con el uso de atajos. Es el mismo concepto de los Emmet. Veamos como configuramos los snippets en Visual Studio Code.

Lo primero es buscar el lenguaje que vamos a impactar. File > Preferences > Users Snippets. En nuestro caso vamos a buscar por JavaScript React ya que lo que queremos es mejorar la experiencia al momento de escribir código de JSX.
search snippets react

Al escoger el lenguaje VSCode te mostrara un archivo tipo json con un ejemplo de cómo crear tus propios snippets. En nuestro caso vamos a utilizar el formato ya definido en el siguiente repositorio en Github. Solo necesitamos copiar el contenido del archivo snippets.json. Yo acostumbro cerrar y abrir el editor para saber que VSCode capturó el cambio.

¡Listo! Ahora cada vez que vayas a trabajar un documento JSX tendrás la opción de añadir varios bloques de código con tan solo presionar algunas teclas.

El listados completo de los atajos lo puedes revisar en el Read Me del repositorio. Si deseas realizar todo esto a través de una extensión, no hay problema, también existe.