DEV Community: Blanca Azucena López Garduño

Trabajo remoto, la guía definitiva

Blanca Azucena López Garduño — Thu, 16 Apr 2020 22:44:06 +0000

El trabajo remoto siempre implica un reto que pone a prueba a los equipos, donde lo más importante es mantener la comunicación efectiva para los miembros del equipo. Esta guía intenta solventar los principales retos a los que nos enfrentamos día a día.

Comunicación general

La mala comunicación afecta la confianza
La comunicación debe ser clara y concisa, evita ambigüedades.
Hazle saer a tu equipo cuando estás lejos de la computadora (AFK)
Ten en cuenta las diferentes zonas horarias.
Adopte la comunicación asíncrona como primer medio
Toda comunicación debe incluir siempre un componente escrito, así cualquier persona puede ponerse al tanto sin importar la situación. Esto es realmente importante en la gestión de tareas y comunicados generales.
- ¿Hay un comunicado oficial? – Redacta un documento que deje las cosas claras, si es necesario agenda en el calendario una reunión para informar y resolver dudas.
- ¿Tienes una nueva idea? – Aterrízala en un documento que todos puedan revisar las veces que quieran.
- ¿Surgió una nueva tarea? – Agrega la tarea en el software de gestión que utilizan en la que detalles todo lo necesario, si es necesario notifica a los involucrados. Todo lo referente a esta tarea deberá quedar plasmado aquí.
- ¿Tienes comentarios sobre una tarea? – Todo eso coméntalo en el issue o ticket correspondiente. Así cualquiera puede revisarlo, aún si apenas se integró al proyecto.
- ¿Ocurrió algo off-topic? – Coméntalo en el chat o directo con la persona involucrada. Si aplica, agenda un espacio en tu calendario para que no se te agenden cosas en ese tiempo (Ej. ir al doctor)
- ¿Saliendo de una llamada? – El responsable de la llamada hace una breve lista con los puntos importantes o decisiones tomadas, esto evitará que se pierda el seguimiento.
- ¿Hay algo que requiera una explicación más complicada? – Además de un documento, puedes hacer uso de las ventajas de grabar un video de ti o tu pantalla (usando herramientas como Loom, Soapbox o similares), el resultado será asíncrono y puede ser visto varias veces.
- Date unos minutos para ponerte al día – Ten unos minutos para leer entender, y si es posible, mejorar las ideas que se proponen en los grupos respecto a lo que estés trabajando.

Videollamadas

Las videollamadas son realmente útiles para poder poner en sincronía a un equipo y fomentan la empatía y comunicación. Sin embargo, deben ser acotadas y directas para evitar fomentar la distracción del equipo de trabajo y que se pierda el enfoque.

Limita las llamadas a lo estrictamente necesario.
Toda llamada oficial debe tener una orden del día o tema a tratar y debe estar incluida en el evento.
Trata solo temas que involucren a todos los asistentes.
Establece un tiempo definido (si es necesario, utiliza un timer).
Utiliza la agenda del calendario para evitar traslapes.
Menos es más. Es mejor hacer reuniones más cortas que largas. Es mejor discutir un tema que muchos.
En caso de ser posible (si el ancho de banda lo permite), mantén la cámara encendida durante tus videollamadas. Esto ayuda a mejorar la sensación de presencia y atención.

Documentar todo

Todo lo que se habla por llamada se pierde, la historia de los chats se lleva lo demás con el tiempo, por eso es importante documentar todo lo que sea necesario.
Todo tiene un lugar y proceso. Se necesita ser super transparente cuando se trata de documentos compartidos, herramientas de gestión de proyectos y recursos en común. Saber dónde encontrar cada cosa hace todo más fácil.
Toda tarea o petición debe tener un registro en el software de gestión de tereas (GitLab Issues, GitHub Issues, Basecamp, Asana, Jira, etc) que describa todo su proceso y así se pueda priorizar y gestionar correctamente.
Para los textos y documentos se recomienda utilizar un formato Bottom Line Up Front (BLUF) donde el primer párrafo sea el que describa el objetivo y qué se necesita. VS

Estatus diario

Como beneficio principal es que al ser un mensaje simple, todos pueden conocer en qué estarán trabajando los demás en su día, sin tener que responder lo mismo a diferentes personas en diferentes momentos.

Al principio del día, todos los miembros publican el estatus super general sobre lo que se hará el día de hoy y si están bloqueados con algo.

Para esto se pueden usar soluciones automatizadas como Daily Bot, al que le contestas por un simple mensaje vía DM.

La idea es tener noción del estado general sin agobiar a nadie. Sé breve con tus respuestas, evita listar tareas atómicas (para eso están los issues o tickets).
¿Gestionas el proyecto? – Tómate el tiempo de leer los estatus de todo tu equipo y ajusta prioridades.

Gestión de tareas

Esta parte es fundamental para que esto no se vuelva un caos, si todo se encuentra bien detallado, todos sabrán qué hacer con sus tareas. Para esto hay que tener en cuenta lo siguiente:

Llevar el flujo de cada tarea en un solo lugar accesible para todos (software de gestión de proyectos). Así sabes que ahí estará siempre disponible cualquier comentario o actualización.
Prioriza las tareas usando las herramientas disponibles como listas, tableros y etiquetas.
¿Gestionas el proyecto? – Describe las tareas lo más específico que puedas, incluye screenshots o información adicional y asegúrate que estén priorizadas correctamente.
¿No haces desarrollo? – También puedes integrarte al flujo. Aùn usando herramientas de desarrollo, puedes adaptarlas por ejemplo usando un tablero tipo kanban con tus tareas. (4 ways to use GitLab Issue Boards)

Brainstorming

En caso de que se necesite hacer una sesión de lluvia de ideas, existen diferentes herramientas en línea que permiten hacer tableros colaborativos (como Miro) o incluso se puede utilizar la suite de Google para documentos.

Tambien se puede complementar creando diagramas de flujo en Draw.io o Lucidchart.

Estas herramientas también pueden ayudar en los procesos de pair programming.

Feedback constante

Al estar remotos, la forma de comunicarse se ve limitada incluso para obtener retroalimentación, el reto: las personas tenemos formas distintas de ofrecer nuestra opinión.

Las personas introvertidas por ejemplo, suelen sentirse más incómodos al levantar la voz en una reunión masiva. Aún así es importante que existan opciones para escuchar la valiosa opinión de todos. Algunas cosas a considerar para este tipo de situaciones son:

Solicitar comentarios por escrito. Los introvertidos tienden a preferir comunicarse por texto en lugar de cara a cara.
No comparar timidez con falta de productividad. Algunas personas no quieren el micrófono, pero eso no significa que no han logrado un gran trabajo.
Fomentar reuniones uno-a-uno. La mayoría de las personas se sienten más cómodas en grupos más pequeños, por lo tanto, aliente a las personas a hacer un seguimiento personal en lugar de analizar en reuniones grupales.
A los extrovertidos, dales oportunidades para guiar a otros empleados. Dar a sus empleados la oportunidad de guiar a otros es una gran oportunidad de crecimiento para el mentor y el mentoreado.
También para este tipo de personas desarrolle actividades virtuales de creación de equipos que alienten a los diferentes empleados a participar y comunicarse.

Reuniones 1-1

Intenta establecer un formato de preguntas para iniciar la conversación y dar pie a la retroalimentación, algunos ejemplos pueden ser:

¿Qué más necesitas de mí ahora?
¿Hay algo en lo que te sientas confundido sobre nuestros objetivos o mis expectativas?
¿Sientes que hay algo en lo que te esté sofocando y no te permito hacer tu mejor trabajo?
¿Estoy haciendo algo que bloquee la libertad que necesitas para tu trabajo?
¿Qué puedo hacer para equiparte mejor?
¿Qué tan retado te sientes por tu trabajo?
¿Qué podría ayudar a incrementar el nivel de reto?
¿Qué habilidades te gustaría desarrollar pero no has podido por tiempo?
¿Cuándo te sientes más motivado por tu trabajo? ¿Cómo podemos hacer más de eso?

Team Bonding

En esta situación, no es posible salir a tomar algo juntos o reunirse en el comedor, por lo que es importante tener un tiempo informal de unión con los compañeros de trabajo, algunas acciones a tomar en el día a día pueden ser las siguientes.

Sé empático con los demás. Al preguntarle a alguien sobre algo, asegúrate de decirle hola, preguntar cómo le está yendo y, en general: actuar como si fuéramos un equipo de humanos hablando con otros humanos.
Establecer canales de comunicación for fun. Ejemplo: Memes y preguntas random (¿cuál es tu película favorita? ¿cuál es el último libro que has leido?).
Celebra las victorias del trabajo o la vida con el equipo.
Agenda momentos de convivencia social / actividades / juegos (https://miro.com/guides/remote-work/team-buildinghttps://museumhack.com/virtual-team-building-for-remote-teams/)

Mantener una vida balanceada es crucial

Mantén una rutina diaria saludable. Bañarte, vestirte, desayunar, hacer ejercicio son actividades que deben permanecer en tu vida y te ayudarán a hacer la situación más llevadera.
Adecua tu espacio de trabajo. Considera una silla cómoda, escritorio, y cualquier cosa que debas tener a la mano durante tu jornada.
Mantén tu espacio limpio. Libre de distracciones en la medida de lo posible.
Planea tu objetivo del día, establece tus metas y toma un descanso entre actividades para mantenerte productivo.
El exceso de trabajo no ayuda a nadie. Disfruta de tu tiempo, respeta tus horarios de trabajo.

Sé flexible

La situación en este momento es totalmente diferente. Todos podemos necesitar nuestros 5 minutos de break o puede suceder un imprevisto. Algunos más tendrán que tomarse un tiempo para ocuparse de sus familias. Cada uno puede tener que adaptarse a la integración del trabajo con su vida actual.

No está de más recordar que para muchos puede ser muy difìcil que estamos viviendo, es importante hablarlo para que puedas recibir apoyo.

Y por último, y lo más importante...

Confía en tu equipo

RESOURCES

Como utilizar un proyecto de Vue como biblioteca de componentes

Blanca Azucena López Garduño — Thu, 12 Mar 2020 17:44:14 +0000

Últimamente he estado utilizando Vuejs para diferentes proyectos y en ocasiones me he encontrado con la necesidad de reutilizar ciertos componentes en otros proyectos.

¿Cómo podemos utilizar estos componentes en una biblioteca que pueda ser utilizada por otros proyectos? Afortunadamente, las herramientas de Vue nos permiten configurar la construcción en forma de biblioteca para exportar este tipo de componentes.

Empezaremos por tener dos proyectos: uno que servirá como biblioteca de componentes y otro que dependerá de esta y utilizará los componentes.

Para empezar, utilizaremos el generador de Vue para estos proyectos

yarn global add @vue/cli

# biblioteca
vue create dummylib

# app
vue create testapp

Si corremos el proyecto utilizando yarn serve podremos ver el despliegue de la aplicación demo en ambos proyectos.

Cuando se hace la construcción de un proyecto en Vue, por debajo se utiliza webpack para construir el sitio con los assets y dependencias necesarias.

Supongamos que tenemos en dummylib un componente que queremos utilizar en testapp

<!-- TodayDateComponent -->
<template>
  <div>
    <p>Today is {{ todayDate }}</p>
  </div>
</template>
<script>
import * as moment from "moment";
export default {
  computed: {
    todayDate() {
      return moment().format("LL");
    }
  }
};
</script>

Este componente tiene como función solo desplegar la fecha actual, utilizando una dependencia externa como moment.js

Construir como biblioteca

Ahora, necesitamos declarar el archivo main-lib.js donde se especifique qué componentes vamos a exportar.

// main-lib.js
import TodayDateComponent from "./components/TodayDateComponent.vue";
export default TodayDateComponent;

Si construimos normalmente el proyecto dummylib nos generará el sitio demo de Vue, necesitamos cambiar la configuración de construcción del proyecto a una biblioteca que exporte el contenido de main-lib.js

Afortunadamente, podemos usar el servicio de construcción de Vue para generar nuestro proyecto como una biblioteca en vez de un sitio web.

yarn global add @vue/cli-service-global

Para esto, utilizaremos vue-cli-service con el parámetro --target lib y un nombre para la biblioteca (--name dummylib) junto con la dirección del archivo en que se especifica los componentes exportados (src/main-lib.js).

El comando quedaría estructurado de la siguiente forma.

vue-cli-service build --target lib --name dummylib src/main-lib.js

Este comando podemos agregarlo a los comandos del archivo package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build-lib": "vue-cli-service build --target lib --name dummylib src/main-lib.js",
  "lint": "vue-cli-service lint"
},

Para que otro proyecto pueda usar nuestra biblioteca construida, necesitamos decirle cuál de los archivos utilizará como principal al importarla. Para esto, debemos agregar la ruta main al package.json

"main": "./dist/dummylib.common.js"

Dependencias externas

Ahora, si solo la construimos así sin más, la configuración nos hará incluir todas las dependencias y archivos importados dentro de nuestro paquete.

Para evitar esto, debemos modificar la configuración de webpack a través del archivo vue.config.js. Este archivo, nos permite incluir plugins de Vue para desarrollo (por ejemplo, pre-procesadores de HTML como Pug, o de CSS como SASS) y extender la configuración actual de webpack.

Para más información sobre las diferentes formas de configurar dependencias externas checa la Documentación de Webpack: Externals

/** vue.config.js */
module.exports = {
  // options...
  /** chainWebpack permite extender la config actual de webpack **/
  chainWebpack: config => {
    if (process.env.VUE_CLI_BUILD_TARGET === "lib") {
      /** Utilizamos solo esta configuración para el paquete de la biblioteca */
      config.externals({
        moment: "moment"
      });
    }
  }
};

Al decirle que obtenga moment de dependencias externas, ya no lo incorporará en el paquete.

Utilizar en el proyecto de prueba

Ahora, en el proyecto testapp podemos utilizar este componente añadiendo dummylib como dependencia.

yarn add ../dummylib

Pro-tip: Puedes usar yarn link para añadir la dependencia en modo de desarrollo en vez de usar la ruta relativa.
# ~/.../dummylib $
yarn link
cd ../testapp
yarn link "dummylib"
yarn add "dummylib"

Después de añadir la dependencia, obtendríamos el componente dentro de App.vue

<!-- App.vue -->
<template>
  <!-- ... -->
  <today-date-component />
  <!-- ... -->
</template>

<script>
import TodayDateComponent from "dummylib";
export default {
  name: "App",
  components: {
    // ...
    TodayDateComponent
    // ...
  }
  // ...
};
</script>

¿Qué pasa si mi componente usa Vuex store?

En este caso, la biblioteca se tendrá que exportar como un plugin de Vue para poder utilizar la instancia de vuex store de la otra aplicación.

Suponiendo que tengamos un componente como este:

<!-- ./components/DummyButton.vue -->
<template>
  <div>
    <button @click="increment">{{ text }}</button>
  </div>
</template>
<script>
export default {
  computed: {
    times() {
      return this.$store.getters.counter !== 1 ? "times" : "time";
    },
    text() {
      return `I have been clicked ${this.$store.getters.counter} ${this.times}`;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

Que utiliza un módulo de store como este:

/** ./store/module.js */
const store = {
  state: {
    counter: 0
  },
  getters: {
    counter: state => state.counter
  },
  mutations: {
    increment(state) {
      state.counter += 1;
    }
  }
};
export default store;

Necesitamos modificar nuestro archivo main-lib.js para que en vez de simplemente exportar los componentes, exporte un plugin de Vue que requiere un store de Vuex.

/** main-lib.js **/
import DummyButton from "./components/DummyButton.vue";
import TodayDateComponent from "./components/TodayDateComponent.vue";
import store from "./store/module";

export default {
  install(Vue, options) {
    if (!options || !options.store) {
      throw new Error("Please initialise plugin with a Vuex store.");
    }
    options.store.registerModule("dummylib", store);
    Vue.component("DummyButton", DummyButton);
    Vue.component("TodayDateComponent", TodayDateComponent);
  }
};

Y simplemente podemos reconstruir la biblioteca

yarn build-lib

Utilizar en el app

En nuestra app, tendremos que utilizar vuex e inicializar nuestro store.

yarn add vuex

/** ./store/index.js */

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({});

En nuestro archivo main.js de la app, debemos utilizar este store en la instancia de Vue, pero antes, inicializar nuestra biblioteca dummylib como plugin, pasándole el store.

/** main.js **/
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

/** Add dummylib as plugin */
import dummylib from "dummylib";
Vue.use(dummylib, { store }); // store required

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

Al inicializar nuestra biblioteca como plugin, ya no es necesario hacer el import de los componentes en App.vue por lo que podemos solo utilizarlos en el template.

<!-- App.vue -->
<template>
  <div id="app">
    <today-date-component />
    <dummy-button />
    <!-- ... -->
  </div>
</template>

Y voilá, ahora podemos hacer uso de ambos componentes dentro de testapp y utilizando la extensión de herramientas de Vue en el navegador podemos ver el estado del store.