
Hay 2 tipos de personas.

Los que saben cómo trabajar con solo 4-5 pestañas, y los que no pueden dejar de crear nuevas pestañas hasta que llegan al punto en que los navegadores se cuelgan.

Independientemente del tipo de persona que seas, ¿no te gustaría ser más productivo? ¿Encontrar la pestaña que te gusta con un par de clics? ¿Evitar la carga cognitiva de tener demasiadas pestañas?

Consigue tener un espacio de trabajo más simple posible y se más productivo.

## ¿Qué son los grupos de pestañas en Google Chrome?

Google Chrome introdujo una nueva función llamada "grupo de pestañas" que nos permite agrupar todas las pestañas que queramos en un grupo y asignarle un título y un color.

Esta es una de mis funciones favoritas y siempre deseadas de Google Chrome porque, aunque no soy un tipo que abre muchas pestañas, me gusta organizar mi espacio de trabajo con colores para que mi mente se sienta tranquila.

## ¿Qué nuevas funcionalidades trae la función de grupo de pestañas de Google Chrome?

Hay muchas funcionalidades agregadas a las pestañas y grupos para que puedas aumentar tu productividad. A partir de ahora, puedes:

1. Agregar una pestaña a un grupo
2. Asignar un título y un color al grupo de pestañas
3. Colapsar todas las pestañas de un grupo al mismo tiempo
4. Organizar/mover todas las pestañas de un grupo a la vez
5. Eliminar todas las pestañas de un grupo con un solo clic
6. Mover el grupo de pestañas a una nueva ventana

### Cómo agregar una pestaña a un grupo

Hay un par de formas de agregar una pestaña a un grupo, y depende de si el grupo al que queremos agregar la pestaña ya existe o no.

#### Cómo agregar una pestaña a un nuevo grupo

Si quieres agregar una pestaña a un nuevo grupo, debe hacer clic con el botón secundario en la pestaña deseada y seleccionar la opción "agregar pestaña al grupo".

Después de eso, se creará automáticamente un grupo de pestañas y aparecerá una pequeña ventana que te pedirá el nombre que desea.

Podrás asignar a este nuevo grupo de pestañas un título y un color.

![Steps to create a new tab group: Right-click on the tab, click on "add tab to group" and then "new group". A small window will come up to provide a title and select a color for the new tab group.](/images/blog/how-to-use-tab-groups-in-chrome/add-tab-to-new-group.gif)

Lo mejor de los grupos de pestañas es que no requieren la creación de un título, por lo que solo puede usar colores y tener un aspecto más minimalista.

Por ejemplo, yo uso un grupo de color rojo sin ningún tipo de texto para referirme a canciones o videos pendientes de ver.

![Google Chrome tabs without title but showing the color circle](/images/blog/how-to-use-tab-groups-in-chrome/tab-groups-without-title.png)

#### Cómo agregar una pestaña a un grupo existente

Hay dos formas de agregar una pestaña a un grupo de pestañas existente.

Puedes arrastrar la pestaña que desees dentro del rango del grupo de pestañas.

![Dragging a tab into a tab group to add it to the group.](/images/blog/how-to-use-tab-groups-in-chrome/add-tab-to-existing-group-by-drag.gif)

O hacer clic en la pestaña con el botón secundario y seleccionar "agregar a un grupo de pestañas" como se muestra en la figura 2.

![Steps to add a tab to an existing tab group. Click on "add tab to group" and then select the existing tab group.](/images/blog/how-to-use-tab-groups-in-chrome/add-tab-to-existing-group-by-click.png)

### Cómo cambiar el nombre de un grupo de pestañas

A veces, es posible que desees cambiar el nombre de un grupo de pestañas porque se volvió obsoleto o porque encontró un nombre mejor.

Para cambiar el nombre del grupo de pestañas, debes hacer clic en el círculo de color del grupo de pestañas con el botón secundario, y aparecerá una pequeña ventana emergente con una entrada para reescribir el nombre

![Renaming a tab group by right-clicking on the circle.](/images/blog/how-to-use-tab-groups-in-chrome/rename-tab-group.gif)

### Cómo alternar y/o mover todas las pestañas del mismo grupo en un instante

En algún momento, es posible que quieras expander/colapsar todas las pestañas contenidas en el mismo grupo al mismo tiempo, o reordenar los grupos de pestañas para mejorar su productividad.

Para hacerlo, solo tienes que hacer clic en el nombre o el color del grupo de pestañas para alternar todas las pestañas.

Ten en cuenta, que si solo has creado un grupo de pestañas, no podrás usar esta funcionalidad.

Para hacerlo, deberás tener al menos 2 grupos de pestañas creados.

![Renaming a tab group by right-clicking on the circle.](/images/blog/how-to-use-tab-groups-in-chrome/toggle-tab-group.gif)

Cuando se trata de mover todo un grupo de pestañas, arrástralo a la ubicación deseada.

Puedes arrastrarlo fuera de la ventana actual para que se cree una nueva ventana, o en la misma ventana ara reordenarlo.

![Dragging a tab group around to move it from left to right and vice-versa](/images/blog/how-to-use-tab-groups-in-chrome/move-tab-group.gif)

### Cómo eliminar todas las pestañas de un grupo

El propósito de algunos grupos de pestañas podría ser para fines temporales, como cosas relacionadas con el banco, documentación de todo tipo, etc. Después de completar una tarea, puede que quieras cerrarlas todas a la vez.

Para eliminar un grupo de pestañas y con ello, eliminar todas las pestañas contenidas en este, solo tiene que hacer "clic derecho" en el círculo del grupo de pestañas y seleccionar "cerrar grupo".

Con eso, cerrarás todo el contenido del grupo.

![Process of closing a tab group by doing a right-click on the tab group, and select the close group option.](/images/blog/how-to-use-tab-groups-in-chrome/close-tab-group.gif)

### Cómo mover un grupo de pestañas a una nueva ventana

Puedes crear fácilmente una nueva ventana a partir de un grupo de pestañas arrastrando el grupo de pestañas fuera de la barra de pestañas. La idea es la misma que haces con una sola pestaña.

¡Vamos a ver cómo funciona!

![Dragging a tab group outside the tab bar to create a new window.](/images/blog/how-to-use-tab-groups-in-chrome/move-tab-group-to-new-window.gif)

## Conclusión

Ahora que sabes cómo funcionan los grupos de pestañas en Google Chrome, podrás limpiar un poco su espacio de trabajo y traer paz a su mente 🧘‍♂️.


Como usar los grupos de pestañas en Chrome


Algunas personas tienen dificultades para recordar que tienen que ejecutar los tests antes de comprometer cualquier cambio. Y esto, es importante no olvidarlo para evitar subir al repositorio de nuestro código algo que rompa nuestra "build".

Mientras construía [una comunidad internacional para amantes de las plantas de interior](https://chooseyourplant.com?ref=devictoribero), me di cuenta de que tenía muchos tests pero no los incluía en ningún flujo de trabajo.

¿Cuál es el problema, podrías preguntarte? Enseguida me di cuenta de que no las estaba ejecutando constantemente, con lo que... estaba perdiendo información.

Automatizar al maximo posible tareas como revision de tipos y ejecutar los tests, nos permite tener confianza a la hora de introducir cambios importantes porque evita subir código que no queremos en el repositorio remoto.

Algunas personas usan [git hooks](https://www.atlassian.com/git/tutorials/git-hooks) para estas tareas.

Si estás usando git como control de versiones, es posible que sepas que tiene algunos hooks nativos que están ocultos dentro de la carpeta `.git`.

## ¿Cómo podemos usar git hooks fácilmente?

La mejor y más fácil manera de usar git hooks localmente es usando una biblioteca muy conocida llamada Husky. ¡Esta nos permite manejar los git hooks muy fácilmente!

## ¿Cómo usar Husky para ejecutar tests antes del commit?

El uso de Husky es bastante sencillo.

Solo necesitamos instalar el paquete y agregar alguna configuración al fichero `package.json`. ¡Nada más!

## Cómo instalar Husky

Es importante instalar Husky solo en entornos de desarrollo porque no es un requisito de producción.

Puedes instalar Husky ejecutando la siguiente línea de código:

`npm install husky --save-dev`

### Agrega la configuración de Husky en package.json

En la raíz de su proyecto, tendrás un fichero `package.json`. Ábrelo y coloca la configuración de Husky en la raíz del JSON.

Encontré interesante agregar tests en mi pre-commit y pre-push, por lo que cada vez que intento ejecutar `git commit` o `git push`, los tests se ejecutan.

Pero siéntete libre de agregar tantas cosas como desees, como linter, formato, tests, etc. Al igual que el código a continuación:

```JSON
// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}
```

### ¿Y ahora qué?

¡Ahora estás listo para usarlos! Pruébelo enviando algo en ejecución:

```
git commit -m "Finalmente estoy ejecutando pruebas en cada confirmación"
```


Cómo ejecutar tests automáticamente con husky antes de cada commit


Muchos son los errores que la mayoría de la gente comete al crear una Pull Request. Estos errores favorecen a que la Pull Request sea difícil de revisar por tus compañeros y que, por tanto, les tome más tiempo y energía.

Para explicar los errores más comunes, hemos de entender cuál es la esencia de las Pull Request.

## Que es una pull request?

Podríamos definir de manera pragmática que una Pull Request es una proposición de valor a nuestro repositorio del código que o bien aporta valor al desarrollador mejorando la experiencia de desarrollo de alguna manera, o que, por otro lado, aporta valor al usuario con un incremento de producto en forma de nueva funcionalidad o solventando un bug que existe en la aplicación.

Es conveniente que el tiempo de vida de las Pull Request sea lo más corto posible. Es decir, que el tiempo entre que se crea la Pull Request y que se ha aprobado y mergeado sea el mínimo, porque eso significa que hemos entregado valor lo más rápido posible.

## Pilares fundamentales para crear una Pull Request exitosa

Para asegurarte de que tus Pull Request son exitosas y que se aprueban rápidamente, te recomiendo tener en mente "los tres pilares fundamentales".

1. **La Pull Request ha de ser fácil de revisar**
2. **La Pull Request ha de ser rápida de revisar**
3. **La Pull Request ha de ser una unidad**

Teniendo en cuenta estos tres pilares fundamentales, te voy a listar a continuación algunos de los errores que se cometen más a menudo y que impiden que una Pull Request sea ágil de ser revisada.

## Errores que debes evitar al crear una Pull Request

### 1. No añadir cuál es el objetivo de la Pull Request

Esto viola los siguientes pilares fundamentales: “La PR ha de ser fácil de revisar” y “La PR ha de ser rápida de revisar”.

Toda Pull Request trata o bien de solucionar un problema o aportar una mejora. Este objetivo ha de estar plasmado en la descripción.

Al ocultar cuál es el objetivo de la Pull Request estamos forzando a que el revisor no se plantee ciertas preguntas.

- ¿Tiene sentido este incremento de producto?
- ¿Es necesario?
- ¿Qué cosas tengo que tener en cuenta?

Y no solo eso, sino que estamos forzando a que el revisor adopte el rol de "linter" así fijándose mayormente en si hay errores de escritura, typos, etc. _(Ya hablaremos en otro artículo de los distintos roles que podemos adoptar al revisar una Pull Request.)_

### 2. No añadir las especificaciones de la tarea ni la bibliografía relacionada

Esto viola el pilar fundamental: “La PR ha de ser fácil de revisar”

Partimos de la idea de que todo trabajo que realizamos tiene que tener una especificación que ha sido definida directa o indirectamente.

La especificación de la tarea es el conjunto de indicaciones y requerimientos que nuestra funcionalidad ha de cumplir.

La persona que revisa la Pull Request tiene que tener claras esas especificaciones para poder evaluar si el código se comporta como debería.

Por ejemplo, si estamos construyendo un componente visual para representar un producto cualquiera de nuestra tienda online, las especificaciones deberían plasmar los distintos componentes visuales que esta debería tener.

- Como se ha de mostrar el título
- Como se ha de mostrar la descripción
- Como se ha de mostrar el precio

Si las especificaciones de la tarea no están indicadas en ningún lugar, la persona que revisa la Pull Request no tendrá la información necesaria para revisarla de manera significativa.

Como podría saber la persona que revisa la Pull Request que por ejemplo el componente "ProductCard" ha de incluir las tallas del producto si no tenemos las especificaciones indicadas en ningún lugar. En este caso, es probable que el revisor apruebe la Pull Request porque el código se ve bien, pero realmente no sería correcto, pues la Pull Request no cumplía con las especificaciones establecidas porque la "ProductCard" no muestra las tallas de la ropa.

### 3. No añadir como se ha de probar el código

Esto viola el pilar fundamental: “La PR ha de ser fácil de revisar”

Para aprobar una Pull Request hemos de verificar que el código cumple unas especificaciones concretas. Para ello, hemos de poder recrear el escenario para verificar dichas especificaciones.

En el ejemplo mencionado anteriormente de la "ProductCard", el usuario que revisa la Pull Request tiene que tener claro que información ha de mostrar el nuevo componente "ProductCard" y verificar que la muestra.

Si por ejemplo estamos solucionando un error que sucede cuando un usuario invitado aplica un código promocional en el carrito de la compra, tendremos que indicar los distintos pasos para replicar este escenario.

1. ¿Cómo recreo ese rol para ese usuario?
2. ¿Qué tipo de producto o productos tengo que añadir al carrito?
3. ¿Tengo que probar un código promocional en concreto o puede ser cualquiera?

### 4. Añadir cambios al código que no se relacionan con el objetivo de la Pull Request

Esto viola los siguientes pilares fundamentales: “La PR ha de ser una unidad” y “La PR ha de ser rápida de revisar”.

Siempre se ha dicho que una de las mejores prácticas que podemos tener como ingeniero de software es la de dejar el código mejor de lo que nos lo hemos encontrado. A esta práctica se la conoce como la regla del boy scout. ¿Pero hasta qué punto esto es bueno?

Solo deberíamos modificar código que está directamente relacionado con el objetivo de la Pull Request.

Podemos hacer todo tipo de refactors. Cambios de nombre, extraer lógica en métodos, crear sub-componentes, nuevos servicios, etc. Pero siempre evitando grandes refactors. En caso de querer hacer un refactor grande, es mejor separarlo en otra tarea y Pull Request. En caso de no hacerlo, estamos incrementando el tamaño de la Pull Request y su complejidad accidental.

### 5. Hacer Pull Requests que sean muy largas

Esto viola el pilar: “La PR ha de ser rapida de revisar”

Está comprobado que cuanto más larga es la Pull Request, más tiempo pasa hasta que alguien la revise.

Esto se puede solucionar acotando las tareas e intentando que sean lo más granulares posibles además de evitar el error mencionado anteriormente (4).

Imagínate el escenario de qué producto quiere añadir las tallas de los productos en nuestro componente "CardProduct". Si para conseguir dicho comportamiento tenemos que refactorizar el componente "Tag", este desarrollo debería tener su propia tarea y también su propia Pull Request.

Gracias a tener tareas y Pull Requests separadas para estos dos desarrollos, ganaremos cohesión en nuestros incrementos de producto, así como también reduciremos el tamaño y la complejidad de las Pull Requests.

### 6. Mantener conversaciones relacionadas con un comentario de la Pull Request en otros canales

Esto viola los siguientes pilares fundamentales: “La PR ha de ser una unidad” y “La PR ha de ser rápida de revisar”.

Es importante que todas las conversaciones relacionadas con la Pull Request se puedan encontrar en esta misma. Esto servirá como documentación y enriquecerá el contexto de la Pull Request para otros revisores, tanto en ese momento, como en el futuro.

Algunas veces es mejor tener una conversación vía llamada o mensaje directo en caso de haber un gran número de preguntas o que las respuestas sean muy complejas y/o largas. Esto no significa que nos debamos quedar aquí, sino que deberíamos actualizar la Pull Request con un resumen las conclusiones que surgido de dicha conversación.


Evita los errores mas comunes al crear una Pull Request


Si has creado o está construyendo actualmente un producto, estoy seguro de que tiene una "página de lista" donde hay muchos elementos. ¿Alguna vez te has preguntado qué diseño funciona mejor para tu sitio?

Constantemente me pregunto esto a mí mismo para poder mejorar la experiencia del usuario y la conversión para [la comunidad mundial para los amantes de las plantas de interior](https://www.chooseyourplant.com) que estoy construyendo.

Al principio, elegí un diseño de masonry porque pensé que era bonito, como se puede ver en la imagen de abajo.

![A lot of plants of ChooseYourPlant shown using the masonry style](/images/blog/why-I-prefer-grid-layout-over-masonry/why-I-prefer-grid-layout-over-masonry-1.png)

Pero, ¿cuál es la mejor opción para mi producto? No precisamente. Te diré por qué finalmente elegí el diseño grid en vez del masonry:

## El diseño grid sigue un patrón visual de arriba a abajo de izquierda a derecha

Como sabrás, en América y Europa leemos e identificamos el contenido de arriba a abajo y de izquierda a derecha. Esto significa que analizamos el contenido visual y de texto en ese orden.

Cuando una persona visite tu aplicación, mirará en la esquina superior izquierda y luego seguirá hacia la derecha. Una vez que terminen la línea, irán hacia abajo formando un patrón en forma de F.

Con esto en mente, ¿ves el problema que tuve con el masonry?

En mi honesta opinión, el masonry hace que el contenido sea más difícil de analizar para las personas de América y Europa. Podemos facilitarles la vida con el uso de un diseño grid para que el usuario pueda seguir fácilmente su patrón natural de lectura.

![A grid layout with 2 arrows pointing from top-to-bottom and left-to-right showing our process pattern](/images/blog/why-I-prefer-grid-layout-over-masonry/why-I-prefer-grid-layout-over-masonry-2.png)

## El diseño grid tiene menos carga cognitiva, lo que significa una mejor experiencia de usuario

Como puede ver en la imagen de arriba, el diseño masonry se ve bonito, pero aumenta la carga cognitiva.

La carga cognitiva es el esfuerzo mental total que se necesita para procesar información relacionada con el razonamiento y la toma de decisiones.

La información que se muestra en un diseño masonry aumenta más la carga cognitiva que la cuadrícula porque, como se comentó anteriormente, el diseño masonry dificulta la lectura y el análisis del contenido siguiendo un patrón visual de arriba a abajo y de izquierda a derecha, y esto significa peor experiencia de usuario.

## Con un diseño grid tengo más control sobre los elementos

Tengo más control sobre los elementos de la lista con un diseño grid.

Esto es un gran beneficio cuando pienso en anuncios porque puedo controlar fácilmente dónde colocarlos.

Puedo asegurar que los 3 anuncios siempre se muestran como yo quiero:

1. Para resoluciones móviles muestro los anuncios en la segunda, cuarta y sexta fila de la segunda columna
2. Para resoluciones de tableta, muestro los anuncios en las mismas filas pero de la tercera columna
3. Para resoluciones de escritorio, muestro los anuncios en la primera, tercera y quinta fila de la quinta columna

![image with sponsors](/images/blog/why-I-prefer-grid-layout-over-masonry/why-I-prefer-grid-layout-over-masonry-3.png)

## El diseño grid tiene un mejor rendimiento web y no tiene` errores visuales

Esto es cierto para mi proyecto. Para hacer el diseño masonry, utilicé `display: flex` con `column-count` junto con la carga diferida de las imágenes.

Los marcadores de posición de las imágenes no tenían la altura exacta de la imagen, y esto era un problema porque una vez que se descargaban las imágenes, las columnas de la altura del masonry eran diferentes y hacían que las imágenes se movieran entre columnas algunas veces.

Esto es muy malo para la experiencia del usuario porque visualmente las cosas se ven mal, y también es malo para el rendimiento web porque causa reflow y repaints.

¿Qué diablos significa esto? **Re-flow es el proceso que cada navegador hace para recalcular el diseño de un elemento o un grupo de elementos cuando cambia su ancho, alto o posición (aunque esto puede ser pirateado a veces), y al final activa una nueva pintura.**

Estos 2 procesos son costosos y deben optimizarse siempre que sea posible porque, de lo contrario, podríamos comenzar a ver algún retraso en nuestra aplicación web o sitio web.

![Showing how some images were moving between columns when fetching the images after scrolling](/images/blog/why-I-prefer-grid-layout-over-masonry/why-I-prefer-grid-layout-over-masonry-4.gif)

## El diseño grid me permite optimizar el contenido para SEO

No es algo nuevo que el contenido que está más cerca del final de la página, sea menos relevante para el SEO o debería serlo. Tiene sentido, ¿no? ¿Por qué colocaría el contenido más importante de su página en la parte inferior, donde los usuarios no pueden acceder a él fácilmente?

Con un diseño de cuadrícula, puedo colocar fácilmente los patrocinadores o los anuncios al final de la lista y colocarlos cuando quiera con solo CSS.

Esto es realmente bueno porque quiero colocar mi contenido más valioso para los usuarios en la parte superior de la página, y los anuncios no lo están.

![HTML code showing the advertisement nodes are at the end of the results list](/images/blog/why-I-prefer-grid-layout-over-masonry/why-I-prefer-grid-layout-over-masonry-5.png)

## Conclusión

Creo que el diseño grid es la mejor opción para todos los diseños, con algunas excepciones, porque hace que el contenido sea más fácil de leer.

Como se comentó anteriormente, esto significa menos carga cognitiva que se traduce en una mejor experiencia de usuario.

Una mejor experiencia del usuario está directamente relacionada con la felicidad del usuario y esto termina con la retención del usuario.


Por qué prefiero el diseño grid en vez de masonry


Si tienes un blog o una comunidad, supongo que te has preguntado cómo podrías llegar a más personas y obtener tracción.

Bueno, te voy a explicar qué métricas uso para mejorar [ChooseYourPlant, la comunidad internacional para los amantes de las plantas de interior](https://www.chooseyourplant.com) que estoy construyendo y cómo estas métricas pueden ayudarlo.

Puedes llegar a más personas de 2 maneras diferentes. O mdiante pago de anuncios _(no me gusta esta idea porque no es sostenible si no está monetizando su sitio)_, o mejorar el posicionamiento de la web respecto a otros sitios en Google u otros motores de búsqueda.

Hablaremos sobre el segundo, que es bueno a largo plazo y nos da información sobre qué tan bien lo estamos haciendo.

## ¿Por qué es importante conocer mejor a sus usuarios?

Cuanto más sepas acerca de tus usuarios, mejor, porque te ayudará a:

- Optimizar palabras clave SEO
- Priorizar el tipo de contenido que les gusta. Esto puede varias dependiendo de su edad, en qué región viven, etc
- Optimizar la interfaz de usuario y la experiencia del usuario en función de cómo acceden a la información, contexto, dispositivo, navegador, etc
- Optimizar el dinero en caso de que publiques anuncios
- Reducir el tiempo de desarrollo porque te enfocarás en resoluciones y navegadores específicos

![Graphic that shows how much the traffic of ChooseYourPlant increased since 3 months ago when the site was published](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-1.png)

## ¿De dónde son los usuarios?

Será más fácil para ti hacerte un nicho y optimizar los recursos, crear contenido más relevante para los usuarios y ahorrar energía y tiempo si sabes de dónde son sus usuarios.

Para mejorar ChooseYourPlant rápidamente, es importante saber cuáles son las "áreas calientes" en todo el mundo por muchas razones:

1. Puedo modificar el contenido actual para optimizar las palabras clave de SEO para esas regiones
2. Crearé contenido específico para esas áreas _(las plantas son un poco internacionales, pero no todas las plantas se encuentran en todo el mundo debido a las políticas de envío)_. No perderé más el tiempo creando contenido que no sea relevante para estas regiones que identifiqué como áreas calientes
3. Puedo llegar a los comercios de estas zonas para conseguir presencia, descuentos y/o patrocinios. Estas tiendas son las más relevantes para mis usuarios debido a la proximidad

Si quieres saber de dónde son tus usuarios ve a tu cuenta de Google Analytics > Audiencia > Geo > Ubicación.

Verás un mapa de colores con muchas intensidades que representa la cantidad de personas que acceden a tu sitio web:

![World map colored with different intensities that represent the people that use ChooseYourPlant and USA is the most intense.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-2.png)

Como puedes ver, las personas que visitan mi sitio son de los Estados Unidos.

Esto es útil para optimizar nuestras palabras clave porque usan palabras diferentes a las del Reino Unido a pesar de que ambos hablan inglés.

![US map colored with different intensities that represent the people that use ChooseYourPlant. California, Florida and New York are the most intense.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-3.png)

Una vez más, saber qué estados son los más comunes es bueno, pero ¿no sería bueno saber cuáles son las ciudades más relevantes para que podamos ir más allá? Vamos a ver.

![Map that shows that the majority of the users that use ChooseYourPlant in California are from Los Angeles and San Francisco.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-4.png)

![Map that shows that the majority of the users that use ChooseYourPlant in New York are from New York city.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-5.png)

![Map that shows that the majority of the users that use ChooseYourPlant in Florida are from Miami.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-6.png)

Ahora que sé en qué ciudades viven dichos usuarios, puedo optimizar cómo invierto mi tiempo porque:

1. Puedo apuntar a palabras clave específicas de SEO
2. Puedo crear contenido relevante para estas personas
3. Puedo centrarme en contactar con los comercios que están cerca de estos usuarios
4. En caso de querer pagar anuncios, puedo limitarlos a esas ciudades así estaría optimizando dinero

## ¿Qué usan las personas para acceder a mi sitio?

Comprender de dónde son mis usuarios es bueno, pero no es suficiente. Debo entender qué dispositivo, conexión y navegador están usando mientras están en mi sitio, así:

1. Puedo mejorar el rendimiento web para esos dispositivos y conexiones
2. Diseño para esas resoluciones _(si algo no es perfecto en una resolución que nadie usa, debería arreglarlo, pero no es lo más importante)_
3. Puedo ahorrar tiempo al no priorizar errores o compatibilidades de navegadores para estos navegadores que casi no se usan
4. Mejorar la experiencia del usuario para sus dispositivos

Para ver todas estas métricas en Google Analytics, haz clic en la pestaña Audiencia > Descripción general móvil.

![Data table that shows the most used device by the ChooseYourPlant users. Mobile with a 61% is the most used and desktop is the second one with 36%.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-7.png)

La imagen de arriba nos muestra que la mayoría de los usuarios de ChooseYourPlant usan dispositivos móviles, por lo que debo centrarme en mejorar mi diseño y optimización para dispositivos móviles en lugar de ordenadores de escritorio. Así que de ahora en adelante:

1. Daré más importancia a las interfaces de usuario y las experiencias de usuario para dispositivos móviles que para ordenadores de escritorio
2. El rendimiento web es importante _(en una pantalla móvil no todo el contenido es visible al principio, por lo que no debe cargar este contenido)_

Esto mejora la experiencia del usuario y ahorrará datos para el usuario > cargas más rápidas > más fácil de rastrear > mejor clasificación.

Por otro lado, saber qué navegador usa la gente nos ayudará a priorizar errores, mejorar el control de calidad y, en general, nos dará velocidad en el proceso de desarrollo. Puede ver qué navegador usan sus usuarios en la pestaña Audiencia > Tecnología > Navegador y sistema operativo.

![Data table that shows the most used browser by the ChooseYourPlant users. Chrome with a 53% is the most used and Safari is the second one with 30%.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-8.png)

Como puedes ver, la mayoría de las personas que visitan ChooseYourPlant utilizan Chrome, aunque Safari es el segundo más utilizado.

Debo priorizar Chrome > Safari. No debo invertir tiempo en corregir pequeños-medianos errores en Firefox si quiero optimizar mi tiempo porque representa solo el 3,9% de los usuarios.

## ¿Cuál es el perfil de los usuarios?

Puedes optimizar el contenido y las palabras clave para mejorar el SEO y clasificarte mejor en los motores de búsqueda si conoces el perfil del usuario que visita su sitio. ¿Qué edad tienen? Son hombres o mujeres?

Esto te ayudará porque una persona de 25 años busca y consume información de una manera muy diferente a una de 60 años.

Descubre la edad de tus usuarios yendo a la pestaña Audiencia > Datos demográficos > Edad.

![Data table that shows the age ranges of the users of ChooseYourPlant. 46% of the users are 25 to 34 years old and 19% are 35 to 44 years old.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-9.png)

![Data table that shows the percentage by gender. 52% are women and 47% are men.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-10.png)

## Resultados

Desde que hice el perfil de las personas que usan ChooseYourPlant y comencé a aplicar algunas de las acciones, el crecimiento orgánico y la exposición en Google crecieron significativamente como puedes ver:

![Graph showing how much Chooseyourplant is growing every day.](/images/blog/improve-your-community-or-blog-seo-and-ux-with-metrics/improve-your-community-or-blog-seo-and-ux-with-metrics-11.png)

## Conclusiones

Después de analizar algunos datos, ahora sé que la mayoría de mis usuarios son personas de 25 a 34 años de los Estados Unidos de América. En particular, son de Los Ángeles, San Francisco, Portland, Nueva York y Miami. Usan Chrome y Safari a través de sus teléfonos.

Como comenté al principio, esto me ayuda a ir de nicho porque:

- Puedo crear contenido que sea relevante para esas áreas
- Puedo exponer mi contenido con palabras claves de acuerdo a su registro y como buscan
- Puedo agregar funciones que podrían interesar a este perfil
- Encuentro tiendas cerca de ellos
- Optimizo mi tiempo de desarrollo para móvil Chrome/Safari, el otro puede esperar
- En el caso de publicar anuncios, puedo optimizar mucho el dinero


Cómo mejorar el SEO y la experiencia de usuario de tu sitio web


¿Cuántas horas has estado buscando cómo cuidar una planta? ¿Cuántos meses necesitaste para descubrir esa planta que amas? ¿Cómo la encontraste?

[Chooseyourplant](https://www.chooseyourplant.com) es un producto que desearía haber tenido cuando empecé en el hobby de las plantas de interior hace unos meses, porque me habría ahorrado muchas horas de investigación en Google.

Después de tener las plantas de interior como uno de mis pasatiempos durante unos meses, decidí construir algo que noté que había una gran oportunidad en el mercado. No hay una aplicación para descubrir plantas. Esto significa que cada vez que quieras adquirir una nueva planta, debes buscar en Google durante días, buscar las plantas de moda en Pinterest u otros sitios web, y una vez que encuentres una planta que te guste, investigar cómo cuidarla.

## ¿Qué es Chooseyourplant?

Chooseyourplant es un sitio web de plantas de interior para descubrir y obtener tu próxima planta de interior en unos pocos clics.

> ¡Qué genial sería decir cuáles son los requisitos y cómo quieres que sea tu próxima planta de interior! ¡Ahora es posible!

El MVP de Chooseyourplant te permite:

1. Descubrir nuevas y sorprendentes plantas
2. Comprarlas a través de enlaces externos
3. Aprender cuáles son las necesidades de la planta
4. Consejos para hacer crecer tu planta como un demonio
5. Encontrar plantas similares

# Cómo se ve

La página para descubrir plantas trata de hacer las cosas lo más simples posible.

- Filtros fáciles de usar que te permiten elegir la planta que quieres
- Imágenes grandes
- Nombres comunes
- Enlaces para comprar

![Aspecto visual de la búsqueda de una planta en la aplicación Chooseyourplant](/images/blog/chooseyourplant-houseplant-marketplace/chooseyourplant-houseplant-marketplace-1.png)

La página de perfil de la planta tiene el siguiente contenido:

- Nombre científico
- Nombres comunes (quizás reconozcas la planta con alguno de ellos)
- Cuidados y características resumidos
- Imágenes grandes
- Enlace para comprar la planta
- La posibilidad de agregarla a "Mi lista de deseos"
- Explicación con texto sobre cuánta luz y agua necesita, tipo de fertilizante, humedad ¡y más!
  Consejos
- Plantas similares

![Aspecto visual de la búsqueda de una planta en la aplicación Chooseyourplant](/images/blog/chooseyourplant-houseplant-marketplace/chooseyourplant-houseplant-marketplace-2.png)

Tengo muchas características en mente, como:

- Comparación entre "Mi lista de deseos" y "Mis plantas"
- Un modo de mapa que te permita ver qué tiendas tienen esa planta cerca de ti
- Cuando quieras comprar una planta, mostrarte un enlace relevante para comprar esa planta (el más cercano)
- Permitirte informar si hay alguna información incorrecta relacionada con una planta
- Permitirte introducir plantas
- Crear una comunidad donde la gente quiera compartir sus imágenes de esa planta
- Un blog

## ¿Para quién es?

No importa si solo quieres obtener una planta, si eres nuevo en el hobby de las plantas de interior o si tienes mucha experiencia, estoy seguro de que quieres encontrar plantas que te gusten y sepas que puedes cuidar. Por esta razón, creo que [Chooseyourplant](https://www.chooseyourplant.com) es para todos.

Me gusta ser uno de los usuarios de Chooseyourplant. Me permitirá centrarme en el usuario y enfocarme en un valor real para la comunidad.

## ¿Cuándo estará listo?

Chooseyourplant estará listo una vez que tenga las imágenes proporcionadas por la comunidad para las 65 plantas de las que he recopilado datos. Estoy buscando en Instagram a personas interesadas en compartir sus imágenes. Trataré de hacerlo lo antes posible.


Chooseyourplant. Una web para descubrir plantas de interior y encontrar tu próxima planta


Te has parado alguna vez cual es el proceso que siguen los navegadores para pintar el contenido? Pues yo hoy te lo voy a explicar!

Todas páginas web están formadas por html, css y Javascript. Independientemente de la cantidad de cada uno de ellos, los navegadores siempre siguen el mismo proceso para mostrar el contenido que el usuario termina consumiendo. El proceso es el siguiente:

1. Generar el árbol DOM a partir del html.
2. Generar el CSSOM Tree a partir del css.
3. Generar el Render Tree con la combinación del DOM y CSSOM
4. Calcular la disposición o layout de todos los nodos.
5. Pintar los nodos del Render Tree.

En el siguiente gráfico puedes ver visualmente las distintas fases mencionadas.

![Los distintos pasos de como el navegador renderiza el contenido siguiendo los pasos recién nombrados. Coger el html y css y gracias a un parsador, construir el Dom tree y el CSSOM Tree. Con estos, construir el Render tree y finalmente calcular la posicion de todos los elementos para poderlos pintar](/images/blog/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido-1.png)

Para saber qué y cómo renderizar los distintos elementos, el orden lógico es el mencionado, pero yo voy a explicarlo en un orden distinto que creo que, para mí, es más natural.

## ¿Cómo sabe el navegador qué pintar?

Toda la información que el usuario ve a través de su pantalla y la manera en que esta se presenta (colores, posicions, etc.), viene dada por el _render tree_.

**El Render Tree es un conjunto de nodos que tienen la información a mostrar y unos estilos atribuidos**, que por defecto son los del navegador, además de los que nosotros hayamos añadido.

## ¿Cómo se genera el render tree?

El render tree es la combinación de dos árboles de nodos llamados DOM y CSSOM.

**El DOM es el árbol de nodos que representa los contenidos de la página** o aplicación web. Estos contenidos están determinados por el HTML y, aunque se parezca bastante al DOM, no son lo mismo.

Por otro lado, **el CSSOM es el árbol de nodos que indicará al navegador cómo se debe pintar el DOM mediante las distintas reglas que tengamos de CSS**.

Por tanto, **el tiempo de carga de nuestra página se ve directamente afectado por la cantidad de información que queramos mostrar y de la cantidad y complejidad de nuestras reglas de CSS.**

¿Por qué? Pues porque se tomará más tiempo en generar el DOM Tree y el CSSOM Tree. Estos son dos procesos que bloquean la construcción del Render Tree, y este es el necesario para pintar el contenido de la página.

## ¿Cómo se genera el árbol DOM?

El DOM se genera a partir del fichero con extensión _.html_ y se genera de la siguiente manera gracias al parseador de html:

1. Convertir los bytes a caracteres.
2. Pasar de caracteres a tokens.
3. Generar los nodos.
4. Construir el árbol DOM.

**Es importante declarar los _scripts_ como asíncrono en el _head_ de la página porque en caso no hacerlo, la creación del DOM será bloqueada hasta que el Javascript sea descargado, parseado y ejecutado.**

![Evolución temporal del proceso de generación del DOM bloqueado por un script no asíncrono](/images/blog/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido-2.png)

## ¿Cómo se genera el árbol CSSOM?

El CSSOM se genera a partir del fichero con extensión _.css_ y el navegador sigue exactamente los mismos pasos que para generar el DOM Tree:

1. Convertir los bytes a caracteres.
2. Pasar de caracteres a tokens.
3. Generar los nodos.
4. Construir el árbol CSSOM.

La construcción del DOM y del CSSOM se hacen de manera asíncrona/paralela. Eso significa, que la generación del CSSOM no es bloqueante para poder generar el DOM, pero no hay que olvidar que si es bloqueante para generar el Render Tree, que es el árbol de nodos necesario para empezar a pintar el contenido. Así pues, cuanto menos tarde en generar el DOM y CSSOM, mejor.

Muchas son las acciones que se pueden tomar para reducir el tiempo que tarda el navegador en generar el DOM o CSSOM:

1. Evitar cargar contenido que no sea relevante para esa página
2. Evitar usar nodos innecesarios
3. Usar `::before` y/o `::after` para contenido visual
4. Simplificar los selectores de CSS

![Evolución temporal del proceso de generación del DOM y CSSOM bloqueado por un script no asíncrono. La ejecución del script se pospone hasta que termine el CSSOM y la construcción del DOM hasta que se ejecute el Javascript](/images/blog/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido/5-pasos-que-siguen-los-navegadores-para-pintar-el-contenido-3.png)

## ¿Cómo se genera el Render Tree?

Una vez los árboles de nodos DOM y CSSOM ya han sido construidos, se combinan para generar el Render Tree.

El Render Tree es el árbol de nodos que se usa para calcular la disposición de los nodos visibles, que son los que se terminan pintando en el navegador.

La construcción del Render Tree comienza con la raíz del árbol DOM, atravesando cada nodo visible. Las etiquetas invisibles como `head`, `script` o los que contienen estilos `display: none;` no son incluidas en el Render Tree. En cambio, las etiquetas que están ocultadas visualmente con `visibility: hidden;` sí que se incluyen en el Render Tree porque consumen un espacio visual.

## Calcular el layout o disposición de los nodos

Una vez generado el Render Tree, la fase _Layout_ entra en accion para calcular la dimension y posicion exacta de cada uno de los nodos.

Tomando el tamaño del _viewport_, el diseño generalmente comienza con el `body`, presentando las dimensiones de todos los descendientes del `body`, con las propiedades del modelo de caja de cada elemento también conocido como _box modeling_, proporcionando espacio reservado de posición para los elementos reemplazados cuyas dimensiones no conoce, como las imagenes.

La primera vez que se determina el tamaño y la posición de los nodos se denomina _layout_. Los recálculos posteriores del tamaño y las ubicaciones de los nodos se denominan `reflow`. Supongamos que el pintado de los elementos ocurra antes de que se cargue una imagen. Dado que no declaramos el tamaño de nuestra imagen, habrá un reflujo una vez que se conozca el tamaño de la imagen en caso de que esta, ocupe más espacio, porque algunos elementos tendran que pintarse más abajo de su posicion original.

## Pintar

En esta fase el navegador convierte al árbol de representación o Render Tree en píxeles en la pantalla. El primer pintado se denomina _first meaningful paint_.

Pintar implica dibujar cada parte visual de un elemento en la pantalla, incluido el texto, los colores, los bordes, las sombras y los elementos reemplazados, como botones e imágenes.

Es curioso saber que las distintas propiedades de _CSS_ cuestan más o menos de pintar dependiendo de como estén combinadas.

Supongamos el hipotético caso que se tardara 1 segundo en pintar un _box-shadow_. Si este es combinado con una propiedad _border_, esta, haría que tardase 1.5 segundos en vez de 1 segundo.

---

Si quieres aprender más al respecto, te recomiendo leer el [artículo que me ha motivado a explicar brevemente como funciona el renderizado en nuestros navegadores](https://codeburst.io/how-browsers-work-6350a4234634). Éste explica de manera extensa cada uno de los pasos que yo he explicado brevemente.


5 pasos que siguen los navegadores para pintar el contenido


Llevo casi 4 años en esta profesión y aunque no es mucho tiempo, ha sido suficiente para darme cuenta de varias cosas que me preocupan seriamente de nuestro sector y que nos incumben a todos.

## En el desarrollo frontend hay demasiado que abarcar

El primer problema que tenemos los desarrolladores frontend es que hay demasiado que abarcar. El aumento de responsabilidad que se está trasladando a nuestro rol y el ritmo frenético que tiene el ecosistema Javascript son los dos motivos principales.

Tanto es así que ya ha surgido una especialización dentro de nuestro rol nombrado UX Engineer, que es una posición que está más enfocada a conocimientos de diseño, experiencia de usuario y la implementación de estos.

> ¿Qué es ser un desarrollador frontend en 2019?

[Pregunté a la comunidad](https://twitter.com/victorException/status/1113767944100753408) acerca de qué conocimientos creen que están relacionados con el desarrollo frontend y resultó la siguiente lista 📃:

- Jerarquía de contenidos.
- Html semántico.
- SEO.
- Schema.
- Accesibilidad.
- CSS y sus mil millones de funcionalidades.
- Preprocesadores y sus millones de funcionalidades.
- Imágenes y sus formatos (jpg, png, svg, etc.).
- Animaciones.
- Accerelated Mobile Pages (AMP).
- Maquetación de correos electrónicos.
- Javascript.
- ECMAScript y sus nuevas funcionalidades anuales.
- Transpilar código con Babel.
- Hacer bundles con Webpack y Parcel.
- Entender la asincronía.
- Programación reactiva.
- React / Vue / Angular y sus nuevas funcionalidades periódicas.
- Redux, Redux-thunks, Redux-sagas para el state management.
- API Rest.
- GraphQL.
- Web Sockets.
- WEBRTC.
- Renderizado lado servidor (SSR) y lado cliente (CSR)
- Mil millones de librerías para cualquier tontería.
- Herramientas de analíticas como New Relics, Sentry, etc.
- Principios SOLID aplicados a micro y macro diseño.
- Patrones de diseño.
- Testing (unitario, integración, aceptación, etc.) tanto visual como de lógica.
- Test-Driven Development (TDD), Domain-Driven Design (DDD).
- Paradigmas: Programación funcional y programación orientada a objetos.
- Performance (css, javascript, npm, network, http petitions, etc.).
- Aplicaciones Web Progresivas (PWA).
- Node.
- Node Package Manager (NPM).
- Docker.
- Metodologías ágiles.

Y como podemos ver, tenemos un problema.

Con tantas cosas "que debemos aprender" es imposible centrarse. Es imposible decidir qué aprender. Es imposible no autoexigirse demasiado. **Es imposible no acojonarse**.

## Un ritmo frenético en la profesión

_¿Cuántos de vosotros os habéis planteado saber casi todo de la lista anterior? ¿Y cuántos creéis que deberíais saberlo casi todo?_

La rápida y constante evolución del desarrollo frontend es una arma de doble filo 🔪. Es tan afilada que hasta tiene su propio nombre: [fatiga Javascript](https://medium.com/@sergiodxa/sobre-el-ecosistema-y-la-fatiga-de-javascript-73027048413f).

Si bien es cierto que estamos contentos por el incremento de nuevas funcionalidades, herramientas y librerías que enriquecen el ecosistema, eso también significa que las hemos de entender, interiorizar y saber usar para poder estar en este sector.

Aunque todas estas mejoras son algo bueno, estamos pasando por alto una parte muy negativa. La satisfacción instantánea la cual la sociedad nos está sometiendo, junto a la sensación de obligatoriedad de estar "a la última" en nuestra profesión, hace que seamos muy críticos con nosotros mismos.

Las personas que llevan más años en el sector se ven menos afectadas, pero, los que acaban de empezar y tienen tanto que aprender... Están altamente expuestos a:

- Estrés.
- Ansiedad.
- Falta de confianza en uno mismo (síndrome del impostor).
- No valorar el proceso de aprendizaje.

Es estresante ver cada dos por tres en Twitter o Linkedin de nuevas librerías, nuevas funcionalidades, conceptos nuevos, metodologías nuevas, nuevos nombres... Esto, envía un mensaje a nuestro subconsciente de: **¿Aún no lo conoces? ¡Ponte ya!** Y esto, es malo de narices porque aunque sea muy poco a poco, afecta e influye a nuestra felicidad y paz interior.

**Linkedin y Twitter, entre otras cosas, son redes sociales de postureo profesional. No todo el mundo se ha leído el artículo que está compartiendo. Así que no te castigues a ti mismo por no leerlo.**

Pese a que te guste o no, todos somos los que con más o menos ritmo hemos de ir aprendiendo todas las cosas que van saliendo, principalmente por dos motivos:

- Satisfacción propia
- Optar a un mejor puesto laboral

Y a diferencia de otros sectores, el desarrollo de software es de los pocos con muy alto porcentaje que nos dedicamos a esto lo hacemos por vocación. Esto significa que:

- Leemos
- Estudiamos
- Tenemos alguno o varios proyectos personales
- Asistimos a meetups
- Miramos conferencias
- Creamos contenido

Y ojo, ¡Que todo esto está muy bien! Pero ¿A qué precio?

## Necesitamos un ritmo sostenible

Hemos llegado a tal punto, que queremos aprender a [como organizar la semana para ser productivos](https://www.elrincondevictor.com/blog/6-sencillos-pasos-para-organizar-tu-semana) con el objetivo de tener el máximo de horas disponibles para dedicarlas a crecer profesionalmente.

¿Crees que puedes aguantar con este ritmo hasta el fin de tus días? ¿Serás feliz con tu vida a este ritmo? ¿No crees que habrías perdido otras muchas cosas?

Entre muchas de las cosas que [mi amigo Ignacio comenta en su podcast](http://wecodesignpodcast.com/2019/04/04/autoexplotacion/), está el hecho de que nos forzamos cada "X" tiempo a compartir conocimiento en las redes sociales o a estudiar, en vez de hacerlo cuando realmente nos apetece. Y desde mi punto de vista, estamos ignorando aspectos que también deberíamos atender:

- Socializar más.
- Descubrir nuevas experiencias como pintura, música, baile, jardinería...
- Estudiar comunicación.
- Desarrollo personal.
- Meditación.
- Ética.
- Filosofía.
- Inteligencia financiera.
- Inteligencia emocional.
- Practicar actividad física.

Estas actividades nos aportan distintos tipos de excitación mental. Ayudan a conocernos mejor, probablemente a ampliar nuestro círculo de amistades y por ende, además de ayudarnos a desconectar, nos aportan felicidad.

Deberíamos entender que cada uno tiene su vida y que, por tanto, tiene diferentes contextos y obligaciones. Eso significa que algunos tienen más tiempo que otros para sus actividades y que, por eso, no debemos compararnos. Vivamos como a nosotros nos apetezca y no como la corriente nos quiere llevar.

## Síndrome del impostor

_El síndrome del impostor es un fenómeno psicológico en el que la gente es incapaz de internalizar sus logros y sufre un miedo persistente de ser descubierto como un fraude._

¿Crees que fulanito sabe 100 veces más que tú? ¿Qué tu deber es también saberlo? ¿Qué todos tus compañeros saben más? ¿Qué no mereces estar ahí? Estos son pensamientos que en el mundo del desarrollo se dan mucho independientemente del tiempo que uno lleve trabajando, aunque es más común en la gente que lleva poco tiempo.

El [síndrome del impostor](https://www.lambdatres.com/2018/01/sindrome-del-impostor-como-supera-trabajador/) es un problema real que hemos de combatir si nos queremos evitar problemas psicológicos mayores y precisamente, el panorama actual del desarrollo frontend no ayuda en absoluto, sino todo lo contrario.

El fuerte ritmo de recursos compartidos en la red crean una fuerte corriente que parece ser que todos hemos de seguir porque, si no, nos quedamos fuera del panorama.

Aunque tampoco es que las ofertas de trabajo con miles de requisitos ayuden. ¿Te ha pasado alguna vez que vas andando por el metro, y quieres andar más despacio, pero hay tanta gente a nuestro alrededor andando mucho más rápido que es imposible ir al ritmo que queremos? Pues con esto pasa lo mismo.

## Solución: Aplicar la Ley de Pareto

_La ley pareto dice que el 20% de nuestro esfuerzo consigue un 80% del resultado. (los porcentajes varían según la actividad)_

La gran cantidad de temario a aprender y el poco foco que tenemos hoy en día son los problemas principales, pero, quizás, no estamos siento prácticos.

La [ley de Pareto](https://economiatic.com/ley-de-pareto/) se basa en el pragmatismo en cualquier aspecto de la vida. ¿Para qué invertir un 80% de nuestras energías con tal de aprender el 20% restante de los conocimientos, un tema?

Si aplicamos la ley de Pareto a la lista que hemos mencionado al principio de este artículo, quedaría tal que así:

- Html semántico.
- Accesibilidad.
- CSS.
- Preprocesadores.
- Javascript.
- ECMAScript y sus nuevas funcionalidades anuales.
- Entender la asincronía.
- Un framework (React, Vue, Angular).
- API Rest.
- Principios SOLID aplicados a micro diseño.
- Patrones de diseño.
- Testing (unitario, integración, aceptación, etc.) tanto visual como de lógica.
- Programación orientada a objetos.
- Performance (optimización de imágenes, selectores CSS y acceso al DOM y/o variables en Javascript).
- Comandos básicos de NPM.
- Metodologías ágiles.

Como podemos ver, la lista se ha reducido bastante. Siendo honesto, hay elementos en la lista que aunque aportan muchísimo, no deberían ser del interés de una persona que acaba de empezar en el sector, pues debería tener otros objetivos en mente. Por este motivo, vamos a reducir más la lista:

- Html semántico.
- CSS.
- Javascript.
- ECMAScript y sus nuevas funcionalidades anuales.
- Entender la asincronía.
- Un framework (React, Vue, Angular).
- API Rest.
- Testing (unitario, integración, aceptación, etc.) tanto visual como de lógica.
- Comandos básicos de NPM.
- Metodologías ágiles.

La Ley Pareto en este caso, no solo se puede aprender a alto nivel como acabamos de hacer, sino que también se puede hacer para algunas de las cosas, por ejemplo, en el caso de <code&gt;csscode&gt;, tenemos mil cosas a aprender. **¿Cómo aplicaríamos la Ley de Pareto para aprender <code&gt;csscode&gt;?**

Podemos decir que el 20% de los conocimientos que aportan un 80% de valor desde mi punto de vista serían:

1. Conocer los selectores más usados.
2. Entender que el navegador interpreta los estilos de derecha a izquierda.
3. Especificidad.
4. Flex y Grid.
5. Mediaqueries (mobile-first)
6. BEM

Aprendiendo estos conocimientos, tendríamos unas muy buenas base de CSS y las habríamos conseguido de manera práctica y rápida.

Y **solamente en caso de necesitarlo**, me adentraría en el mundo de <code&gt;@supportcode&gt;, animaciones complejas o transiciones porque aunque son muy interesantes y útiles para muchas cosas, no creo que vayan a servirte en el día a día en la mayoría de casos.

## Solución: Cambio de mentalidad

Otra solución en la que creo firmemente para combatir tanto este ritmo frenético y al síndrome del impostor es un cambio de mentalidad tanto con nosotros mismos, como con los demás.

Algo que me gusta mucho de nuestro sector es que a diferencia de los otros, hay una mentalidad de compartir conocimiento, pero esto no significa que no se pueda mejorar (y no hablo en las redes sociales, sino cara a cara).

¿Cómo actuarías si Pepito que trabaja en tu equipo, tiene que hacer unas animaciones con <code&gt;csscode&gt; para las nuevas páginas y tu sabes bastante del tema? ¡Siéntate con él y adopta el rol de mentor en esta tarea! Sentaros juntos. Quizás te dice que no es necesario porque o no te quiere molestar, o no quiere que la juzgues, pero insístele un poco más. Quizás te llevas una sorpresa y el que aprende alguna cosa eres tú.

Algunas cosas que podemos hacer para combatir este ritmo frenético y su vez, mejorar la comunidad son:

- Tener personalidad y saber diferenciar entre: Qué debemos aprender, que quieren que aprendamos y que nos gustaría aprender.
- Compartir conocimiento (Talleres o charlas en horario laboral de conocimientos que se necesiten en breves).
- Ser práctico e intentar aplicar la Ley Pareto para localizar qué aprender y cómo hacerlo.
- Ayudar a los compañeros sin que lo pidan.
- Tener empatía.
- No sorprenderse cuando alguien no sabe algo, eso no ayuda.
- Aprende el conocimiento de ingeniería de software que puedas aprender en distintos lenguajes y/o frameworks.
- Aprende de manera constante para aplicar el [efecto compuesto](https://www.elclubdeinversion.com/el-efecto-compuesto/).
- Aprende a medida que necesites.

---

Para terminar, creo que deberíamos reflexionar sobre lo leído y empezar a practicar un ritmo de vida que nos aporte bienestar tanto en el ámbito personal como en el profesional, para así terminar con esta burbuja de presión a nosotros mismos y exceso de exigencias en las ofertas laborales. ¿Y tú, que piensas?


La situación crítica del desarrollo frontend. Una burbuja que hemos de parar


En los últimos años el interés por optimizar nuestro tiempo para ser más productivos ha crecido drásticamente.

Somos conscientes de que el tiempo es limitado y como no estamos dispuestos a dejar de hacer ninguna de esas cosas que tenemos en nuestra lista de cosas por hacer, queremos optimizar la manera en la que usamos el tiempo del que disponemos.

Desde que me obsesioné con usar el tiempo de manera consciente, me he dado cuenta de que muchísima gente no es realmente consciente de todo el tiempo que se desperdicia. Tampoco de la cantidad de mentiras que nos decimos a nosotros mismos con tal de no sentirnos culpables por malgastar el tiempo.

_¿Eres de las personas que se excusa con no tener tiempo para aprender una nueva habilidad? ¿De no ir al gimnasio porque llega cansado del trabajo? ¿Te engañas a ti mismo?_

Ya han sido varias las maneras en las que he intentado organizar mi semana. Gracias a ello, podemos conseguir un ritmo de vida equilibrado en base a nuestras prioridades.

## Que métodos he probado

En los últimos 2 años he probado distintos métodos para gestionar el tiempo que tengo disponible para realizar las tareas.

Desde métodos estructurales como el famoso tablero Kanban hasta métodos más sistemáticos como el método "Getting Things Done" (GTD) pasando por el método de la caja de Eisenhower y la técnica Pomodoro.

Desde método estructurales como el famoso [tablero Kanban](https://kanbanize.com/es/recursos-de-kanban/primeros-pasos/que-es-tablero-kanban/) hasta métodos más sistemáticos como el [método "Getting Things Done" (GTD)](https://jordisanchez.info/que-es-gtd/) pasando por el [método de la caja de Eisenhower](https://www.elconfidencial.com/tecnologia/2014-05-04/la-caja-de-eisenhower-o-como-un-metodo-de-gestion-militar-acabo-en-el-iphone_124237/) y la [técnica Pomodoro](https://blogthinkbig.com/como-usar-la-tecnica-pomodoro).

Todos ellos son métodos muy válidos que nos ayudan en mayor o menor medida, dependiendo de las necesidades que tenemos, pero para llegar a este punto, primero tenemos que saber cuándo y cuánto tiempo tenemos disponible.

## Como planificar la semana

Con tal de localizar el tiempo del que disponemos a lo largo de una semana para poder [cumplir nuestras tareas u objetivos](https://www.elrincondevictor.com/blog/planifica-tus-metas-para-tener-un-equilibrio-mental), os recomiendo seguir estos sencillos 6 pasos.

Ten un calendario enfrente, es indiferente si es digital como _Google Calendar_ o si prefieres hacerlo en papel.

1. Asignar las horas de trabajo
2. Pensar en cuantas horas queremos dormir
3. Diseñar una rutina matutina
4. Hacer un ritual antes de acostarnos que nos proporcione tranquilidad
5. Priorizar nuestras obligaciones
6. Planificar la actividad física

Una vez hayamos completado todos los pasos mencionados, podremos identificar fácilmente el tiempo que tenemos disponible a lo largo de la semana para gestionarlo como creamos conveniente.

### Asignar las horas de trabajo

Dependiendo del sector en el que trabajes y de lo permisible que sea tu empresa, podrás tener más o menos flexibilidad a la hora de decidir tu horario laboral.

En caso de que tu empresa no te dé facilidades para poder elegir un horario, no tendrás que dedicar mucho tiempo a este paso porque el horario será el que ellos te impongan.

La siguiente planificación es con el trabajo que tengo actualmente, pero puede que esto haya variado a día de hoy que estés leyendo el artículo.

Como puedes ver en la fotografía, mi horario de trabajo es de 06.30 am hasta las 3 pm.

![Calendario semanal con las horas de trabajo indicadas. Empiezo a trabajar a las 06.30am y terminoa las 3pm.](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-1.png)

### Pensar en cuantas horas queremos dormir

Una vez realizado el paso anterior, sabrás a qué hora tienes que empezar a trabajar. Así pues, piensa en cuántas horas quieres dormir y asígnalas a tu horario _(para poder optimizar tu sueño deberías saber acerca de tus [ciclos de sueño](http://muysaludable.sanitas.es/salud/fases-ciclos-sueno/))._

Dependiendo de cuál sea tu rutina y cuanto ejercicio mental y/o físico hagas a lo largo del día, necesitarás descansar más o menos horas. En mi caso, con alrededor de unas 7 horas y media, tengo más que suficiente para sentirme enérgico y activo.

![Calendario semanal con las horas planificadas hasta ahora y las horas de descanso](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-2.png)

### Diseñar una rutina matutina

Ahora toca pensar que rutina queremos cada mañana. Dependiendo de cuantas cosas queramos hacer, tendremos que modificar el paso 2.

Dos de las cosas que yo necesito para ser persona cuando me levanto, son la meditación y una ducha de agua fría porque me llenan de energía y motivación.

Yo no tengo en cuenta el desayuno porque hago [ayuno intermitente](https://www.dietdoctor.com/es/ayuno-intermitente) o tomo un bocadillo pequeño mientras trabajo. Dentro de mi planificación matutina le dedico de 30 a 40 minutos a la lectura mientras me desplazo hacia el trabajo.

> Dado el conocido [‘efecto compuesto’](https://www.elclubdeinversion.com/el-efecto-compuesto/), 30 minutos es tiempo suficiente para ver a largo plazo una diferencia abismal en una actividad como es, en este caso, la lectura.

![Calendario semanal con las horas planificadas hasta ahora y la rutina matutina](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-3.png)

### Decidir un ritual nocturno

Muchos somos los que pensamos que un día empieza mejor o peor dependiendo de lo que hayamos hecho antes de irnos a dormir. Por ese motivo, a mí me gusta decirle a mi cuerpo y a mi mente con actos, que la hora de irse a dormir se acerca. Leer durante 30 minutos y hacer unos pocos estiramientos en la misma cama, me ayuda a entrar en un estado de relajación que me facilitará dormir.

![Calendario semanal con las horas planificadas hasta ahora y la rutina de antes de ir a dormir](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-4.png)

Si viviéramos en un mundo ideal, este sería todo el tiempo del que disponemos durante los días laborables:

![Calendario semanal con las horas planificadas hasta ahora con las horas que tenemos al día para hacer algo](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-5.png)

Pero lamentablemente todos tenemos asuntos que no podemos evitar: las tareas del hogar, recoger los niños al colegio, etc. Así pues, el siguiente paso es distribuir las obligaciones que se repiten una semana tras otra.

### Organizar nuestras obligaciones

Cuando vuelvo del trabajo me gusta revisar los correos electrónicos, pues estoy suscrito a muchas ‘newsletter’ que me informan de economía, empresas y artículos técnicos de los cuales siempre aprendo algo.

![Calendario semanal con las horas planificadas hasta ahora y las cosas que hemos de hacer si o si](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-6.png)

### Comprometernos a tener actividad física

Son innumerables los beneficios que nos da el practicar deporte y es por eso que todos deberíamos hacerlo. Uno de los muchos beneficios es que nos ayuda a eliminar una cantidad de estrés inimaginable y a su vez nos ayuda a no pensar en el trabajo. Por ello, vamos a darle tiempo en nuestra semana justo después de organizar nuestras obligaciones, pues no daremos pie a que haya excusas del tipo: No tengo tiempo.

![Calendario semanal con las horas planificadas hasta ahora y la actividad física](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-7.png)

Como podéis ver, me gusta alternar el tipo de actividad física para estimular al cuerpo y a la mente de maneras distintas y por eso, me gustaría probar todos los tipos de yoga pues cada uno tiene sus ventajas. ¡Es todo un vicio!

Una vez hayamos realizado estos 6 sencillos pasos que os estoy recomendando para planificar la semana, podremos ver que tenemos una rutina semanal bastante equilibrada y distribuida, de tal manera que nos ayude a tener una buena salud física y mental.

Ahora que sabes cuanto tiempo disponible tienes cada semana, primero deberás plantearte que hacer con él y segundo, cómo gestionarlo, pues hay muchas metodologías para hacerlo, como comentaba al inicio de este artículo.

Organizo mi tiempo de tal manera que cada día tengo ratos libres para los imprevistos o la vida social que no había planeado.

![Planificación semanal. Incluye horas de trabajo, descanso, obligaciones, actividad física y distribución del tiempo libre](/images/blog/6-sencillos-pasos-para-organizar-tu-semana/6-sencillos-pasos-para-organizar-tu-semana-8.png)

Una vez terminada la planificación de la semana con estos 6 sencillos pasos dependerá de nosotros saber gestionar el tiempo disponible para tener vida social, conseguir nuestras metas, resolver los imprevistos y lograr paz mental.


6 sencillos pasos para organizar tu semana


## ¿Por qué deberías invertir en tu equilibrio mental?

Desarrollar un buen equilibrio mental nos ayudará a afrontar los problemas. Disponiendo de las herramientas psicológicas correctas y teniendo una visión más ponderada, lograremos lidiar con las dificultades más fácilmente. Eso significa que la adversidad nos afectará menos y por eso, nos recuperaremos antes de los malos momentos. Sin duda, **es una inversión que vale la pena.**

_¿Nervioso antes de un examen? ¿Agobiado por la entrega de un trabajo? ¿Inseguro por la poca preparación con la que llegas a las oposiciones? ¿Te sientes mal contigo mismo año tras año al ver que no cumpliste con los objetivos que te marcaste para ese entonces?_

Son muchas situaciones por las que a veces nos sentimos nerviosos, ansiosos, estresados o incluso inseguros de nosotros mismos. En ese caso hay una probabilidad muy alta de que el motivo sea por una organización no apropiada o inexistente.

> Son muchas situaciones por las que a veces nos sentimos nerviosos, ansiosos, estresados o incluso inseguros de nosotros mismos. En ese caso hay una probabilidad muy alta de que el motivo sea por una organización no apropiada o inexistente.

Como podemos ver, los casos citados anteriormente son situaciones que se repiten una y otra vez a lo largo de nuestra vida y tienen algo en común. En todas estas situaciones intentamos lograr nuestras metas, objetivos o propósitos.

Una meta no es más que un fin al que derivan unas acciones o deseos de alguien. Es importante tener en cuenta que ese alguien no siempre vamos a ser nosotros, porque tanto el proyecto que quiere tu jefe que termines como los deberes que te asigna tu profesor, también son metas.

Desde mi punto de vista podemos clasificar las metas que vamos a tener a lo largo de nuestra vida, independientemente del tiempo que nos tomen como:

- Metas impuestas por una tercera persona.
- Metas propias superficiales.
- Metas propias de una importancia media.
- Metas propias viscerales.

## Metas impuestas por una tercera persona

Estas metas son las típicas que tenemos que hacer por obligación. Claros ejemplos de metas impuestas por una tercera persona son:

- Los deberes del colegio
- La presentación de un trabajo final
- Las tareas que te mandó tu superior en el trabajo

Estas metas pueden perturbar la zona más exterior de tu paz con nervios y a veces estrés. Por eso, es importante planificarlas bien. En caso de no hacerlo, podría afectar a nuestro humor, relaciones personales e incluso a la manera e ver las cosas.

## Metas propias superficiales

Este tipo de metas son las típicas que como norma general no tienen una motivación emocional. Algunos ejemplos podrían ser:

- Cortarse el cabello
- Limpiar la habitación
- Hacer la compra semanal

En nuestra vida es costumbre que tengamos que lidiar con este tipo de metas. Por eso, coger experiencia en planificar hará que nos ahorremos mucho tiempo, el cual podremos dedicarlo a otras cosas de mayor relevancia para nosotros.

Aunque directamente el no cumplir este tipo de metas no nos genera estrés o ansiedad, si esto se prolonga por un periodo de tiempo, sí que sucede de manera indirecta por el desorden en nuestros mapas mentales y/o alteración de nuestras actividades al ver que no podemos realizar otras tareas que son de mayor importancia para nosotros a causa de esto.

## Metas propias de importancia media

Las metas de importancia media tienen una parte visceral. Es importante cumplir estas metas porque son el origen de la gran mayoría de problemas psicológicos y/o anímicos. Algunos ejemplos de este tipo de metas son:

- Conseguir un trabajo en especial
- Correr una maratón
- Bajar de peso
- Dejar de fumar o de beber alcohol
- Proponerte aprender una nueva habilidad

**Fallar en estas metas, es fallarse a uno mismo.** _¿Cómo te sientes realmente al ver una vez tras otra que no consigues las cosas que te propones? ¿Te sientes mal o peor contigo mismo cada vez que no consigues una meta?_ Es entonces, cuando sentimientos como la **inseguridad**, la **tristeza** o la **ansiedad se instalan en nuestro subconsciente** y si no lo controlamos, **las cosas empezarán a ir mal**. Tener esos sentimientos, siempre cuando sea algo temporal, no es un problema.

## Metas propias de importancia viscerales

Las metas de importancia alta o viscerales son las que dan sentido a nuestra vida. Son **propósitos que responden para qué vivimos o qué tenemos que hacer con nuestra vida.** Estas, responden a la más pura esencia de cada uno de nosotros, dado que salen de _“nuestro yo interior”_.

Las metas viscerales son las más importantes y debemos planificarlas porque son una inversión a largo plazo. _En caso de no hacerlo, lo más probable es que nos cause depresión e infelicidad tanto con nosotros mismos como con la gente que nos rodea_. Algunos ejemplos son:

- Ayudar a la gente a encontrar su motivación
- Ayudar a países del Tercer Mundo
- Combatir injusticias sociales
- Cambiar la ética de una sociedad
- Ayudar a la gente a ser consciente de sus problemas y ayudarles
- Mejorar el sistema educativo

Ahora que ya sabemos en términos generales como afecta a nuestra paz interior el hecho de no realizar los distintos tipos de tarea o metas… Vamos a ver las ventajas y desventajas de planificarse.

## Desventajas

- Como no tenemos acciones marcadas, **perdemos mucho tiempo pensando que acciones debemos tomar sobre la marcha** y hacemos microanálisis que resultan poco productivos.
- **Falta de rumbo**. Hacemos _“lo que nos apetece”_. Eso favorece a la procrastinación. Al cabo de un tiempo de haber realizado esa actividad que _“nos apetecía”_ nos puede crear tristeza o un sentimiento de culpabilidad al darnos cuenta de que no deberíamos haber dedicado tanto tiempo a eso.
- **No tener un rumbo hace más complicado medir el proceso.** Si no podemos medir el progreso, nuestra motivación va a disminuir.
- Intentamos recordar el qué, cómo y cuándo de las tareas que debíamos hacer. **El hecho de querer recordar las cosas hasta que las necesitamos, llena de ruido y preocupación de manera innecesaria a nuestro cerebro. Además, consume mucha energía** porque tenemos que estar recordando periódicamente esos quehaceres que no queremos olvidar y es por eso, que muchas veces nos acordamos de algunos de ellos en un contexto totalmente distinto. _¿Te has acordado alguna vez de labores que tenías que hacer, por ejemplo cuando estabas con tus amigos?_
- **Descontrol de horarios.** Dado que no nos hemos planificado, es fácil que terminemos los cometidos más tarde, pues las decidimos sobre la marcha.
- **Desequilibrio personal.** Sin planificación es casi imposible tener un equilibrio personal en cuanto a actividades: _Introspección, vida social, deporte…_
- Posponer actividades al ver que no teníamos lo que necesitábamos _(no nos dimos cuenta por qué no lo pensamos anteriormente)._


4 tipos de tareas que hemos de planificar para un equilibrio mental


Hola, me digo a mí mismo.

Es domingo. Da igual la hora. Estoy en mi habitación con la luz apagada, las persianas bajadas y sin rayo de luz alguno.

Sentado en el colchón de mi cama, con la espalda bien recta acostada en la pared y mis piernas cruzadas _a lo indio_, me dispongo a empezar.

Inspiro profundamente… Y expiro de golpe a modo de suspiro. Me siento los hombros pesados. Giro el cuello hacia un lado _-crac, crac, crac-_. Lo giro hacia el lado opuesto _-crac-_.

Lo primero que me viene a la cabeza, es que **me sigue faltando algo**. ¿Qué es? Pienso… **No es normal que me sienta vacío y no sepa el porqué.**

Apoyo mis codos encima de las rodillas mientras me cubro las orejas con las manos, aprieto con fuerza y vuelvo a lo de siempre. Estos son algunos de los pensamientos que me vienen a la cabeza:

- Tengo una familia que me quiere
- Nunca me ha faltado comida, ni agua caliente
- Sé que solo tengo 2 amigos. Son verdaderos amigos. Son la familia que yo elegí
- Conozco mis gustos, mis aficiones, mis puntos fuertes y debilidades
- Gracias al _mindfulness_ he aprendido a disfrutar mucho de la interacción con la naturaleza y los animales
- Estudié y trabajo de lo que me gusta que me gusta. Soy desarrollador web
- Tengo buen salario y total flexibilidad
- Sé de qué tipo de personas quiero rodearme
- Disfruto mucho enseñando. No importa el que
- Tengo fuertes principios éticos y morales que se van consolidando a medida que pasan los años
- He tenido la oportunidad de poder conocer culturas y gente local en otros países
- He hecho distintos tipos de voluntariados que han ayudado a darme cuenta de lo que realmente es valioso

**No sé por qué no soy feliz**, por mucho que lo piense, no logro entenderlo.

Por felicidad hablo de plenitud, de satisfacción máxima.

Soy joven y sé que me queda mucho camino por recorrer, pero, no quiero sentirme así. Derrotado. Hundido. Y aún menos, _no quiero imaginarme muriendo sin haber vivido._

Miro hacia atrás. Recuerdo algunas de las metas y retos cumplidos. Experiencias vividas, gente que he conocido... Disfruto de los buenos momentos que paso con mi familia y amigos.

Me considero afortunado por saber valorar pequeños detalles. Por ejemplo, el dibujar una sonrisa en los labios de la recepcionista al saludarla enérgicamente.

Soy consciente de que estas cosas aportan felicidad a mi vida y es por eso que las practico. Pero para mí, No es suficiente. **Me siento incompleto, incomprendido y solo.**

**No sé cuál es mi objetivo vital, para qué vivo o qué hacer con mi vida. Me falta por descubrir ese propósito que creo que todos necesitamos** y que hasta que no lo identifique _-que no significa hasta que lo logre-_ no me sentiré plenamente feliz.

_Paro de apretar mi cabeza e incorporo mi espalda lentamente hasta que vuelve a estar recostada_. _PLAM!_ Mi cráneo golpea contra la pared.

Exhalo con desánimo pensando que el día de hoy, ha sido uno más en la cuenta que me trae.


Articulos destacados