Vue.JS es una librería de Javascript que he estado recientemente para mis proyectos. Me gusta por la facilidad de crear vistas, contar con el código HTML, JavaScript y CSS en un mismo archivo de forma separada. Esto facilita ver la estructura del documento, ver los eventos y la apariencia en un mismo lugar. A continuación de hablaré del documental de la creación de Vue.js

Vue.js The Documentary

Pues hace unos meses salió un documental hecho por Honeypot sobre la creación de Vue.js. El documental de la creación de Vue.js se centra principalmente en su autor: su carrera en Google, la idea de crear este framewok, como comenzó a hacerlo, el inicio de su popularidad gracias a Laravel. También explica como actualmente está dedicado a tiempo completo a desarrollar esta biblioteca gracias al patrocinio de sus seguidores.

Te recomiendo ver este documental si has usado la tecnología o eres fanático de la programación. Está muy bien realizado y es entretenido, no me aburrí para nada en sus 30 minutos de duración. Cuenta con varias entrevistas y lo mejor es que son de las personas involucradas del proyecto, así que sabes que todo lo que comentan es real.

¿Cómo ver el documental de la creación de Vue.js?

A continuación te comparto todo el documental. Está hospedado en Youtube de forma gratuita, así que lo podrás ver sin problemas. Haz clic abajo y disfruta durante 30 minutos todo sobre la creación de Vue.js.

Si te gustó el documental sobre la creación de Vue.js, no dudes en compartirlo. Si conoces otro documental de programadores, deja tu comentario para verlo y así expandir mas el conocimiento.

Nota: si últimamente no has hecho aplicaciones del lado del cliente, te llama la atención aprender sobre JavaScript. Vue.js es la mejor opción (para mí) para iniciarte en este mundo.

La entrada Documental sobre la creación de Vue.js se publicó primero en El blog de Skatox.

Hoy se celebran los 25 años del lanzamiento de la primera versión de PHP lanzada por Rasmus Lerdorf. Quería hacer un artículo en blog porque es el lenguaje que mas he utilizado en mi carrera profesional y el que ha generado mas ingresos económicos.

Mi historia con PHP

Mi primer recuerdo con PHP fue alrededor del 2004. Recuerdo estar en la moda del hacking. En esa época creaba xploits con formularios HTML para sacar contraseña las personas. Entonces necesitaba aprender a como enviar correos desde el servidor una vez capturado los datos del formulario. Asi fue como empecé a realizar scripts de PHP para enviar de correos. Luego los modifiqué para atacar con correos a ciertas personas y así sucesivamente.

Al empezar este blog utilicé Simple PHP Blog como motor del blog. No sabía como usar base de datos y este motor era perfecto. Para poder realizar modificaciones y ajustes empecé a aprender a usar el lenguaje para hacer sitios web dinámicos. También la parte de mi página que era puro HTML lo logré reducir al utilizar porciones del mismo en PHP.

WordPress

A medida que aumentó los requerimientos de este blog y recibir visitas. Migré el motor a WordPress en el 2006. Allí me pulí en el lenguaje cuando me tocaba hacer mi propio tema y realizar unos pequeños plugins. Luego en el 2009 hice mi primer plugin público que me permitió darme a conocer como desarrollador, conseguir mis principales clientes y mis primeros trabajos. 15 años después sigo trabajando con este CMS y es una de mis principales áreas de trabajo.

phpPgAdmin y Yii Framework

Al finalizar mis estudios universitarios en el 2009. Conseguí trabajo como desarrollador de .NET. Sin embargo, hubo un proyecto que me asignaron en PHP y estuvimos estudiando frameworks para realizar una solución. Esa vez Angel Velásquez me recomendó Yii framework. En ese entonces me gustaba su estructura formal y empresarial por lo que lo empecé a usar. Al salir de esa empresa, en los futuros trabajos seguí usando el framework y cuando me independicé utilicé la versión 2.0 del mismo hasta el día de hoy. Casi todas las soluciones que he implementado ha sido a través de este lenguaje.

También el 2009, estuve participando con código en phpPgAdmin. Recuerdo que cuando salió la versión de PHP 5.3 tuve la oportunidad de actualizar algunos detalles para que funcionara en esa versión. Al colaborar con un proyecto de software libre, aprendí mucho como usar este lenguaje e implementar varios patrones de software en PHP.

Mi opinión de las burlas del lenguaje

Todos los programadores saben que PHP es lenguaje utilizado para burlase. El motivo es que durante las versiones 4.0 y primeras 5.x. El paradigma del lenguaje era un híbrido entre funcional y orientado a objetos. Permitiendo escribir código de forma horrible: una parte funcional y otra con orientado a objetos; mezclar vistas HTML con lógica de negocio en PHP en un mismo archivo. Algo así como era JavaScript pero por ser mas popular y un buen lenguaje para permitir a principiantes crear sitios, fue común ver código PHP mal escrito.

Pero con la evolución del lenguaje a lo largo de las versiones y con las mejoras implementadas en PHP 7.0. Me parece que hacer este tipo de burlas quedó en el pasado. Tal vez hay personas que solo repiten lo que ven, no investiga para estar actualizado en otros lenguajes y se centran en uno solo.

El futuro de PHP

PHP 7.x mejoró mucho el lenguaje y esta sentando las bases para que la versiones 8.x sean una maravilla. Poco a poco el lenguaje esta soportado el tipado y características de lenguajes modernos. Con la implementación de un JIT (Just in Time compiler) las aplicaciones se ejecutarán mas rápido y permitirá ser mas escalable.

Aún queda mucho campo laboral, aplicaciones y futuro para este lenguaje. Esta lejos de morir y a pesar de existir nuevos lenguajes con mejoras o propósitos similares a PHP. No hay señas de una desaparición de PHP. Por lo que aún recomiendo aprenderlo si te llama la atención el desarrollo web.

Me gustaría conocer tu opinión de PHP o alguna experiencia con este lenguaje. Solo deja un comentario compartiendo tus conocimientos de PHP.

La entrada Felices 25 años PHP se publicó primero en El blog de Skatox.

SEO Rapper es un rapero y programador que ha publicado varias canciones del mundo de la informática en Youtube. He compartido varios de sus vídeos dentro de mi sección de Música Geek.

Luego de un tiempo ausente ha vuelto con una canción sobre el mercadeo digital, o mejor conocido como digital marketing por sus términos en inglés.

Así que te dejo con este vídeo de SEO Rapper, espero que te guste y te entretengas un par de minutos.

Si te gustó este vídeo no dudes en compartirlo en tus redes sociales y en animarte a hacer tu propio video de rap informático.

La entrada Digital Marketing por SEO Rapper se publicó primero en El blog de Skatox.

Al momento de escribir este artículo, gran parte de la población mundial está encerrada en sus casas debido al Coronavirus. Por lo tanto, se han visto forzadas a trabajar de forma remota (o teletrabajo como le llaman algunos) para conservar sus empleos. Para muchos es la primera vez y no sabén como hacerlo, por eso, me motivé a compartir los consejos que he aprendido en estos 9 años que llevo trabajando desde casa.

Consejos para el teletrabajo

  • Dedicar un espacio de tu casa a trabajar: es importante dedicar un espacio solo para trabajar. Esa será tu oficina y acondicionarás a tu cerebro a pensar que ese espacio es exclusivo para trabajar. Lo ideal es que esté lejos o separado de tu habitación. Pero si vives en un monoespacio (apartemento tipo estudio) entonces selecciona un área del cuarto exclusivamente para ello. Te recomiendo leer mi artículo sobre tener una oficina en casa para el trabajo que realicé hace un par de meses.
  • No trabajar desde tu cama: la cama es lugar para descansar, dormir, entre otras cosas. Pero no para trabajar, de lo contrario tendrás problemas para dormir, será mas díficil separar tu vida diaria de la laboral. Además trabajarás de forma incómoda y causarás daño a tu columna vertebral.
  • Invierte en objetos ergonómicos: es importante cuidar tu cuerpo. Si tienes problemas de columna, tunel carpiano, etc. No podrás trabajar de forma correcta y aparte de dañar tu vida no serás productivo. Por eso es importante comprar sillas con las medidas cómodas para tu tamaño y mesa. Compra un ratón o panel táctil que sean ergonómicos, ajusta el monitor a la altura de tu campo visual, entre otros. Puedes ver mi mesa en este artículo «Mi mesa de trabajo de freelancer» y conseguir mas detalles.
Mi mesa de freelancer
Mi mesa de freelancer
  • Preparate para tener buena conexión a Internet: el teletrabajo es posible gracias a Internet. Por eso debes invertir en una conexión acorde a las necesidades de tu trabajo, por ejemplo, si haces muchas videollamadas o tu trabajo consiste en llamadas de vídeo, debes invertir en buen ancho de banda. Si trabajas con edicion de vídeo y necesitas subir o descargar videos, también. Mi recomendación es que si tu presupuesto lo permite, adquiere servicios de Internet adicionales y usa otra compañía como proveedor de Internet móvil. De esta forma, si falla la conexión con una compañía, podrás usar la alternativa como respaldo y siempre tener conexión y evitar problemas laborales.
  • Adquiere una computadora con buenas prestaciones para tu trabajo: mucha gente quiere trabajar de casa con su computadora de hace 10 años, si el presupuesto no te lo permite dedicar a ahorrate para comprar una computadora acorde a tus necesidades. Si eres programador, debes tener una computadora que te permita usar las tecnologías mas modernas, arquitectos deben tener equipos con capacidad para soportar el renderizado o manejo de los planos. Ademas, si eres un profesional independiente. Piensa en tener un equipo portátil para poder llevarlo a sitios de clientes u otras organizaciones donde sueles trabajar.
  • Adhiérete al horario de trabajo: un grave error de las personas que trabajan de forma remota es trabajar sin horario definido. Debes establecer un horario fijo y respetar esas horas. En muchos trabajos la gente depende de otros y es molesto no contar con ellos en las horas requeridas. Al finalizar tu jornada, debes salir del trabajo. En casa es fácil dedicar horas extras (que a veces no se pagan) a «terminar» parte del trabajo que se hace, o te sientes culpable si te faltaba poco para hacer alguna cosa adicional. Pero debes respetar tu vida privada y dedicar tiempo a ella, por eso los horarios ayudan a mantener ese balance del teletrabajo y vida persona.
  • Realiza rutinas antes y despues de trabajar: no te despiertes y comiences a trabajar de una vez. Tampoco ve a dormir apenas termines de trabajar. Debes realizar actividades antes y despues de trabajar, en mi caso suelo ver un episodio de una serie o ver un video de youtube, cocinar desayuno o cena, entre otro. Es importante que el cerebro se active (o descanse al terminar) del trabajo. Esto es relacionado al punto anterior, en el teletrabajo debes establecer diferencias entre trabajar y tu vida personal. Trabajar remoto no implica mezclar ambas cosas.
  • Respeta las horas del almuerzo, merienda y cena: Parecido al punto anterior, pero es importante que mantegas rutina como almozar a la misma hora, de esta forma no alteras tu organismo, las personas con quienes trabajas sabrán que no estas disponible en esas horas y no te molestarán.
  • Mantén tu higiene: el telegrabajo no es descuidar tu aparencia personal, recuerda lavar tu cara, peinarte, cepillar los dientes. Todo como si fueses a salir de casa. Estar en casa no es excusa para descuidar todo esto. Un consejo que me recemendaron y siempre aplico, es cambiar mi ropa. Nunca trabajo con pijamas porque el cerebro así no relaciona el trabajo con el sueño/dormir.

Espero que te haya gustado estos pequeños consejos. Yo los aplico todos y han hecho que mi teletrabajo sea mas cómodo. No interfiera mi vida personal y aumente mi productividad. Si te animas a seguir trabajando de esa manera, te lo recomiendo, es genial porque ahorras tiempo y dinero pero pierdes vida social.

Si necesitas ayuda o mas información, no dudes en comentar y comparte a otros que comenzaron con teletrabajo y les podría interesar.

La entrada Consejos para teletrabajo (trabajo remoto) desde casa se publicó primero en El blog de Skatox.

Hace unos meses tuve la oportunidad de asistir al BrazilJS 2019 como conferencista. Allí dicté la charla con mayor asistencia de todas las que he dado, con 2000 personas aproximadamente y la más dificil que he tenido. Era sobre Aplicaciones de alto rendimiento con WebAssembly.

¿Por qué la mas difícil?

Obviamente se darán cuenta que mi idioma nativo es el español (je,je,je) y como la mayoría de los asistentes habla portugés no sabía si dar la charla en inglés o español. BrazilJS 2019 contaba con un traductor quien me dijo que podía hablar en cualquier idioma y él lo traducía al portugés. Hablando con varias personas, pregunté si debía hablar en español o en inglés. La mayoría me dijo que es mas fácil entender en inglés que español a pesar del parecido con el portugés.

Entonoces, como tenía las láminas traducidas al portugués (siempre traduzco las láminas al idioma nativo del sitio donde voy), tenía que:

  • Hablar en inglés.
  • Al ver las láminas para explicar estaban en portugués.
  • Mis notas y mi idioma nativo estabán en español.

Sin embargo, todo salió bien y pude disfrutar de compartir mis conocimientos ante 2000 personas presentes en el BrazilJS 2019.

¿Cómo es hablar ante tantas personas en un evento como BrazilJs 2019?

En un almuerzo con otros ponentes uno de ellos comentó que luego de 500 personas es casi lo mismo. Si tienes 500 o 2000 personas frente a ti es lo mismo, el campo visual no abarca a ver todos al mismo tiempo. En mi caso me pasó eso, es genial sabe que tanta gente te escucha al mismo tiempo pero no causa mayor nervio o se siente distinto al hablar frente a 400 personas.

Si tienen algún comentario o duda de la charla, pueden dejar un comentario o contactarme.

Espero que les haya gustado, compártanla con otros.

La entrada Mira mi charla de WebAssembly en el BrazilJS 2019 se publicó primero en El blog de Skatox.

La tecnología de correo electrónico es una de las mas viejas de Internet. Pero es la que solemos usar con mucha frequencia y está lejos de morir. Por eso se utiliza mucho los correos para mercadeo. Uno de los problemas de diseño de los correos es un proceso lento de enviar y la autenticación es un poco mala. Esto permite que sea fácil enviar un correo con cualquier dirección desde cualquier servidor de correo (así no sea el tuyo) y realizar SPAM (correos no deseados).

Cuando hacemos campañas de email marketing necesitamos enviar cientos o miles de correos en poco tiempo. Con servicios tradicionales o cuentas de correos personales no lo podremos hacer. Al momento de iniciar el proceso los proveedores detectarán esto y lo tomarán como si fuese SPAM o si usas una cuenta de correo personal, tomaria segundos enviar cada uno y te tardarías días.

Servicio de correos para mercadeo

Existen empresas que ofrecen el servicio de correos para mercadeo. Estas empresas poseen servidores que permiten enviar cientos de correos en poco tiempo, con configuraciones para que no luzcan como SPAM y con código adicional para poder hacer operaciones de mercadeo, como: conocer si vieron el mensaje, detectar si hicieron clic al enlace, adaptar cada correo al destinatario entre otros. A este tipo de correos se le conoce como correos para mercadeo.

Así que si deseas hacer mercadeo por correo, contrata un servicio de estos. En mi opinión, lo mas importante de estos servicios es poder enviar muchos correos en masa en poco tiempo y que no sea detectado como SPAM. He conocido muchas personas que han intentado hacer esto por cuenta propia y los demas servidores de correo los detectan como SPAM y automaticamente todos los correos para mercadeo que salen de ese servidor, nunca llegarán a la bandeja de correo de los clientes. Dañando toda tu campaña.

Para finalizar, espero que te haya gustado este artículo, si tienes dudas o comentarios sobre correos para mercadeo. No dudes en escribir un comentario o compartir este artículo.

¡Feliz mercadeo!

La entrada ¿Qué es un servicio de correos para mercadeo? se publicó primero en El blog de Skatox.

Hace unos días me tocó actualizar mi computadora de escritorio que tenía 4 años sin actualizarse debido a que había migrado a una MacMini. Entonces procedí a realizar una actualización de todo el sistema usando:

pacman -Suyy // la doble Y actualiza toda la información de los repositorios

A pesar de tanto tiempo sin actualizarse, la actualización fue de 1.7 GB y prácticamente fue reinstalar todo. Revisé en las noticias de Archlinux y vi que las intervenciones manuales no eran necesarias para este equipo. Pero se quejó de dos cosas:

  • Habían muchos archivos del xproto y kde-l10n-es que estaban en el sistema. Mi proceso fue moverlos a una carpeta de respaldo y funcionó (pues la opción para forzar escritura fue removida).
  • No podía actualizar el kernel CK (Utilizo la variante de CK porque está diseñada para computadoras de escritorio) porque no podía descomprimir paquetes en formato XZ.

Como dañé PacMan

Para resolver el último problema, intenté actualizar el Package Manager a la última versión. Pero solo actualicé ese paquete y no las dependencias. Algo que en Archlinux es pecado porque debes hacer actualizaciones completas para evitar el problema que ocurrió.

Al hacer ese proceso, el nuevo pacman dependía de una nueva versión de libc y no podía actualizar la librería porque no funcionaba pacman.

Pacman-Static

Descubrí el paquete PacMan-Static. Es una versión de pacman en formato binario, cuyas liberías requeridas están enlazadas. Entonces puedes ejecutar el gestor de paquetes sin ninguna dependencia adicional.

Una vez descargado el binario, le di permisos de ejecución y actualicé el sistema:

chmod +x pacman-static  ## Permisos de ejecución
pacman-static -Su ## Para actualizar el sistema

Luego de eso pude actualizar todo y reiniciar sin problemas.

Archlinux y las instalaciones largas

Pensé que iba a tener mas problemas al actualizar Archlinux. Pero no tuve mas problemas aparte de archivos existentes que podía mover antes de actualizar. El otro problema lo hubiese podido evitar si no hubiese hecho actualización parcial.

Por eso es que me gusta esta distribución de Linux.

La entrada Borré o dañé PacMan ¿Qué puedo hacer? se publicó primero en El blog de Skatox.

El pasado 19 y 20 de Octubre se realizó en la ciudad de Panamá, el primer WordCamp Panama. WordCamp es un evento oficial de WordPress organizado por la comunidad local donde se reúnen entusiastas de esta tecnología para compartir sus conocimientos.

En la edición de este año tuve la oportunidad de participar en el evento como ponente representando a Mozilla Tech Speakers. Era mi primer viaje real a Panamá, ya que sólo estuve unas horas anteriormente.

1er día del WordCamp Panamá

Al llegar a la entrada del evento, comenzaba el proceso de registro. Allí me diero el swag del evento y procedí al teatro principal. El formato del WordCamp Panamá consistía en tres charlas simultáneas en distintos lugares: teatro principal y aulas de la universidad. Generalmente las charlas de dividían en desarrollo, mercadeo y diseño. Atendí principalmente a las de desarrollo y algunas de mercadeo.

El evento comenzó con unas palabras de Ernesto Morales hablando sobre el esfuerzo para realizar evento y como fue la organización del mismo. De ahí fui a la charla de Miguel Díaz sobre como debes vender tu producto en la Web y los complementos de WordPress que facilitan este proceso. Ricardo Rubio nos mostró como hacer sitios estáticos en WordPress y unos hacks para hospedar nuestros sitios en servicios de forma gratuita.

Las charlas de Andrea Navarro, Pedro Rosillo y Felix Bellido estaban dirigidas a como mejorar nuestro negocio en Internet, utilizando mercado, estrategias digitales, Google Adsense, Google Business entre otros. Obviamente no faltó mencionar los plugins que nos permiten implementar estas funcionalidades fácilmente. De ahí fui a una charla de Jose Jimenez Vega sobre como crear tu marca personal.

En el siguiente turno asistí a las charlas de desarrollo, un taller de Ricardo Rubio sobre optimización de sitios en WordPress. Y finalmente la ponencia de Joaquin Vargas sobre como usar Programación Orientada a Objectos en WordPress.

El evento contaba con recesos entre los turnos para el networking, comida gratuita (incluyendo almuerzo) para los asistentes. Ademas de casillas de los patrocinadores para obtener información de los servicios.

2do día del WordCamp Panamá

En el segundo día, solo pude asistir a las charlas de la tarde (tuve un fuerte vuelo y debía descansar). Entre esas la de Rafael Lara sobre seguridad en WordPress. Estuvo genial porque explicó los conceptos de seguridad pero enfocados en este CMS.

Luego de él era mi turno. En esta ocasión hablé sobre las Herramientas de Desarrollo de Firefox orientadas al desarrollo de WordPress. Mostré como se pueden usar las herramientas para usar las últimas tecnologías de CSS en temas de WordPress: CSS Grids, Flexbox, Variable fonts. También comenté sobre las herramientas de JS, Chrome Logger para mostrar los logs de PHP en el navegador, herramientas para el rendimiento, entre otros. (Agradezco a Alcibiades Guevara por tomar las fotos de mi charla)

Luego procedimos al cierre donde se tomó la foto grupal, los organizadores nos dieron la despedida y finalización formal del evento.

Resumen

El WordCamp Panamá fue un gran evento, con ponencias de todas las áreas que abarca WordPress: mercadeo, desarrollo, servidores, negocios, diseño, periodismo, entre otros.

La comunidad me pareció muy agradable, son personas cuya colaboración se nota que es por amor y no buscando reconocimiento, está compuesta por personas de distintos países, entre otros. Por eso te recomiendo asistir a un WordCamp Panamá, además el país ofrece lugares para turismo y vivir una experiencia caribeña.

Si tienen algún comentario del evento o de mi ponencia, no duden en escribir.

Happy blogging!

La entrada Mi experiencia en el WordCamp Panama 2019 se publicó primero en El blog de Skatox.

Este año tuve la oportunidad de participar en el BrazilJS Conf del 2019. Para quienes no la conocen es la conferencia de JavaScript mas grande del mundo. Había enviado ponencia en las últimas 3 ediciones pero finalmente este año fui aceptado. Mis expectativas era que el evento iba a estar genial pero no sabía como era.

Cuando fui al escenario a realizar la prueba de sonido. Me sorprendí porque no sabía la magnitud del evento. El lugar contaba con puestos para 2000 asistentes y con 4 pantallas gigantes para mostrar la conferencia. Ademas que contaba con excelente organización para entretener a la audiencia y contar con 2 tarimas para no perder tiempo entre ponentes.

El formato de BrazilJS Conf 2019

El evento constaba de 3 días: el primero era de puros talleres y para los ponentes era el día de realizar pruebas. aquí tuve la oportunidad de ver un taller de Matías Johanson sobre el uso de redes neuronales en JavaScript, unas charlas de NIC Brazil y W3C sobre la des-centralización de la web. Pude entrar a una charla de marketing usando datos éticos, es decir, no obtenidos sin permisos de los usuarios o comprados a redes sociales. Me llamó la atención esta última porque no había pensado en que ahora el marketing se hace con datos robados de los usuarios.

El segundo día era el inicio real del evento. Me encantó que habían 2 tarimas, así cuando un ponente estaba por terminar el otro se preparaba y el cambio se hacía sin perder tiempo. También entre cada ponencia un grupo acústico tocaba la canción favorita del ponente entreteniendo la gente. El evento comenzó con un video introductorio de los organizadores, muy emotivo. Luego unas palabras de Jaydson Gomes sobre el trabajo realizado y lo que se esperaba allí. Pude entrar a varias charlas, todas muy buenas y algunas en inglés. Luego de finalizar el evento, varias asistentes organizaron una salida para compartir y conocernos mejor.

El último día seguía el mismo formato del anterior. Llegué un poco tarde por estar practicando mi charla y tenia que hacer una visita. Pero luego de dar mi charla pude disfrutar de todo el evento. En la sala de patrocinantes había un puesto para comprar camisetas donde aproveche y adquirí de VueJS y del evento. También habían unas barajitas con fotos de los ponentes del evento y podías pegarlos en un albúm. En los stands de patrocinios podías conversar con la gente de proyectos y ofertas laborales.

Mi ponencia sobre WebAssemby

Siempre que doy esta charla debo agregar contenido nuevo. Para este evento había agregado cosas nuevas como un demo de Doom 3, Google Keep, entre otros. Por eso no estaba preocupado por la calidad del contenido sino porque debía darla en inglés y no estoy acostumbrado a ello.

Traducí las láminas a portugués usando un traductor en línea. Posteriormente me ayudaron a acomodar algunos detalles. Me gustó ver a las personas emocionadas porque disfrutar el contenido escrito de mi conferencia en portugués. Recibí buenos comentarios en redes sociales sobre ello.

Miguel Useche hablando de Webassembly en el BrazilJS Conf del 2019
Mi auto-retrato antes de comenzar la ponencia. Noten la cantidad de gente, es la mitad porque del otro lado había más.

Creo que me fue bien. Estaba un poco nervioso por tener que hablar en inglés, ver las notas en español pero las láminas en portugués. Respecto a la cantidad de gente, era tanta que no era posible enfocarse en todos, así que no era un problema.

Miguel Useche hablando de Webassembly en el BrazilJS Conf del 2019
Miguel Useche hablando de Webassembly en el BrazilJS Conf del 2019

Palabras finales

BrazilJS Conf fue uno de los mejores evento que he estado. Una organización increíble, excelentes temas y conferencistas. El lugar estaba equipado con todo. La ciudad de Porto Alegre es muy bonita, la gente es demasiado amigable. La comida es excelente, sobre todo las carnes. Buenos dulces y chévere para conocer.

Si alguna vez les llama la atención ir a un BrazilJS Conf, no duden e ir.

La entrada Mi experiencia en el BrazilJS Conf de 2019 se publicó primero en El blog de Skatox.

Si están utilizando Vuetify y desean un componente para mostrar notificaciones en vue.js. Verán que existe una llamado Snackbar que permite implementarlos. El problema de este componente es que requiere definirse en cada vista que hagamos en Vue (por la naturaleza de esta librería) y debemos crear un método para mostrarlo.

Esto es un problema en aplicaciones grandes, porque tendríamos código repetido y descentralizado. Gracias a Vuex podemos evitar este tipo de cosas. Por lo que te explicaré como crear notificaciones con vue.js con Vuex.

Definir opciones del Snackbar en Vuex

Primero vamos a definir en vuestro archivo store.js (o donde instancias Vuex.Store) un estado para tener la configuración por defecto del Snackbar. El estado permite almacenar los parámetros del Snackbar de forma global y poder ser accedida desde cualquier vista. Para ello en la sección de state agrega las siguientes opciones:

export default new Vuex.Store({
  state: {
    snackbar: {
      visible: false,
      color: "success",
      text: null,
      timeout: 10000,
      multiline: false
    },
    ...
    ...
  },

Luego en el mismo archivo, definimos una mutación. En Vuex las mutaciones son los métodos que nos permiten modificar un estado. Esta mutación la usaremos a lo largo de la aplicación para lanzar la notificación desde cualquier lado.

El primer parámetro siempre es el estado actual y el segundo el payload. Éste último es enviado cada vez que llamamos a la notificación con el fin de definir la apariencia. Por ejemplo, si ocurre un error podemos enviar los parámetros de que el tipo de notificación sea error y aparezca de color rojo.

En este ejemplo, agregué opciones para decidir si mostrarlo en multi-línea , elegir color, tiempo de duración, etc. Así que en la sección de mutaciones del store.js agrega:

mutations: {
    alert(state, payload) {
      state.snackbar.text = payload.text;
      state.snackbar.multiline = payload.text.length > 50;

      // Si es mas de 50 caracteres definirlo como multilinea
      if (payload.multiline) {
        state.snackbar.multiline = payload.multiline;
      }
   
      // Color para mensajes de error o éxito
      if (payload.color) {
        state.snackbar.color = payload.color;
      }

     // Tiempo de duración
      if (payload.timeout) {
        state.snackbar.timeout = payload.timeout;
      }
      state.snackbar.visible = true;
   },
   closeAlert(state) {
      state.snackbar.visible = false;
      state.snackbar.multiline = false;
      state.snackbar.text = null;
    },
}

También en esta sección de mutaciones agregué una mutación llamada closeAlert(state) para poder alterar la configuración del snackbar y hacer que se oculte.

Crear el componente de la notificación

Lo mas fácil es crear un componente para la notificaciones. Pues así no mezclas código y lo puedes ubicar en un sólo lugar para que se lance.

Este componente consta simplemente de un Snackbar cuyas opciones son extraídas de un dato llamado snackbar. Este dato es extraído del estado de Vuex definido previamente a través de una variable computada.

Aquí puedes ver el ejemplo de mi componente:

<template>
  <v -snackbar top="" v-model="snackbar.visible" :timeout="snackbar.timeout" :multi-line="snackbar.multiline === true" :color="snackbar.color">
    {{ snackbar.text }}
    </v><v -btn text="" dark="" @click="closeAlert">Close</v>
 
</template>
<script>
import { mapMutations } from "vuex";
export default {
  computed: {
    snackbar() {
      return this.$store.state.snackbar;
    }
  },
  methods: {
    ...mapMutations(["closeAlert"])
  }
};
</script>

Ahora, para implementar el cierre, importo las mutaciones de Vuex para tener acceso a la función closeAlert que definimos previamente. De esta forma al llamar a closeAlert (una mutación) modificará el estado de la variable visible, haciendo que se oculte.

Este component lo puedes colocar antes del cierre de tu v-app para que se pued mostrar en todas las páginas.

Crear las notificaciones en Vue.Js

Cada vez que desees mostrar una notificaciones en vuej.js, solo debes realizar un commit. El primer parámetro es el nombre de la mutación, en este caso alert y las opciones del snackbar la pasas como segundo parámetro.

Un ejemplo para una notificación de error sería algo como:

this.$store.commit("alert", {
  color: "error",
  text:
    "Could not load purchase order info. Status Code: " +
    response.status
});

¡Listo! Ahora podrás mostrar notificaciones con vue.js de forma centralizada a lo largo de tu aplicación.

La entrada Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex se publicó primero en El blog de Skatox.