El origen de Bootstrap, el framework CSS líder

Hace unos días me daba vueltas en la cabeza quiénes eran las personas que desarrollaron Bootstrap, este framework tan amigable (que a muchos nos ha aliviado en más de un par de ocasiones), me hacía preguntas como ¿son personas normales? ¿dónde viven? y ¿qué otras cosas hacen? por este y otros cuestionamientos más, hoy me dí a la tarea de investigar y este fue el resultado de mi investigación.

Bootstrap fue desarrollado por Mark Otto (@mdo) y Jacob Thornton (@fat) desarrolladores del famosísimo Twitter, proveedor de servicios de microblogueo.

¿Pero quiénes son Mark Otto y Jacob Thornton?

Mark Otto es un diseñador viviendo y trabajando en San Francisco, trabajó como freelance durante la secundaria y la universidad, antes de mudarse a California para trabajar en la empresa de diseño ZURB, en 2007.

Durante su estancia en ZURB diseñó y desarrolló docenas de proyectos con grandes y pequeños clientes, incluido un sitio web para Britney Spears -¡Cool! – .

Después de un periodo de dos años y medio en ZURB, renunció para comenzar a trabajar en Twitter como diseñador de productos.

En Twitter trabajó en numerosos proyectos y varias herramientas internas, ahí fue donde creó el popular kit de herramientas para front-end de código abierto Bootstrap con ayuda del buen Jacob Thornton.

Bootstrap nació en Twitter como un medio para crear mejores herramientas internas, comenzó como algo simple de HTML/CSS, luego Jacob construyó complementos encima y así es como comenzó “Bootstrap de Twitter” llamado así originalmente.

Bootstrap es un framework de código abierto para diseño de sitios y aplicaciones web. Entre sus herramientas contiene una gran variedad de plantillas de diseño con tipografía, botones, menús de navegación, tarjetas y otros elementos de diseño basado en HTML y CSS, así como también extensiones de JavaScript.

Hasta la fecha Otto y Jacob han puesto más de 1000 horas en Bootstrap, sino es que más. Semanalmente trabajan de tiempo completo en sus respectivos empleos, pero suelen realizar esfuerzos durante algunas horas por la noche y más los fines de semana, esto quiere decir que ellos no trabajan de tiempo completo en Bootstrap.

Actualmente Otto se desempeña como Director Principal de Diseño en GitHub, administra un equipo de aproximadamente 25 diseñadores web, ingenieros y artistas.

Por su parte Jacob Thornton es cofundador de Bumpers (aplicación de podcasting). Trabajó en Medium y Twitter, dondé junto a Otto creó Bootstrap.

Jacob hace un tiempo solía mantener un blog, donde escribía una serie de artículos de filosofía, sociología, teoría crítica y tecnología, donde abordó diferentes temas “con los que estaba luchando en ese momento”.

Jacob en particular tiene ideas que dan vueltas en su cabeza como ¿los robots o la inteligencia artificial se volverán demasiado inteligentes y tomarán el control? ¿ya vivimos en una realidad virtual? y cuestiones como “necesitamos colonizar Marte, o de lo contrario nos vamos a extinguir” y temas por las que la gente como él está obsesionada.

Jacob dice que no se deprime demasiado por este tipo de aspectos humanistas, pero sí es juicioso al respecto y tiene la tendencia a enloquecer al respecto.

Él es una persona muy filosófica y de ideas futuristas, sufre de alergias y le encantaría tener un ‘gato robótico’, y que no estaría nada preocupado si su gato intentara atacarlo.

Soy alguien que realmente quiere que haya destinos y experiencias radicales, únicas y diferentes, especialmente en Internet.

Bootstrap 4

Finalmente, Bootstrap es un proyecto que recientemente se ha actualizado a su versión 4, añadiendo diversas funcionalidades y mejoras, las cuales les invito a conocer en un muy entretenido y amigable curso impartido por nuestro amigo Alex Arriaga donde serás testigo de la genialidad de estos dos personajes.

https://webtraining.zone/cursos/curso-profesional-de-bootstrap-4

Conclusión general

Creo que Otto y Jacob son personas como tu y como yo, que con el esfuerzo y dedicación de su día a día han logrado proyectos muy interesantes e innovadores.

Así que sigamos trabajando todos los días “pasito a pasito” y así poco a poquito alcanzaremos y construiremos cosas más grandes y mejores para bien de todos.

Corre tras tus sueños…

Truco de Vue.js #2: Quiero usar Vue.js en un proyecto grande y viejo.

Tenemos el siguiente escenario: Eres el nuevo miembro de un equipo de desarrollo que lleva unos años perfeccionando una aplicación Web. Dicha app está hecha con tecnologías como .NET y usa jQuery a todo lo que da. Tu primera tarea es “arreglar” el sistema de comentarios pero al analizarlo por un rato descubres cosas como esta:

Intentas sacarle explicación a cada variable, clase y ID para medio comprender qué están tratando de lograr. Te ves en 2 meses arreglando el parche que arregló el parche que arregló el parche, te deprimes y luego te armas de valor y propones rehacer el módulo.

Y para tu sorpresa… ¡TE LO ACEPTAN! Es tu momento de meterle tecnología de punta que no solo sea novedosa sino eficiente. ¿Pero qué puedo usar que sea eficiente y al mismo tiempo fácil de integrar? OJO: Fácil de integrar es que al meterlo al proyecto no te rompa todo y tome días ajustarlo. Mi sugerencia es obviamente Vue.js.

¿No te convence? Considera que añadir solamente 32kb al proyecto acelerará tu productividad y mantendrá un buen nivel de escalabilidad si creas una abstracción de componentes decente. ¿Qué piensas ahora?

¡Acepto! ¿Cómo empiezo?

Importar el script de Vue.js, sea por CDN o guardando el archivo en el proyecto, es sumamente fácil. Considero que es algo que podemos saltarnos en este post, pero te dejo el link de la documentación oficial aquí.

Ahora, siendo un curioso de la web que conoce Vue.js, sabrás que trabajar con componentes es lo ideal. Y dividir la lógica de cada uno en un archivo con extensión .vue es la cereza del pastel. Sin embargo, el proyecto al que te enfrentas no usa Webpack y, honestamente, integrar Webpack en un proyecto que no se pensó desde un principio con él es una lata. Y tú, siendo el nuevo que ya convenció al Project Manager de usar Vue.js, debes entregar resultados ASAP.

Dale, no pasa nada. Afortunadamente Vue.js tiene más de una manera para declarar un entorno de componentes. En un escenario como este yo te sugiero estas dos formas:

  1. Declaración con strings inline.
  2. Declaración con X-Templates.

Preparación

Checa el repositorio que preparé para ti: https://github.com/enriqued93/truco-vue-2. La rama master contiene el ejemplo para la declaración con strings inline, y la rama x-templates para el segundo ejemplo.

En este repositorio están los pasos necesarios para integrar Vue.js en cualquier proyecto de manera segura. Hay comentarios suficientes dentro del código para comprender qué está sucediendo, así que te recomiendo fuertemente que le des un vistazo.

En el archivo comments.module.js está la definición e inicialización del widget de comentarios y sus componentes. Mi enfoque se basa en definir funciones descriptoras cuyo único fin es devolver objetos con la estructura especificada para un componente de Vue.js.

¿Por qué usar este tipo de funciones y no escribir el objeto inline? En mi humilde opinión, englobar dichos objetos de esta manera ayuda a tener un código más limpio y estructurado. Si estamos trabajando con una herramienta que promueve el uso de componentes, debemos estar consientes de que tener una estructura mantenible y reusable es primordial. Otra ventaja es que si tienes la necesidad de utilizar un componente en otro lado, puedes copiar y llevarte la función completa y no se romperá absolutamente nada ya que la función descriptora debe ser ajena al contexto donde se define.

Declaración con strings inline

Quizá sea la manera más simple de definir un componente en Vue.js. Primero te dejo algunas ventajas y desventajas de este método.

Ventajas

  • Como desarrollador, es imposible perder referencia visual entre lógica y template del componente, pues se encuentran en el mismo sitio.
  • Al mover la declaración de lugar (posiblemente a otro archivo) el componente no se romperá ya que está todo en el mismo objeto.
  • Los problemas que surgen por ejecutar JavaScript antes de tener listo el DOM no te afectarán por declarar este componente porque el template que necesita viene integrado.

Desventajas

  • Como el template se está definiendo como un string, te será muy dificil escribir un componente muy grande.
  • La mayoría de los IDEs (o tal vez todos) tratarán el template como un vil y plano string, omitiendo cualquier tipo de Syntax Highlighting.
  • Para escribir un string multilinea puedes usar las Templates Literals de EcmaScript2015, pero dado que existen navegadores que no implementan esta especificación es un poco arriesgado usarla (a menos que tus requerimientos no incluyan este tipo de navegadores).

Enfoque

Si has usado el framework sabrás que debemos crear un objeto que funja como “descriptor” de nuestro componente y que tiene una estructura como te muestro acontinuación:

Existen ciertas consideraciones que debemos tener en cuenta respecto a este objeto, pero por ahora solo me estoy enfocando en la propiedad template por el alcance de este post.

En el repositorio que te compartí encontrarás que defino el template de los componentes de manera inline, es decir, el HTML con directivas de Vue.js es un string asignado a la propiedad template del objeto descriptor. Este string lo defino usando sintásis diferentes para que de acuerdo a tus gustos o requerimientos uses la que más te acomode. Recuerda que las Template Literals no son soportadas por todos los navegadores (checa la compatibilidad actualizada aquí).

Declaración con X-Templates

Bueno, pero entonces ¿debo tener forzosamente mis archivos JavaScript con todos esos strings que tienen una sintáxis más parecida a HTML? La respuesta es NO.

Ventajas

  • Ciertos IDEs pueden ayudarte con Syntax Highlighting ya que el template se encuentra en un archivo HTML.
  • Resuelve el impedimento de los templates multilinea.
  • Si creamos un componente con un template muy extenso, el código se aligera visualmente al quitarlo del descriptor.

Desventajas

  • Si no tenemos cuidado y olvidamos incluir los X-Templates en el contexto, el componente no encontrará su respectivo template y explotará.
  • Si el componente se inicializa antes de tener listo su respectivo X-Template dentro del DOM, también explotará.

Enfoque

Hagámosle unos cambios al ejemplo anterior. En lugar de tener los templates en nuestro JavaScript, lo moveremos al HTML de la siguiente manera.

El punto clave es englobar el template en un <script> con la propiedad type=”text/x-template”. El ID del script reemplazará al template inline del ejercicio pasado.

No olvides que para que la inicialización de un componente se lleve a cabo adecuadamente, es necesario que el X-Template en cuestión exista en el DOM en dicho momento. Puedes usar $(document).ready() o la estrategia que prefieras para asegurar que el JavaScript se corra cuando el DOM se haya cargado (en el repositorio encontrarás una estrategia usando solamente JavaScript por si has superado jQuery).

Conclusión

En mi humilde opinión, establecer una buena abstracción y arquitectura de componentes en tu aplicación es primordial. Si lo haces no importará si tu app debe seguir creciendo pues soportará nuevas funcionalidades (escalabilidad); arreglar bugs dejará de ser tarea de andar descifrando código ajeno (mantenibilidad).

Si usas Vue.js o estás considerando en usarlo, aprovecha todas las bondades que ofrece y sácale todo el jugo. Recuerda que puedes tener el mejor framework del mundo pero si no lo usas como se debe no hará ninguna diferencia.

Ojalá esto te sea útil y no olvides dejarme tus comentarios diciendo qué cosas te interesarían aprender, cómo te pareció este post o qué opinas de mi escritura. Te mando un saludo, nos leemos en el próximo post.

– Enrique D.

 

 

¿Por qué se sigue usando Java?

Hoy recibimos una pregunta muy interesante de uno de nuestros webtrainees desde Youtube, sobre por qué Java aunque es un lenguaje que parece “antiguo”, sigue siendo uno de los que recomendamos aprender en Webtraining.Zone. Aquí está parte de la pregunta:

Necesito ayuda,…, nunca programé en Java, mas bien fui formado en frontend, me incliné fuertemente por la programación funcional: manejo Haskell, Rust, PureScript y Elm. Siempre me gusto la programación, pero…

Java siempre me ha parecido un lenguaje feo y tortuoso, lo siento mi idea no es ofender, el hecho de no tener inferencia de tipos, tener que crear clases para todo e incluso tener que manejar estado dentro de una clase me resulta raro, extraño o no natural.

Quiero saber por qué me parece terrible tener que trabajar con Java, y siempre que empiezo proyectos intento evadirlo, tal que argumento con las estadísticas StackOver Flow para demostrar que esta siendo relegado. Quiero que alguien pro como Alex me de su punto de vista.

Mil gracias.

Primero que nada quisiera comentarte que Java es un lenguaje que al ser un predecesor de todos los lenguajes que mencionas, definitivamente no tiene todas las características “modernas” para hacer desarrollos a los que estás tienes acceso con lenguajes como Rust.

Ahora bien Java no es funcional por lo tanto no podemos hacer cosas usando ese paradigma al estilo de Haskell, en todo caso Scala sería un competidor para éste (entonces ahí la comparativa tomaría otra vertiente).

Java no es sólo un lenguage

Cuando hablamos de Java, no sólo se toma en cuenta el lenguaje en sí, sino todo el ecosistema que tiene a su alrededor, sólo por darte un ejemplo: en el mundo empresarial (aplicaciones de alta demanda y muy distribuidas como las que usan los bancos, los grandes corporativos y los gobiernos) el lenguaje predominante es Java, y eso es gracias que muchos de los frameworks y productos más poderosos están creados con Java.

Tal es el caso por ejemplo de los servidores de aplicaciones como IBM WebSphere, JBoss (RedHat), Weblogic (Oracle). Plataformas de creación de contenido como IBM Web Content Manager, Liferay DXP también están construidas sobre Java.

Mientras empresas como IBM, Oracle, Amazon y Google, sigan creando productos empresariales en Java, es muy difícil que otra plataforma se posicione a su nivel.

Ingeniero de Software vs Arquitecto

Es cierto, como Ingenieros de Software nos gustan los lenguajes nuevos y brillantes, pero… como Arquitectos de Soluciones vemos más allá del lenguaje:

  • Vemos quién da mejor soporte,
  • Quién tiene más madurez en herramientas,
  • Qué tan complejo es encontrar profesionales con conocimientos avanzados,
  • Qué tantas empresas pueden implementar sistemas en tal o cual lenguaje,
  • Cuánto nos costaría mantener nuestras aplicaciones,
  • Qué tan riesgoso es elegir tal o cual tecnología,
  • Quién va a pagar el costo de los errores de producción cuando se presenten.

Haciendo la suma de todos los puntos anteriores, la verdad es que la lista de dónde podemos elegir se limita a dos plataformas: .NET de Microsoft o Java de Oracle, no hay más.

Los otros lenguajes se pueden usar para proyectos de otra naturaleza, pero no para el mundo de aplicaciones empresariales, donde una mala decisión puede costar millones de dólares o una buena decisión puede ahorrarlos.

Una decisión de millones

Ahora mismo, estoy involucrado en un proyecto de un gobierno de uno de los países más poderosos del mundo, y ahí por ejemplo este tipo de decisiones de arquitectura son decisiones que repercutirán por al menos 5 años.

Imagínate… 5 años es un tiempo muy largo en software, que cuando se tiene una buena base esos 5 años pueden ser muy productivos. O bien estos cinco años pueden ser de muchas pérdidas.

¿Y tu qué piensas sobre Java?

Te gustaría aprender otras cosas interesantes, qué tal sobre Los 10 mandamientos de un buen Ingeniero de Software.

Saludos cordiales.

¿Cuándo se creó Node.js?

Hoy una de nuestras webtrainees: Alejandra, nos comentaba que en su país había visto vacantes que pedían alrededor de 3 años de experiencia en Node.js. Entonces varias preguntas vinieron a su mente:

¿Es posible que alguien tenga experiencia de 3 años con Node.js?

Sí, si es posible; eso significaría que fue una de las primeras personas que comenzaron a utilizar Node.js en el ámbito enterprise. Node.js históricamente fue presentado por su creador Ryan Dahl por primera vez en la JSConf 2009 el 08 de noviembre de ese año, estas son las diapositivas originales usadas durante esa conferencia .

Ahora bien, si encuentras a una persona con tres años de experiencia en Node.js, eso significa que realmente es alguien con bastante experiencia en él ¡no lo dejes ir!

¿Te gustaría ver la conferencia original? Aquí la tienes.

¿En qué año se empezó a implementar Node.js?

Podríamos decir que Node.js despegó formalmente en 2013 que es cuando sale version 0.10.x, aquí te dejamos la tabla oficial tomada de nuestra querida Wikipedia.

Release Code name Release date LTS status Active LTS start Maintenance start Maintenance end
v0.10.x 2013-03-11 Old version, no longer supported: End-of-life 2015-10-01 2016-10-31
v0.12.x 2015-02-06 Old version, no longer supported: End-of-life 2016-04-01 2016-12-31
4.x Argon 2015-09-08 Older version, yet still supported: Maintenance 2015-10-01 2017-04-01 April 2018
5.x 2015-10-29 No LTS N/A
6.x Boron 2016-04-26 Current stable version: Active 2016-10-18 April 2018 April 2019
7.x 2016-10-25 No LTS N/A
8.x Carbon[65] 2017-05-30 Current stable version: Active 2017-10-31 April 2019 December 2019
9.x 2017-10-31 No LTS N/A
10.x Future release: Pending October 2018 April 2020 April 2021

Cuéntame ¿has usado Node.js para hacer cosas geniales?

Saludos.

Truco de Vue.js #1: Esconder tus directivas de Vue antes de que esté listo

¿Tus usuarios tienen conexión lenta? ¿Vue.js no se definió correctamente? ¿Detestas el DOM pre-render?

Así se vería Google antes de cargar Vue.js (si lo usara…)

Pues te tengo la solución a tus problemas: ¡v-cloak!

En la lista de directivas de Vue.js encontramos v-cloak, pero puedo asegurar que muy pocas personas le prestan atención.

Lo único que hace esta directiva es desaparecer. Sí, desaparecer y ya. Cuando Vue.js es invocado se encarga, entre otras cosas, de quitar todos los v-cloak que haya dentro del elemento HTML que inicialices.

Ten en cuenta que v-cloak no se pone por defecto en todos lados, tú debes ponerla y sólo es válido en elementos dentro del que inicializas, no aplica sobre él mismo.

Si esto lo combinas con una regla de CSS puedes ocultar todos los elementos que no estén listos.

 

¡Voilá! Con esta solución super-simple te olvidas de tener HTML que no esté listo sin pegarle al performance de tu app.

Si tienes dudas sobre Vue.js o cosas raras que te gustaría hacer y no sabes cómo, déjame un comentario para tenerlo en cuenta para los próximos Trucos de Vue.

– Enrique D.

Bootstrap 4 ya está listo

Si eres un seguidor de este genial framework esta es una excelente noticia para ti. ¡Ya fue liberada la versión 4.0.0 de Bootstrap! ¡La última versión Beta de este framework fue anunciada el pasado 28 de diciembre de 2017!

Los creadores de Bootstrap nos han prometido que no habrá más breaking changes, lo cual es una excelente noticia, porque ahora sí ya puedes utilizar esta Beta final sin temor a que tu código deje de funcionar cuando se libere la versión estable 4.0.0.

There will be no breaking changes from Beta 3 to stable, so our changelog should be short and sweet.

Fuente: http://blog.getbootstrap.com/2017/12/28/bootstrap-4-beta-3/

¿Por que Bootstrap y no otro framework?

  • Documentación muy completa
  • Una comunidad de usuarios muy grande
  • Muchos ejemplos en los cuales basarte
  • Simple de aprender y usar
  • Muy personalizable, con unas cuantas líneas de SASS/SCSS tendrás un Bootstrap totalmente nuevo

Bootstrap ya está listo

La nueva y flamante versión de Bootstrap ya fue liberada, así que ahora sí tenemos versión estable 4.0.0.

¿Cuándo se liberará Bootstrap 4?

No hay fecha confirmada, sin embargo si revisamos la lista de issues abiertos en Github ya son menos de 15 al momento de escribir este artículo. Te invito a que lo veas por ti mismo en: https://github.com/twbs/bootstrap/projects/12

¿Dónde puedes aprender Bootstrap 4?

Por supuesto, aquí en Webtraining.Zone tendremos un Curso Profesional de Bootstrap 4, así que inscríbete ahora y reserva tu lugar.

Los 10 mandamientos de un buen Ingeniero de Software

Disclaimer: Este post no tiene nada que ver con religión. Respetamos todas las creencias y la fé que tienen nuestros amables lectores.

Leerás los requerimientos antes de empezar a codificar

Sabemos que nos encanta el código pero… trata de resistir la tentación de iniciar a codificar si antes haber leído tu lista de requerimientos, que esperemos que tu compañero Business Analyst haya preparado para ti. Si no hay una lista de requerimientos, créala, te aseguro que tu alter ego frustrado del futuro te lo agradecerá.

Diseñarás la arquitectura de tu aplicación antes de iniciar con el código

El mes pasado estuve leyendo el libro más reciente del Uncle Bob (a. k. a. Robert C. Martin): Clean Architecture: A Craftsman’s Guide to Software Structure and Design y en particular encontré muy buenas opiniones acerca de qué tan importante es sentarnos y pensar cómo vamos a construir nuestro sistema, no sólo se trata de la cuestión técnica de cuál framework usar, o si usaremos REST o GraphQL sino ir más allá, diseñar interacciones (inputs/outputs), prever casos dónde nuestro sistema pueda fallar, etc.

Una de las cosas que normalmente no hacemos es priorizar nuestras tareas. Y me gustó mucho esta frase:

I have two kinds of problems, the urgent and the important. The urgent are not important, and the important are never urgent.

– Dwight D. Eisenhower

Imagen de SafariBooksOnline.

Those things that are urgent are rarely of great importance, and those things that are important are seldom of great urgency.

Es decir, si algo es urgente casi nunca es importante y viceversa las cosas importantes rara vez son urgentes. La arquitectura de un sistema es algo IMPORTANTE.

No desearás el framework de tu prójimo

A todos nos encanta probar nuevos frameworks, la más reciente biblioteca para hacer tal cosa, lo más moderno, sin embargo, otra vez, trata de no desear lo que otros están usando y en su lugar pregúntate ¿realmente necesito migrar esta funcionalidad? ¿qué beneficios le traerá a mi cliente este cambio? ¿cuánto va a costar implementar tal o cual cosa? ¿qué tan importante es probar la nueva tecnología? ¿puedo re-usar partes de lo que tengo? ¿qué valor agregado me dará cambiarme ahora mismo? ¿estoy listo para dar el salto?

Te aseguro que después de responder las preguntas anteriores estarás más en paz con tu implementación y sabrás qué camino tomar.

Usarás un controlador de versiones

¿Verdad que no hay nada más triste que llegar a un proyecto y darte cuenta que nunca se guardó en un Version Control System (VCS)? Si puedes usar Git mejor; si no puedes por políticas internas no importa, pero por favor usa un controlador de versiones, te quitará muchos dolores de cabeza y reducirá drásticamente los errores en tu ciclo de desarrollo de software.

Crearás un conjunto de pruebas (si son automatizadas mejor)

Sí, estoy de acuerdo; crear pruebas para un sistema es una de las tareas más cansadas, largas y hasta tediosas, sin embargo son un excelente punto para asegurar la calidad de tu software y más aún, estarás creando un mecanismo para ayudarte a reducir la cantidad de errores cuando se agreguen nuevas características o se cambien las ya existentes.

Escucharás atentamente a tu equipo, ellos tienen mucho que aportar

Que no te gane el ego, todos tienen una opinión y una forma de ver las cosas. Nadie tiene la verdad absoluta; recuerda existen tres verdades:

  • Tu verdad: lo que tu crees que es lo mejor y lo más correcto
  • La verdad de tu prójimo: lo qué él cree que debería hacerse
  • Y la verdad: lo que realmente es correcto (ésta suele ser una combinación de las dos anteriores).

Pensarás antes de criticar el código de tu prójimo

Antes de decir ¡que $#$%@ es esto! Investiga, lee, documéntate, quizá quien creó el sistema o aplicación, lo tuvo que hacer en un tiempo muy corto y por ello no tuvo los recursos para crear algo mejor.

Quizá el ingeniero anterior tenía muchas dudas pero no fueron resueltas en el tiempo apropiado y tuvo que salir a producción con lo que tenía.

Quizá el cliente cambió los requerimientos a última hora. Esto casi no pasa ¿verdad?

Estarás en comunicación con tu Project Manager

Los Project Managers no son dioses, no son intocables, diles cuando no te sientas cómodo con los tiempos que te dieron para hacer tus tareas, que sepan que te están causando conflicto en tu vida porque ahora tendrás que desvelarte durante 4 meses para poder salir en el tiempo previsto.

Ellos son tus compañeros, son tus aliados y colegas, hazlos partícipes de tus preocupaciones. Qué sepan que vas a tener que hacer mucho más de lo que en su sistema de tracking de tareas dice.

Pedirás ayuda cuando lo necesites

Aceptémoslo, siempre hay alguien mejor que nosotros, y tu siempre sabrás algo más que otra persona. No cierres tus pensamientos a sólo lo que tu crees que es mejor, pregunta, lee y busca la opinión de quienes ya han recorrido por más tiempo este apasionante pero complicado mundo de la creación de software.

Encuentra a quien admirar, síguelo, busca su código, lee sus ideas, escríbele. Te aseguro que hay mucha sabiduría en esas personas que llevan muchos más años en estos caminos.

Buscarás en Google o Stack Overflow antes de preguntar

Tu tiempo es valioso, así como el de tu prójimo también lo es. Busca por tu cuenta primero, lee, estudia y analiza; tenemos mucha información en internet y claro en nuestro amado Stack Overflow, trata de solucionar tus tareas, primero por ti mismo.

Sin embargo, tampoco dejes que pase mucho tiempo, si ya pasaste más de tres horas con un problema y no encuentras la solución, entonces pregunta a tu prójimo, tal vez pueda ayudarte.

Tu servidor,

Alex Arriaga

Vue.js, el framework progresivo que llegó para quedarse

Estamos en los primeros días de 2018 y como siempre es un placer poder seguir en contacto y continuar aprendiendo cosas interesantes que nos ayuden a crear mejores proyectos de software.

Hoy te voy a platicar sobre Vue.js el llamado “Framework Progresivo” para creación de aplicaciones.  Vue.js fue creado con la simplicidad en mente, su aceptación se ha debido en gran medida a que incrementa mucho la productividad mediante el uso de un API muy bien documentado y fácil de comprender, incluso si no se tiene tanta experiencia en web.

¿Por qué aprender Vue.js?

A mi gusto, Vue.js provee un API mucho más sencillo de utilizar y manejar cuando se compara contra frameworks más robustos como Angular 2+; Vue.js fue de hecho inspirado en la primera versión de Angular conocida como AngularJS; de las propias palabras de su creador Evan You:

I started Vue as a personal project when I was working at Google Creative Labs in 2013. My job there involved building a lot of UI prototypes. After hand-rolling many of them with vanilla JavaScript and using Angular 1 for a few, I wanted something that captured the declarative nature of Angular’s data binding, but with a simpler, more approachable API. That’s how Vue started.
Fuente: Github Open Stories

Ventajas de usar Vue.js

  • No necesitas aprender un nuevo lenguaje como TypeScript para poder usarlo
  • Puedes usarlo como un reemplazo de jQuery para manipulación del DOM
  • Para casos más complejos puedes usar todo el poder del front-end moderno: ES2015+, Webpack, pre-procesadores, etc.
  • Curva de aprendiza muy corta
  • No requieres que tu aplicación sea de tipo SPA, ya que Vue puede irse adaptando a como lo necesites: por ejemplo lo puedes integrar con una vista de Laravel Blade, en tu app de Spring MVC, o en un módulo de tu CMS favorito (Drupal, Joomla, Liferay, IBM WCM, Umbraco, etc.)
  • Puedes usarlo en combinación con Node.js para hacer server-side rendering
  • Y más…

¿Cuándo usar Vue.js y no Angular?

Angular es un framework mucho más robusto que Vue.js eso quiere decir, que tiene muchos módulos y componentes avanzados que quizá no necesites en tu aplicación. Aquí hay algunos casos de uso donde NO se recomendaría Angular.

  • La aplicación NO es una Single Page Application. Angular fue pensando 100% para SPAs, si tu no estás desarrollando una Angular no es buena opción.
  • Tu aplicación sólo se comunica con muy pocos servicios REST externos (menos de diez end-points). Angular es muy bueno para aplicaciones empresariales complejas, pero para algo más sencillo es muy pesado cuando se compara con Vue.js.
  • Necesitas crear componentes sencillos integrados en la capa de vista de algún framework como Laravel o Spring MVC. Hay ocasiones que tenemos un framework de backend que hace casi todo, excepto que necesitamos interacción del usuario mediante JavaScript, Angular no sería natural en este caso de uso. Recuerda Angular funciona genial con SPAs.

Entonces ¿ya estás listo para continuar con Vue.js?

¿Dónde puedo aprender Vue.js?

En Webtraining.Zone tenemos en puerta un curso de Vue.js el día martes 23 de enero de 2018 en punto de las 7 PM (Hora México Centro). Puedes ver la hora exacta en otras zonas horarias en https://webtraining.zone/cursos/curso-profesional-vue-js

Registro abierto en: https://webtraining.zone/cursos/curso-profesional-vue-js

¿Cómo obtengo acceso al curso de Vue.js?

Si aportaste para el paquete navideño ¡ya tienes incluido este curso como regalo!

En caso de que no, no te preocupes recuerda que el contenido que ofrecemos es GRATUITO durante la transmisión en vivo y siempre puedes aportar a un curso en particular para obtener acceso a la versión editada en Full HD.

Spoiler alert!
React is coming…

Tu servidor:
Alex Arriaga

Mi primera travesía: Integrando AdSense desde cero (parte 1)

¡Qué tal, Webtrainees! Soy Enrique y esta es la primera vez que escribo en el blog de Webtraining. De hecho, NUNCA antes había escrito una entrada en un blog. Siempre ando leyendo cosas que todos escriben pero nunca había escrito algo propio, no tengo idea de lo que estoy haciendo. Espero Alex Arriaga no se moleste. Haré todo lo posible por aterrizar ideas y volverme un moderadamente buen escritor-o-algo. Ojalá pueda hacerlo un hábito y periódicamente compartir mis travesías.

¿Alguna vez te has preguntado por qué hay anuncios en tantos sitios de nuestra querida Internet? Quizá eres un conocedor y conoces la respuesta pero no tienes idea de cómo implementarlo en tu sitio. También es posible que hayas sentido que esos anuncios te espían porque recién curioseaste sobre esos audífonos inalámbricos en Amazon y ya estás encontrándotelos hasta en la sopa.

Si te identificas con alguna de las premisas anteriores te quiero decir ¡GRACIAS! porque así me haces sentir que no soy el único que quiere indagar sobre AdSense.

Logo de Google AdSense
© Google AdSense

* DISCLAIMER: Enrique Díaz (yo mero) no es un experto en uso de AdSense sino todo lo contrario *

Llevo unas semanas trabajando en un proyecto con Alex durante mis escasos ratos libres. El destino nos llevó a decidirnos por utilizar Nuxt.js (Universal Vue.js o Vue.js Server-side) y conocer más sobre la monetización por medio de anuncios (lo sé, a veces son fastidiosos pero así es esto). Nunca había leído a fondo nada de AdSense, pero desde el principio supe que esa sería una opción.

Citando al sitio de esta tecnología perteneciente al gigante Google:

AdSense es una manera gratis y simple de hacer dinero en Internet usando anuncios en tu sitio web. En 2015, repartimos cerca de USD$ 10B a nuestros editores. Ese es el poder de AdSense.

Related image¡Suena fantástico, yo quiero una rebanada de ese pastél! ¿Qué debo hacer? ¡Y SABER! Veamos…

Beneficios

  • Anuncios revisados para mantener una alta calidad y de contenido relevante.
  • Anuncios ideales dependiendo el tipo de audiencia.
  • Soportados en medios móviles (smartphones, tablets, etc.).
  • Los que pagan más aparecen más y en mejores lugares.
  • Puedes bloquear ciertos anuncios a tu criterio.
  • Personalizables para adecuarse a tu sitio.
  • Provee herramientas de reportes.

Según AdSense, solo es necesario hacer lo siguiente para generar dinero:

  1. Seleccionar el tipo de anuncio adecuado para tu sitio. Ofrecen ciertos recursos para elegir adecuadamente y aprovechar al máximo AdSense.
  2. Elegir dónde queremos ubicar dichos anuncios.
  3. Ver los anuncios en acción. Esto es importante porque es posible que en tu sitio aparezcan anuncios de tu competencia y, siendo honestos, ¿a quién le apetece promover a la competencia con tus clientes? Debemos estar atentos y mover nuestra configuración para prevenir anucios provenientes de esos oscuros y tenebrosos sitios.
  4. Esperar los cheques. ¡Cool! Pero no olvides que el dinero sigue siendo dinero y hay condiciones. Para poder reclamar ese regordete cheque debes llegar a cierto límite de pago en el mes, el cual depende de tu moneda predeterminada. En mi caso (pesos mexicanos) debo juntar al menos MXN$1,200 para retirarlo. Si no llegas al mínimo, tu acumulado se pasará al siguiente mes y así hasta que en algún mes alcances el límite de pago. ¿Un ejemplo? Supongamos que este mes recaudé MXN$900 y no puedo retirar un centavo. El siguiente mes junto MXN$200 más (van MXN$1,100) y sigo sin retirar nada. El tercer mes me fue excelente, aportando MXN$1,000 al acumulado. En este tercer mes tendría MXN$2,100, permitiéndome y obligándome a retirar dicha cantidad.

Bien, considero que es suficiente información y contexto para comenzar a añadir unos anuncios a este sitio.

Paso uno: Crear una cuenta de AdSense.

Para esto necesito una cuenta de Gmail (listo) y ser el propietario del sitio y contenido donde quiero poner anuncios (listo). Visitamos la página https://www.google.com/adsense/start y buscamos donde diga Sign Up o algo similar. Iniciamos sesión con la cuenta de Gmail que deseemos asociar. Introducimos el dominio de nuestro sitio (sin protocolo, sin path, sin queryParams), por ejemplo enrique-diaz.com, completamos el pequeño formulario y aceptamos términos y condiciones (ten en cuenta que solo un número limitado de cuentas pueden asociarse al mismo sitio, así que no andes poniéndolo en todas tus cuentas).

Ahora nos aparece un formulario más extenso y formal, pidiéndonos información para los pagos. Después, debemos copiar un pequeño bloque de código en nuestro <HEAD> para finalmente… esperar a que Google valide que todo está en orden. Según no debe tardar más de 3 días pero es posible que sí. Supuestamente seré notificado por email cuando todo esté resuelto.

Paso dos: …

Ahora me queda esperar, no puedo hacer mucho más y la verdad no quiero extenderme en esta entrada con cosas irrelevantes como mi vida personal o qué le daré a Nala de comer hoy. ¡Ah! Nala es mi cachorra que adopté/rescaté de un parque donde fue abandonada. Mientras tanto, cerraré esta entrada y espero ser notificado pronto para seguir viendo cómo es esto de AdSense. Déjenme sus comentarios, opiniones, quejas, reflexiones o cualquier cosa. Háganme saber si alguien lee esto.

Nos vemos Webtrainees, nos leemos en la próxima travesía.

~ Enrique

Angular 5, la evolución sigue

Si bien la nueva versión de Angular había sido planeada para ser liberada el pasado 23 de octubre de 2017; eso no sucedió, pero no te preocupes hoy se acaba de liberar el Release Candidate #7 por lo que es muy probable que en muy próximos días Angular 5 ya esté con nosotros. Finalmente tenemos versión 5.0 estable y lista para ser usada.

En este último release se han corregido algunos issues menores, es decir, ya nada crítico está siendo arreglado en estos momentos.

¿Qué esperar en la versión 5?

Optimización en los bundles

Al parecer se acabaron los tiempos donde teníamos bundles de más de 500 Kb para aplicaciones sencillas; eso nos llena de alegría, ya que una de las mayores limitantes (hasta la versión 4) era que nuestros archivos generados eran aún pesados, incluso para aplicaciones con muy pocos componentes.

Ahead Of Time Compilation por defecto para la Angular CLI

Oh sí, mi buen amigo, finalmente ya tendremos AoT desde el inicio cuando se crean proyectos que usen la CLI de Angular. Esto es definitivamente algo excelente, ya que nos olvidaremos de estar pasando flags extraños al estar creando nuestra aplicación para producción.

Mejor Desempeño para Event Listeners

Se han aplicado algunas mejoras en la forma en cómo se registran eventos, como el documentado en este pull request.

¿Progressive Web Apps con Angular? Por supuesto que sí

En la versión 2 y 4, no existían mecanismos completos y bien documentados sobre la creación de Aplicaciones Web Progresivas, ¿y qué crees? en la versión 5, el equipo detrás de este genial framework ha puesto especial énfasis en este tema que cada vez toma más relevancia en todos los frameworks modernos. Angular no se quedará atrás y por supuesto que ya se está trabajando en hacer este tipo de aplicaciones mucho más robustas usando mecanismos de caché en el browser y otras mejorar que ya platicaremos más adelante.

Componentes de Material Design Listos para Server-side Rendering

Esto quizá es de las cosas que personalmente más espero, ya que actualmente Angular está muy “joven” en cuanto server-side rendering, incluso con la adopción de Angular Universal por parte de Google, la verdad es que nos nos han brindado una forma estable y potente para este tema, que es el motivo por el que muchos desarrolladores e ingenieros de software han descartado Angular para aplicaciones donde el SEO sea vital.

Tengo mis reservas en este tema, quisiera probar si realmente estos componentes funcionarán como es debido. Esperemos que sí.

¿Qué sigue?

  • Evidentemente, ya estamos ansiosos por probar la versión estable de Angular 5, así que tan pronto como se libere, estaremos probando todo lo nuevo en el día cero.
  • Angular 6 se empezará a cocinar tan pronto como la 5 sea estable ¿qué? sí recuerda que Angular adoptó el sistema SEMVER con lo cual se ha prometido tener nuevas versiones de Angular cada 6 meses; eso quiere decir que más o menos entre marzo y abril del próximo año tendremos Angular 6…

¿Tendremos un Curso Profesional de Angular 5 en Webtraining.Zone?

Por supuesto que sí, tan pronto como tengamos versión estable, estaremos creando un proyecto completamente desde cero para que puedas aprender todo lo nuevo.

Ya tenemos fecha y hora: 18 de Noviembre 2017 en punto de las 10 AM (Hora México Centro).

Inscríbete ahora al Curso Profesional de Angular 5 con Material Design: https://webtraining.zone/cursos/curso-profesional-de-angular-5-con-material-design
Nos vemos en ese curso, mientras tanto coméntame ¿qué opinas de Angular? ¿has tenido oportunidad de explorarlo?

Tu amigo Alex Arriaga