lunes, 9 de enero de 2017

Usando VueJS por primera vez

Decidí darle una oportunidad a VueJS, con lo poco he hecho hasta ahora me he dado cuenta que es un framework con un futuro muy prometedor. Posee características que reúne lo mejor de algunos de los frameworks más conocidos en la actualidad; adquiere propiedades de ReactJS y Angular 1. Creo que todos aquellos que estén usando Angular 1 deberían migrar a VueJS, ya que angular 1 tiende a desaparecer.

VueJS es rápido, versátil y es software libre. Muchas personas lo comparan con ReactJS y resulta que en diferentes pruebas Vue sale a la delantera. Está claro que ReactJS es más robusto y detrás hay una inmensa comunidad, además está mantenido por el gigante de las redes sociales, Facebook. VueJS no se queda atrás, también posee una gran comunidad. Otro punto fuerte es su tamaño, apenas llega a los 17Kb comprimido, resaltando que también implementa un DOM virtual al igual que ReactJS.

Por otro lado, es totalmente compatible con las nuevas herramientas​ que pisan fuerte en el mundo de Javascript. Usarlo con ES6 es tan sencillo como usar cualquier otra librería o framework, consiste​ solo en instalar el paquete NPM, también es posible integrarlo con muchas otras herramientas. En mi caso, lo he combinado con un proyecto de .NET y funciona a la par con el motor Razor sin ningún inconveniente.

Las gran variedad funcionalidades que ofrece VueJS me han llamado la atención, se pueden usar características de ReactJS, tales como props, crear componentes, reactividad, mixins, efectos de transición y más. En cuanto a Angular 1 tenemos los atributos en las etiquetas html como el v-if siendo este el predecesor de ng-if y las famosas llaves {{ }}, también se permite la utilización de modelos.

Guía completa (Documentación oficial)

No olvides presionar el botón ❤.

viernes, 6 de enero de 2017

Añade sombras a elementos SVG usando CSS


Añade en tu archivo HTML principal (o en el componente padre donde se mostrará la sombra) el siguiente segmento:

<svg>
  <filter id="dropshadow" height="130%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur> <!-- stdDeviation is how much to blur -->
    <feOffset dx="2" dy="2" result="offsetblur"></feOffset> <!-- how much to offset -->
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5"></feFuncA> <!-- slope is the opacity of the shadow -->
    </feComponentTransfer>
    <feMerge>
      <feMergeNode></feMergeNode> <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic"></feMergeNode> <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
</svg>


Tener en cuenta que existe una etiqueta filter con el atributo id, que mas adelante se usará para aplicar el filtro CSS.

A continuación, se usará CSS para aplicar el filtro SVG en la etiqueta path cuando se pase el cursor sobre el mismo, es decir, se aplica el filtro SVG desde CSS cuando es activado el evento hover:

path {
  stroke-width: 1px;

  &:hover {
    cursor: pointer;
    stroke-width: 2px;
    filter: url(#dropshadow);
  }
}
y ¿donde está la etiqueta path? Puedes añadir el siguiente segmento:

<svg height="400" width="450">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
</svg>



Nota: Este ejemplo es aplicable a otros elementos SVG.

Mas información en: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

jueves, 5 de enero de 2017

2017: C# vs. JavaScript

CSharp vs. JavaScript ¿Cual es mejor? — Esta es la típica pregunta que me hacen muy a menudo. En realidad considero que ninguno es mejor que otro, unos lenguajes poseen más funcionalidades, otros son especiales para ciertos tipos de proyectos, etc. Esta es una cuestión de preferencias y creo que se puede aplicar a todos los lenguajes de programación populares. Mientras que unos deciden montar un API Rest con Golang, otros se van por JavaScript, Ruby o CSharp (o cualquier otro). Lo importante es saber las ventajas y desventajas que ofrece cada lenguaje, ademas de conocer también los Frameworks para cada uno de estos.

Eligiendo el lenguaje adecuado

JavaScript es el mejor aliado de sitios que requieren alta interacción con el usuario: videojuegos, salas de chat, videoconferencias, y toda clase de proyectos en donde la información en tiempo real sea prioridad. JavaScript no tiene limites, hoy en día se puede ejecutar en los sistemas operativos más reconocidos (Linux, Windows y Apple). También es importante resaltar que permite realizar casi toda clase de desarrollos: Aplicaciones móviles, sitios web, APIs, aplicaciones de escritorio, programas de consola, programar Arduino… Para más información ver NodeJS.

Al igual que JavaScript, CSharp también permite casi realizar toda clase de desarrollos — aunque existen inconvenientes es cuanto a compatibilidad, ya que .NET Core es un proyecto relativamente nuevo y aún faltan elementos por mejorar. CSharp es excelente cuando se dispone de un servidor en MS Windows, de esta manera todas las funciones que ofrece el lenguaje se podrán usar sin ninguna clase de problema. Por otro lado, si lo que necesitas es hacer Debug, C# es el mejor —y… ¿Porque no JavaScript para debug? Porque las funcionalidades del debug dependen mucho del navegador web en el que se esté ejecutando, y muchas veces ese mismo navegador trae complementos instalados que pueden afectar el código fuente y hacer más difícil este proceso.

miércoles, 4 de enero de 2017

Reflexión: Mí itinerario

¿Qué debería escribir? — es una de las preguntas que últimamente me he estado haciendo. He visto como muchos otros usuarios de medium aceptan el reto de escribir por treinta días, es decir, cada día debo escribir algo interesante y publicarlo en éste blog, un reto un poco difícil sí no tengo claro los temas que puedo abarcar durante ese lapso de tiempo. Hay muchos temas de los que puedo hablar — y escribir, es por eso que haré un listado de aquellos que considero relevantes, sin embargo hay algo que definitivamente debo mejorar, se trata de mi vocabulario, la única solución a esto es leer y leer bastante. Con el fin de ordenar mis ideas, he decidido escribir todas aquellas cosas de las que podría hablar, aunque puede ser un poco larga — y entre más amplia sea la lista, será mejor porque así no me quedaré corto. Debido a que tengo amplios conocimientos en desarrollo de software, es especial todo lo relacionado a la web, he decidido crear una lista para esta categoría: Mi experiencia con el uso de diferentes librerías y Frameworks de desarrollo web, tales como Angular en su versión dos y ReactJS. Hablaré de los pros y contras de cada una, todo según mis experiencias. Descripción del camino para aprender ReactJS, es ítem nace porque el cambio de Angular a ReactJS puede ser muy brusco para muchas personas — al menos para mi lo fue. Porque decidí empezar a aprender VUE.js Hablaré de mis ídolos en Github, tales como Tj, Sindresorhus y otros cuantos. Porqué decidí crear la librería para NodeJS llamada Sails Inverse Model, además hablaré del impacto que ha tenido en la comunidad. Mi experiencia en el desarrollo de aplicaciones móviles con Ionic 2. Sacare unas cuantas excusas para no aprender desarrollo móvil nativo. Javascript como mí lenguaje favorito. Quizás lance algunas ideas para que otros las desarrollen por mí — ya que no me queda suficiente tiempo para hacerlas realizarlas todas. No todo es programación, es por eso que escribiré acerca de cosas que me suceden en el día a día, haré confesiones a una mujer que me encanta, inventaré unas cuantas historias basadas en mi vida, intentaré escribir críticas a todo — me gusta ver todo desde otra perspectiva para sacar conclusiones y lanzar críticas.

Baking3D

  https://baking3d.mercadoshops.com.co/