por ·Sin comentarios

Todo desarrollador requiere tener acceso inmediato a la documentación de las tecnologías que trabaja. Pues nuestro trabajo es resolver problemas y no sabernos de memoria como funciona todo. El principal problema es que la documentación suele ser extensa, variante y por ello suele encontrarse hospedada en Internet. Pero cuando no tenemos buen acceso a Internet debido a que estamos viajando, nos encontramos en un café con mala conexión, vivimos en un lugar con poco ancho de banda y otros, se vuelve un problema acceder a esta documentación. Para estos casos podemos usar DevDocs, un sitio que nos permite almacenar en nuestro navegador la documentación de muchos sitios web.

Cómo funciona DevDocs

DevDocs posee una lista de tecnologías junto a su respectiva versión. Al hacer clic sobre cada uno de ellas verás desplegada la documentación oficial (al menos en las que probé). Encima de cada enlace del menú puedes hacer clic en Enable y empezará a descargar la documentación al almacenamiento local del navegador para posterior lectura, así no tengas acceso a Internet.

Entonces al estar guardada en tu navegador, puedes acceder a DevDocs y podrás acceder a toda la documentación guardada sin la necesidad de tener conexión a Internet. Inclusive, si tienes conexión pero es lenta, es mucho mas rápido acceder a esta documentación guardada. Otra ventaja es que la documentación se sincroniza automáticamente entonces no debes preocuparte por si esta obsoleta o con errores por actualizar.

Interfaz de DevDocs
Interfaz de DevDocs

Ventajas de usar DevDocs

  • Tienes acceso rápido a la documentación en tu propio equipo sin acceder a Internet.
  • Puedes ver la documentación de varias tecnologías en un mismo formato. Tal vez no parece importante pero es cómodo no estar viendo formatos distintos cuando trabajas con varias tecnologías a las vez.
  • El buscador integrado te permite hacer una búsqueda en varios lenguajes a la vez. Útil para comparar o ver donde es mas fácil hacerlo.
  • Al ser una página web, puedes acceder la desde cualquier dispositivo. Puedes tener la documentación abierta en tu tableta o lector de libros así sea viejo.

Espero que te sirva esta información y permite mejorar tu flujo de trabajo. Recuerda compartir este artículo en las redes si te y gustó, o deja un comentario aportando tu opinión.

por ·Sin comentarios

El pasado mayo tuve la oportunidad de participar en el WordCamp España. Esta WordCamp España fue la primera en español en realizarse de forma remota debido al COVID-19. Debido al cambio de formato no sabía que esperar, pero fue una grata experiencia y me encantó el desarrollo del evento.

En esta edición tuve la oportunidad de participar con una charla sobre las herramientas de desarrollo del navegador. La misma fue orientada hacia WordPress por lo que verás como puedes usarla cuando creas un sitio web con este gran CMS.

El navegador es tu mejor amigo para el desarrollo con WordPress

A pesar de tener el mismo título que charlas anteriores. En esta edición actualicé el contenido de algunas herramientas, el orden y realicé mejoras gracias a unos consejos de Angel Zinsel, uno de los organizadores del WordCamp España.

El contenido de la misma es conocer algunas herramientas que ofrecen los navegadores para hacer sitios web y conocer como aprovecharlas cuando trabajas en WordPress. Te recomiendo verla y aprender a usarlas en tu navegador favorito para ahorrar tiempo de desarrollo y mejorar tu flujo de trabajo. Esta dirigida tanto a diseñadores, constructores de sitios, programadores de frontend y de backend.

Espero que te haya gustado mi ponencia del WordCamp España. Fue una gran experiencia haber participado en mi primer WordCamp remoto, el equipo de España hizo un excelente evento, la calidad de ponencias, el trato a ponentes, la organización, las salas de socialización, entre otros.

Recuerda compartir esta charla en redes sociales si te gustó y comienza a usar las herramientas de desarrollo de tu navegador favorita para mejorar el desarrollo de sitios con WordPress.

por ·Sin comentarios

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.

por ·2 comentarios

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.

por ·2 comentarios

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 dieron 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. Roberto 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 Félix 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 Jiménez Vega sobre como crear tu marca personal.

En el siguiente turno asistí a las charlas de desarrollo, un taller de Roberto Rubio sobre optimización de sitios en WordPress. Y finalmente la ponencia de Joaquín 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.

  • Miguel Useche en el WordCamp 2019
  • Mozilla Tech Speaker en el WordCamp Panama 2019
  • El navegador es el mejor amigo para el desarrollo con WordPress
    El navegador es el mejor amigo para el desarrollo con WordPress (Foto cortesía de Alcibiades Guevara)

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!

por ·Sin comentarios

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.

por ·Sin comentarios

Cuando ocurre un error de WordPress u obtenemos un error HTTP 500 en nuestra instalación (generalmente debido a un error de PHP). El primer paso para resolver el problema es leer el error para conocer que está ocurriendo. Sin embargo, muchos servicios de hosting desactivan mostrar los errores en pantalla para evitar mostrar errores en los sitios de los clientes (se ve mal visualmente). Otra razón para desactivarlo es para prevenir ataques debido a que el error muestre información oculta de la aplicación que pueda ser aprovechada para aprovechar vulnerabilidades.

En algunos casos, por motivos de rendimiento algunos servicios desactivan el almacenamiento de errores en segundo plano. Complicando la posibilidad de conocerlos y arreglarlos.

Cómo mostrar los errores de WordPress

WordPress posee un modo de depuración. Éste permite mostrar los errores de WordPress en la página o almacenarlos en un archivo.

Para activarlo, debes abrir el archivo /wp-config.php. Busca una sección donde puedes colocar constantes. Allí coloca las siguientes constantes:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);
@ini_set('display_errors', 0);

Ahora podrás ver los errores en pantalla, almacenados en el log e incluso forzando al servidor web a guardarlos. Simplemente chequea el error de WordPress. Soluciona y desactiva de nuevo el modo de depuración para volver la página a su estado original.

Espero que te sirva de ayuda. Si conoces otro método, no dudes en compartirlo. Y si deseas leer mas artículos de este tema. Puedes chequear mi categoría del blog dedicada a WordPress.