Forem: Alejandro Torres

Dosificarse: la estrategia que me salvó del burnout trabajando en remoto

Alejandro Torres — Wed, 15 Oct 2025 15:23:33 +0000

Esta última década ha sido bastante marcada por la nueva tendencia que es trabajar en remoto, y más que hablar de los oficios que ocurren detrás de esta modalidad de trabajo, me parece interesante escribir sobre una estrategia que a mí me ha funcionado a lo largo del año para poder mantener un buen ritmo de trabajo de lunes a viernes.

¿De qué estoy hablando?

Hablo de tu rendimiento. A veces queremos dar el 100% en todo, pero resulta que dar el 100% a diario te va a dejar sin el 100% eventualmente.

¿Cómo así?

Imagina que quieres ser el mejor programador en tu empresa: terminas las tareas asignadas antes de tiempo, siempre participas en las reuniones, eres proactivo… y probablemente esto te va a dar reconocimiento y fama en tu equipo, lo cual es bueno.

Sin embargo, tu jefe lo primero que va a hacer luego de que termines tu tarea a tiempo es darte otra tarea. Y luego, ya que has sido proactivo, te va a delegar tareas que probablemente le competen a él.

Al final del día tienes que seguir este ritmo por todo el año, de lunes a viernes.

¿Crees que es sostenible?

¿Acaso no tienes que cocinar? ¿Bañarte? ¿Comer? ¿Entrenar (y si no lo haces, deberías: no queremos llegar a viejos oxidados)? ¿Tomar un tiempo para caminar también?

Es muy probable que estés saltándote la vida misma por querer reconocimiento, fama… y aunque sí es una estrategia para ascender, no sé qué tan viable sea. Porque, desde mi experiencia, la única manera de progresar últimamente es saltar de empresa.

¿Qué quise decir?

Que si te esfuerzas más, probablemente te vas a generar más estrés, trabajo y responsabilidades. Muchas más de las que ya tienes en tu día a día.

De por sí, un adulto independiente ya tiene que:

Cocinar
Limpiar
Fregar
Hacer mercado

¿Pero entonces cuál es la solución?

No digo que seamos flojos. Tampoco que dejemos de ser proactivos, mucho menos que nos relajemos totalmente.

El punto principal es dosificar: entender que no puedes ir al 100% en todo, todo el tiempo.

El que corre todo el año sin parar… termina sin piernas en octubre.

¿Ejemplo de dosificar en el trabajo remoto?

Hay tareas que pueden ser diagnosticadas, es decir, ya sabes más o menos cuánto te podrían tomar.

En tu mente sabes que son unos 3 días de labor. Entonces hablas con tu cliente o jefe y le explicas:

“Creo que esto podría tomar 4 días. Ese día adicional no es solo para flojear, es para reorganizarme. Es para tomarme un tiempo para actividades que me enriquezcan también como: leer, hacer deporte, tomarme un pequeño break de la rutina y seguir con más fuerzas. Sobre todo, para organizarme con la próxima tarea importante para el equipo.”

Recuerda: vas a estar todo el año en esta misma rutina, y si no encuentras en tu trabajo remoto tiempos para recargarte, planificar y mantenerte enfocado, se te va a complicar todo.

Hablemos del privilegio

Todo esto lo hablo desde el privilegio de poder trabajar en casa, que de por sí ya es una bendición. Y se agradece siempre el poder decirlo.

Aunque parezca fácil entrar en este mundo, muchas veces ha tenido sus sacrificios.

Y sobre todo: a mí nadie me ha regalado este privilegio, y estoy seguro de que a ti tampoco. Has hecho tus propios sacrificios personales para poder estar en esta modalidad.

Evitemos quemarnos, por favor

Hay gente que labora y labora… y simplemente se quema. Y salir de un estado de burnout no es cosa fácil.

Puede tomar semanas, días o incluso meses en algunos casos.

Y allí seguro que no querrás llegar, porque eso te puede traer problemas personales, laborales, económicos, etc.

Este post no es para flojear, ni para que vivamos una vida hippie sin preocupaciones o responsabilidades.

Es para que entiendas que en la vida toca dosificar a veces y a veces toca poner intensidad. Pero lo cierto es que esta estrategia es la única que te va a ayudar a ser un grande sin quemarte.

La analogía de Messi

Te doy un último ejemplo:

Leo Messi se suele ver caminando en la cancha. Es decir, no siempre está corriendo.

Pero cuando ve la oportunidad del gol, y la oportunidad de entrar en el área, hace un sprint con destreza digno de admiración…

y logra ese gol como consecuencia de esa dosificación caminando.

Conclusión

Dosificarse no es hacer menos.

Es hacer lo justo, con energía, enfoque y conciencia.

Y esa es la diferencia entre sobrevivir el año… y disfrutarlo con propósito.

Yo no le paro tanto al resultado final. Me gusta más poder escribir.

Al final esto es solo mi opinión personal —no es una regla absoluta—, pero es lo que me ha funcionado luego de 5 años de trabajo remoto.

¿Y tú? ¿Qué opinas de dosificar en tu vida?

Patrones en Vue 3 para evitar el prop drilling (Composition API) mientras creamos una app básica con Mock.shop API

Alejandro Torres — Tue, 23 Sep 2025 15:51:32 +0000

TL;DR

Evitar prop drilling en Vue 3 no es solo “comodidad”: reduce acoplamiento y mejora mantenibilidad.
Composables: encapsulan lógica de negocio reutilizable.
Provide/Inject: elegante forma de manejo de estado.
Pinia: estado global centralizado.

Evita props drilling en vue 3

Hoy quería compartir unas estrategias que suelo usar para manejar el estado en aplicaciones realizadas en Vue 3 Composition API + TypeScript, para este ejemplo voy a usar las siguientes tecnologías:

Pinia 3.0.3
Axios 1.12.0
Vue 3.5.18
Vuetify 3.10.0

Voy a usar también esta API pública llamada Mock.shop para ejemplificar el proyecto.

También uso otras tecnologías mas pero ya si quieres echarle un pequeño ojo a la implementación lo vamos a ir viendo en detalle en la creación de la app. También voy a dejar el repositorio desde donde podemos copiar y reproducir los ejemplos al final.

Antes de empezar ¿Qué es el prop Drilling?

Es un patrón en el que los datos (props) se pasan a través de múltiples componentes anidados, incluso aquellos que no los necesitan, para finalmente llegar a un componente hijo que sí los requiere.

Vue 3 tiene varios sabores a la hora de elegir nuestra receta de manejo de estado y de evitar props drilling (o taladrado de props).

La idea es evitar esto, no porque te vaya a romper tu aplicación si no que es como darte un tiro en una pata, a la larga si tu proyecto crece y usas esta estrategia solo te vas a complicar la vida.

Lo que vamos a hacer es ir creando la aplicación paso a paso mientras te voy explicando en detalle cada cosa.

Es una app básica y la idea es enfocarnos en:

Evitar el props drilling
Escribir código limpio y escalable.
Separación de intereses o mejor conocido como separation of concerns(SoC)

Creamos la app paso a paso

Vamos a empezar por los archivos base para nuestro proyecto.

package.json

{
  "name": "avoid-prop-drilling-patterns",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src"
  },
  "dependencies": {
    "axios": "^1.12.0",
    "pinia": "^3.0.3",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1",
    "vuetify": "^3.10.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "eslint": "^9.35.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-vue": "^10.4.0",
    "globals": "^16.4.0",
    "typescript-eslint": "^8.43.0",
    "vite": "^7.0.6",
    "vite-plugin-vue-devtools": "^8.0.0"
  }
}

.prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

.eslint.config.js

import eslint from '@eslint/js';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintPluginVue from 'eslint-plugin-vue';
import globals from 'globals';
import typescriptEslint from 'typescript-eslint';

export default typescriptEslint.config(
  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
  {
    extends: [
      eslint.configs.recommended,
      ...typescriptEslint.configs.recommended,
      ...eslintPluginVue.configs['flat/strongly-recommended'],
    ],
    files: ['**/*.{ts,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
      parserOptions: {
        parser: typescriptEslint.parser,
      },
    },
    rules: {

    },
  },
  eslintConfigPrettier
);

.vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Estos son los archivos de config, para tener una base sobre la cual escribir nuestro proyecto.

Nuestra estructura de carpetas se va a ver así para este proyecto de ejemplo:

|-- .gitignore
|-- .prettierrc.json
|-- eslint.config.js
|-- index.html
|-- tsconfig.json
|-- package-lock.json
|-- package.json
|-- README.md
|-- vite.config.js
|-- public
  |-- favicon.ico
|-- src
  |-- App.vue
  |-- main.ts
  |-- api
    |-- ApiClient.ts
  |-- composables
    |-- useMockShopAPI.ts
  |-- keys
    |-- StoreKey.ts
  |-- pages
    |-- StoreView.vue
  |-- router
    |-- index.ts
  |-- stores
    |-- app.ts
  |-- types
    |-- store.ts
  |-- components
    |-- storeView
      |-- CollectionItems.vue
      |-- ProductItems.vue
      |-- productItems
        |-- ProductImage.vue
        |-- ProductItem.vue
      |-- collectionItems
        |-- CollectionItem.vue

Nuestra primera estrategia para evitar props drilling: Composables

Vamos a crear el cliente de API que usaremos y el composable que lo invoca. Acá la primera forma con Vue: los composables están diseñados para ser reutilizables o para encapsular lógica de negocio, en nuestro caso es la primera alternativa que tenemos para no repetir código, para encapsular lógica de negocio y sobre todo para evitar prop drilling en nuestros componentes. documentación de composables.+

src\main.ts

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { router } from '@/router';

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import App from './App.vue';

const vuetify = createVuetify({
  components,
  directives,
});

const pinia = createPinia();
const app = createApp(App);
app.use(router);
app.use(vuetify);
app.use(pinia);
app.mount('#app');

/src/api/ApiClient.ts

import axios, {
  AxiosError,
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  InternalAxiosRequestConfig,
  RawAxiosRequestHeaders,
} from 'axios';

type TrailingSlashMode = 'always' | 'never' | 'preserve';

export interface ApiClientOptions {
  baseURL?: string;
  withCredentials?: boolean;
  timeout?: number;
  maxRedirects?: number;
  maxContentLength?: number;
  defaultHeaders?: Record<string, string>;
  csrfToken?: string;
  getCSRFToken?: () => string | undefined;
  trailingSlash?: TrailingSlashMode;
  onForbidden?: (error: AxiosError) => void;
  retries?: number;
  retryDelayMs?: number;
}

const isBrowser =
  typeof window !== 'undefined' && typeof document !== 'undefined';

function ensureTrailingSlash(
  url: string | undefined,
  mode: TrailingSlashMode
): string | undefined {
  if (!url || mode === 'preserve') return url;

  const [pathWithHash, query = ''] = url.split('?');
  const [path, hash = ''] = pathWithHash.split('#');

  const adjusted =
    mode === 'always'
      ? path.endsWith('/')
        ? path
        : `${path}/`
      : path.endsWith('/')
      ? path.slice(0, -1)
      : path;

  const q = query ? `?${query}` : '';
  const h = hash ? `#${hash}` : '';
  return `${adjusted}${q}${h}`;
}

function isFormDataLike(val: unknown): val is FormData {
  return typeof FormData !== 'undefined' && val instanceof FormData;
}

function sleep(ms: number) {
  return new Promise((res) => setTimeout(res, ms));
}

export function createApiClient(options: ApiClientOptions = {}): AxiosInstance {
  const {
    baseURL = '/api',
    withCredentials = false,
    timeout = 60000,
    maxRedirects = 10,
    maxContentLength = 50 * 1000 * 1000, // 50MB
    defaultHeaders,
    csrfToken,
    getCSRFToken,
    trailingSlash = 'always',
    retries = 0,
    retryDelayMs = 300,
  } = options;

  const instance = axios.create({
    baseURL,
    withCredentials,
    timeout,
    maxRedirects,
    maxContentLength,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      ...defaultHeaders,
    },
  });

  // REQUEST interceptor
  instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
    if (config.url) {
      config.url = ensureTrailingSlash(config.url, trailingSlash);
    }

    // CSRF
    const headerName = 'X-CSRFToken';
    const token =
      csrfToken ??
      (getCSRFToken
        ? getCSRFToken()
        : isBrowser
        ? document
            .querySelector<HTMLElement>('#global-csrf')
            ?.getAttribute('csrf') ?? undefined
        : undefined);

    if (
      token &&
      config.headers &&
      !(config.headers as RawAxiosRequestHeaders)[headerName]
    ) {
      (config.headers as RawAxiosRequestHeaders)[headerName] = token;
    }

    // FormData vs JSON
    if (isFormDataLike(config.data)) {
      if (config.headers) {
        delete (config.headers as RawAxiosRequestHeaders)['Content-Type'];
      }
    } else {
      if (
        config.headers &&
        !(config.headers as RawAxiosRequestHeaders)['Content-Type']
      ) {
        (config.headers as RawAxiosRequestHeaders)['Content-Type'] =
          'application/json';
      }
    }

    (
      config as InternalAxiosRequestConfig & { __retryCount?: number }
    ).__retryCount ??= 0;

    return config;
  });

  // RESPONSE interceptor
  instance.interceptors.response.use(
    (response) => response,
    async (error: AxiosError) => {
      const status = error.response?.status;

      const cfg = error.config as
        | (AxiosRequestConfig & { __retryCount?: number })
        | undefined;
      if (cfg && retries > 0) {
        const networkError = !error.response;
        const serverError = status ? status >= 500 && status < 600 : false;

        if (networkError || serverError) {
          cfg.__retryCount = (cfg.__retryCount ?? 0) + 1;
          if (cfg.__retryCount <= retries) {
            const delay = retryDelayMs * Math.pow(2, cfg.__retryCount - 1);
            await sleep(delay);
            return instance.request(cfg);
          }
        }
      }

      return Promise.reject(error);
    }
  );

  return instance;
}

// Strongly-typed wrapper
export interface HttpClient {
  get<T = unknown, R = AxiosResponse<T>>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<R>;
  delete<T = unknown, R = AxiosResponse<T>>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<R>;
  head<T = unknown, R = AxiosResponse<T>>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<R>;
  post<T = unknown, B = unknown, R = AxiosResponse<T>>(
    url: string,
    data?: B,
    config?: AxiosRequestConfig
  ): Promise<R>;
  put<T = unknown, B = unknown, R = AxiosResponse<T>>(
    url: string,
    data?: B,
    config?: AxiosRequestConfig
  ): Promise<R>;
  patch<T = unknown, B = unknown, R = AxiosResponse<T>>(
    url: string,
    data?: B,
    config?: AxiosRequestConfig
  ): Promise<R>;
  request<T = unknown, R = AxiosResponse<T>>(
    config: AxiosRequestConfig
  ): Promise<R>;
}

export function wrap(instance: AxiosInstance): HttpClient {
  return {
    get: (url, config) => instance.get(url, config),
    delete: (url, config) => instance.delete(url, config),
    head: (url, config) => instance.head(url, config),
    post: (url, data, config) => instance.post(url, data, config),
    put: (url, data, config) => instance.put(url, data, config),
    patch: (url, data, config) => instance.patch(url, data, config),
    request: (config) => instance.request(config),
  };
}

// --- Default singleton ---
const defaultInstance = createApiClient({
  baseURL: '/api',
  trailingSlash: 'always',
  retries: 0,
});

const defaultClient = wrap(defaultInstance);
export default defaultClient;

useMockShopApi.ts


import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
import { createApiClient } from '@/api/ApiClient';
import type { AxiosResponse } from 'axios';

export function useMockShopAPI<T>() {
  const appStore = useAppStore();
  const apiError = ref<string>();
  const apiData = ref<T>();

  const apiClient = createApiClient({
    baseURL: 'https://mock.shop/api',
  });

  const setError = (e: unknown) => {
    if (
      e &&
      typeof e === 'object' &&
      'message' in e &&
      typeof (e as { message?: unknown }).message === 'string'
    ) {
      apiError.value = (e as { message: string }).message;
    } else {
      apiError.value = 'Unexpected error';
    }
  };

  const fetchCollections = async (): Promise<AxiosResponse<T> | undefined> => {
    appStore.loading = true;
    try {
      const response = await apiClient.get('', {
        params: {
          query: `
              {
                collections(first: 10) {
                  edges {
                    cursor
                    node {
                      id
                      handle
                      title
                      description
                      image { id url }
                    }
                  }
                }
              }
            `.trim(),
        },
      });
      apiData.value = response.data;
      return response;
    } catch (error) {
      setError(error);
      return undefined;
    } finally {
      appStore.loading = false;
    }
  };

  const fetchProducts = async (
    collectionID: string
  ): Promise<AxiosResponse<T> | undefined> => {
    appStore.loading = true;
    try {
      const response = await apiClient.get('/', {
        params: {
          query: `
            {
                collection(id: "${collectionID}") {
                id
                handle
                title
                description
                image { id url }
                products(first: 20) {
                    edges {
                    node {
                        id
                        title
                        featuredImage { id url }
                    }
                    }
                }
                }
            }
            `.trim(),
        },
      });
      apiData.value = response.data;
      return response;
    } catch (error) {
      setError(error);
      return undefined;
    } finally {
      appStore.loading = false;
    }
  };

  return {
    fetchCollections,
    fetchProducts,
    apiData,
    apiError,
  };
}

Ya culminado esto ahora vamos al siguiente paso que son nuestros componentes base.

src\App.vue

<script setup></script>

<template>
  <main>
    <RouterView />
  </main>
</template>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src\router\index.ts

import { createMemoryHistory, createRouter } from 'vue-router'

import StoreView from '@/pages/StoreView.vue'

const routes = [
  { path: '/', component: StoreView },
]

export const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

PD: Este clientApi.ts es construido con axios, es bastante útil para cualquiera de tus proyectos por si lo necesitas re utilizar.

Segunda estrategia para evitar props drilling: Provide / Inject

Es una de mis opciones preferidas entre algunas vistas, como yo lo veo el provide inject es una buena manera de manejar lógica de mutación de estado, lectura, etc.

El mejor ejemplo visual que tengo es de la misma documentación oficial de Vue 3

En pocas palabras un componente que esta varios niveles por debajo de nuestro componente padre puede acceder a funciones y variables reactivas de una manera.

Vamos a seguir construyendo componentes para que veas como lo uso y donde lo uso.

src\pages\StoreView.vue

<script setup lang="ts">
import { watch, provide, ref, onMounted, computed } from 'vue';
import { StoreKey } from '@/keys/StoreKey';
import { useMockShopAPI } from '@/composables/useMockShopAPI';
import CollectionItems from '@/components/storeView/CollectionItems.vue';
import ProductItems from '@/components/storeView/ProductItems.vue';
import type {
  GetProductsResponse,
  GetCollectionsResponse,
} from '@/types/store';

const productEdges =
  ref<GetProductsResponse['data']['collection']['products']['edges']>();
const collectionEdges =
  ref<GetCollectionsResponse['data']['collections']['edges']>();
const currentCollection = ref<string>();

const showProducts = computed(() => (currentCollection.value ? true : false));

const selectCollection = (collectionID: string) => {
  currentCollection.value = collectionID;
};

provide(StoreKey, {
  collectionEdges,
  productEdges,
  currentCollection,
  selectCollection,
});

watch(currentCollection, async (newValue) => {
  if (newValue) {
    const { fetchProducts, apiData, apiError } =
      useMockShopAPI<GetProductsResponse>();

    await fetchProducts(currentCollection.value);
    if (apiError.value) {
      console.log(apiError.value);
      return;
    }

    productEdges.value = apiData.value.data.collection.products.edges;
  }
});

const reset = () => {
  productEdges.value = undefined;
  collectionEdges.value = undefined;
  currentCollection.value = undefined;
};

const handleFetchCollection = async () => {
  reset();
  const { fetchCollections, apiData, apiError } =
    useMockShopAPI<GetCollectionsResponse>();

  await fetchCollections();
  if (apiError.value) {
    console.log(apiError.value);
    return;
  }

  collectionEdges.value = apiData.value.data.collections.edges;
};

onMounted(async () => {
  await handleFetchCollection();
});
</script>

<template>
  <CollectionItems
    v-if="!showProducts"
    @refresh="handleFetchCollection"
  ></CollectionItems>
  <ProductItems v-else @refresh="handleFetchCollection"></ProductItems>
</template>

Acá es vital que entendamos esta parte:

provide(StoreKey, {
  collectionEdges,
  productEdges,
  currentCollection,
  selectCollection,
});

Uso el provide/inject para lógica de negocio que requiera de maneja o manipulación de estado, las colecciones, los productos, la colección seleccionada actualmente y por último la función que nos permite seleccionar la colección, haciendo uso de esta estrategia no tengo que reescribir código en componentes hijos de nuestra app y me permite tener separación de intereses, no hago llamados API con provide/inject sino que solo leo o actualizo el estado de mi aplicación.

src\keys\StoreKey.ts


import type { Ref } from 'vue';
import type {
  GetProductsResponse,
  GetCollectionsResponse,
} from '@/types/store';
import type { InjectionKey } from 'vue';

export const StoreKey = Symbol('StoreKey') as InjectionKey<{
  productEdges?: Ref<
    GetProductsResponse['data']['collection']['products']['edges']
  >;
  collectionEdges?: Ref<GetCollectionsResponse['data']['collections']['edges']>;
  currentCollection?: Ref<string>;
  selectCollection?: (collectionID: string) => void;
}>;

Y StoreKey es un symbol que aloja las variables y funciones que vamos a proveer a nuestros componentes hijos, de nuevo mi intención acá es solo lógica de manejo de estado para nuestra aplicación.

Ahora vamos con los componentes hijos.

src\components\storeView\CollectionItems.vue

<script setup lang="ts">
import { inject, ref, computed } from 'vue';
import { StoreKey } from '@/keys/StoreKey';
import { useAppStore } from '@/stores/app';
import CollectionItem from './collectionItems/CollectionItem.vue';

const appStore = useAppStore();

const emit = defineEmits<{
  (e: 'refresh'): void;
}>();

const { collectionEdges, selectCollection } = inject(StoreKey, {
  collectionEdges: ref([]),
  selectCollection: () => {},
});

const collectionCount = computed(() => collectionEdges?.value?.length || 0);
</script>
<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h2 class="text-h5 mb-4">Showing {{ collectionCount }} collections</h2>
        <v-btn
          :loading="appStore.isLoading"
          :disabled="appStore.isLoading"
          @click="emit('refresh')"
          >Refresh</v-btn
        >
      </v-col>
      <v-col
        v-for="edge in collectionEdges"
        :key="edge.node.id"
        cols="12"
        md="3"
      >
        <CollectionItem
          class="cursor-pointer"
          :collection="edge.node"
          @click="selectCollection(edge.node.id)"
        ></CollectionItem>
      </v-col>
    </v-row>
  </v-container>
</template>

src\components\storeView\ProductItems.vue

<script setup lang="ts">
import { ref, inject, computed } from 'vue';
import { StoreKey } from '@/keys/StoreKey';
import { useAppStore } from '@/stores/app';
import ProductItem from '@/components/storeView/productItems/ProductItem.vue';

const appStore = useAppStore();

const emit = defineEmits<{
  (e: 'refresh'): void;
}>();

const { productEdges } = inject(StoreKey, {
  productEdges: ref([]),
});

const productCount = computed(() => productEdges?.value?.length || 0);
</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h2 class="text-h5 mb-4">
          There are a total of {{ productCount }} products
        </h2>
        <v-btn
          :loading="appStore.isLoading"
          :disabled="appStore.isLoading"
          @click="emit('refresh')"
          >Go Back</v-btn
        >
      </v-col>
      <v-col v-for="edge in productEdges" :key="edge.node.id" cols="12" md="3">
        <ProductItem :product="edge.node"></ProductItem>
      </v-col>
    </v-row>
  </v-container>
</template>

src\components\storeView\collectionItems\CollectionItem.vue

<script setup lang="ts">
import { inject } from 'vue';
import { StoreKey } from '@/keys/StoreKey';
import { useAppStore } from '@/stores/app';
import type { Collection } from '@/types/store';

const appStore = useAppStore();

interface ProductItemProps {
  collection: Collection;
}

defineProps<ProductItemProps>();

const { selectCollection } = inject(StoreKey, {
  selectCollection: () => {},
});
</script>

<template>
  <v-card
    @click="selectCollection(collection.id)"
    :loading="appStore.isLoading"
  >
    <v-img
      color="surface-variant"
      height="200"
      cover
      :src="collection.image.url"
    ></v-img>
    <v-card-title>{{ collection.title }}</v-card-title>
    <v-card-text>{{ collection.description }}</v-card-text>
  </v-card>
</template>

src\components\storeView\productItems\ProductItem.vue

<script setup lang="ts">
import { useAppStore } from '@/stores/app';
import ProductImage from './ProductImage.vue';
import type { Product } from '@/types/store';

const appStore = useAppStore();

interface ProductItemProps {
  product: Product;
}

defineProps<ProductItemProps>();
</script>

<template>
  <v-card :loading="appStore.isLoading">
    <ProductImage :url="product.featuredImage.url"></ProductImage>
    <v-card-title>{{ product.title }}</v-card-title>
    <v-card-text>{{ product.description }}</v-card-text>
  </v-card>
</template>

src\components\storeView\productItems\ProductImage.vue

<script setup lang="ts">
interface ProductImageProps {
  url: string;
}

defineProps<ProductImageProps>();
</script>

<template>
  <v-img color="surface-variant" height="200" :src="url" cover></v-img>
</template>

Tercera estrategia para evitar props drilling: Pinia

Pinia es una conocida librería de manejo de estados globales centralizado, para nuestra app va a ser muy útil, es muy simple el uso que le doy, solo para marcar si nuestra app esta haciendo algún llamado a una API y luego colocar nuestro flag **loading **en true como puedes ver a continuación.

src\stores\app.ts

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    loading: false,
  }),
  getters: {
    isLoading: (state) => state.loading
  }
})

Con tanto archivo puede que algo se nos este pasando entre tanto copiar y pegar, para evitar ese mal rollo te voy a compartir el repositorio, no mas con descargarlo tienes la app funcionando sin necesidad de tanto copia y pega.

Repositorio de Mock Shop demo

Con esto ya tenemos todo lo que vamos a necesitar para que nuestra app este funcionando y en marcha, debería verse así luego de ejecutar un npm run dev deberíamos estar viendo el proyecto funcionando.

La persona con mentalidad de limpia vidrios llega más lejos

Alejandro Torres — Sun, 07 Sep 2025 18:42:15 +0000

Seguramente alguna vez habrás visto en un semáforo a un hombre o mujer haciendo esta labor, usualmente es algo así:

Le hace seña al conductor
El conductor le dice que no
No les importa y vuelven a hacer otra seña a otro conductor, pero aun así insiste porque sabe que alguno va a aceptar.
Por fin uno le dijo que sí, les paga y siguen en esta labor a diario.

¿Admirable no? Para mí sí, porque hay varios esfuerzos detrás de esta labor:

Esfuerzo físico: Porque llevar sol todo un día mientras te dicen que no no es cosa fácil.
Esfuerzo mental: ¿Te gustaría que te digan que no a cada rato? A mí tampoco, ellos lo manejan a diario.
Esfuerzo espiritual: Un alma saludable reside en un cuerpo y mente saludable y hacer esto a diario es desgastante.

El rechazo como entrenamiento

Seguro habrás vivido en carne propia el rechazo en alguna situación de tu vida y si la respuesta es no, no te envidio para nada, a mí el rechazo me hizo más fuerte y más sabio a la hora de acercarme a nuevas oportunidades.

Para endurecer tu resiliencia y experiencia es necesario que vivas esta experiencia, el rechazo no es malo; malo es no haberlo vivido.

¿Deberíamos sentirnos orgullosos de ser rechazados?

Tampoco, pero la idea de este escrito es dar a entender lo valioso detrás de la mentalidad de saber que un “no” solo muy probablemente nos está acercando a ese “sí” que anhelamos y que para nosotros es importante. Mejor dicho: nuestro propósito o meta puede estar a unos cuantos “no”.

¿Seguir insistiendo aunque nos digan que no?

Quizás suene de persona terca esta característica, pero la verdad sea dicha: nadie te va a regalar nada en esta vida, te toca levantarte e ir a por ello. No todos tenemos esa suerte, al menos yo ya no, y por eso te insisto a ti en que entiendas que no se trata de ser obstinado, sino persistente con propósito.

Se trata de que tienes un propósito y meta más allá de una necesidad económica. Yo lo tengo bien claro: a mí me encanta mi estilo de vida actual y todo lo que conlleva disfrutar de eso es gracias a que tuve la fuerza de procesar esos “no”, convertirlos en un “quizás por ahora no era el lugar adecuado para mí, pero debo seguir buscando porque seguramente alguien sí necesita de mí”.

El mercado laboral 2025

El mercado laboral siempre es fluctuante: hay años en los que estarán contratando por montones, mientras que habrá años donde estarán despidiendo por montones.

Yo nunca he sido despedido en mi carrera profesional de 10 años de experiencia, pero también tuve una racha mala en la época de la pandemia. La compañía donde trabajaba, una startup llamada Boho Food Market (quizás lo cuente en otra historia), quebró y tampoco recibí pagos por más de 5 meses, quedando en una situación donde tuve que vivir de mis ahorros en un país extranjero. Técnicamente no fue un despido, pero prácticamente es lo mismo y peor porque no me pagaron.

Además, intentaba conseguir otro empleo en ese contratiempo. La verdad siento que lo que me ayudó en esas épocas fue la mentalidad de limpia vidrios al 100%. Yo sabía que mi momento llegaría y en el entretiempo solo hice freelance, me dediqué a escribir, me dediqué a entender cómo conseguir una nueva oportunidad y sobre todo a no ser tan duro conmigo porque a veces la vida es así. Porque yo me sienta así, el mundo no se va a detener.

Entendiendo esta parte, tiempo después lo conseguí. Pero nadie sabe sobre los 5–8 meses de entrevistas fallidas, rechazos y malos pensamientos que rondaban en mí y que me hacían querer devolverme a casa con mi mamá y dejarlo así.

Difícil de saberlo, nadie puede predecir estas cosas. Lo que sí podemos hacer es preparar siempre nuestra mente para que un rechazo —como por ejemplo un despido— tampoco nos impacte ni nos defina como personas. Todos somos valiosos en nuestra forma y aportamos algo que definitivamente tiene valor.

Es importante que entiendas tu valor, tus habilidades y que si te rechazan o despiden esto solo significa que te abren una puerta a otra oportunidad que probablemente viene con mejores cosas para tu vida.

Conclusión

La próxima vez que recibas un “no” recuerda por favor:

Piensa como limpia vidrios: siempre hay otro semáforo, siempre hay otro chance.
Cada rechazo no es un fracaso, es entrenamiento.
Mientras tengas vida y salud, siempre habrá otra puerta que tocar.

El mercado laboral es incierto, pero tu mentalidad es lo que define cuánto tiempo te quedas parado en la calle o cuánto sigues avanzando hacia tu meta.

¿Ya construiste tu mentalidad limpia vidrios? Quizás sea la pieza que te falte para conseguir mejores oportunidades.

The Promising Future of AI and Why We Shouldn't Ignore It

Alejandro Torres — Thu, 04 Sep 2025 14:57:05 +0000

“In 2035 we will be able to use these tools to cure a significant number or at least treat a significant number of diseases that currently plague us.”

— Sam Altman, OpenAI CEO

I was watching a YouTube video of Sam Altman speaking about this amazing chatbot: ChatGPT.

By the way, did you know that they settled on ChatGPT, short for “generative pre-trained transformer”?

Sam Altman's vision is to increase the knowledge for this famous chatbot. While it can of course become more amazing than it is right now, I would like to share some of my own thoughts.

An Optimistic Vision from the CEO of OpenAI

In any video you will hear him talk about the many possibilities for humanity. Basically every 10 years I can assume that this model will be 10 times bigger and 10 times faster. They're likely reducing every year the timeline to create a better and better AI model.

But even he doesn't know what's going to be the future of humanity if they keep increasing the capacity. He talks about how disruptive this can be for individuals — and I agree with that point. I know that big companies are already employing fewer people.

If you really pay attention to Sam Altman, he says a lot of things but at the same time he doesn’t. You know what I mean? He has this thing of telling what he believes and his vision but without defining a final roadmap, conclusion, or really saying anything. It’s like hearing a politician talking every minute.

What Does That Actually Mean for People?

For me, the truth is that this AI race has already begun, and they won’t stop. By that I mean every company that’s developing AI models.

So what’s the limit of this? I don’t know, but I will assume there isn’t one. If companies keep pushing for more efficient, faster, and smarter AI, there will definitely be a new world with massive digital changes.

The main thing to worry about is understanding how we can implement AI in our daily lives. This will happen regardless of your posture. If you totally ignore it, you could even be scammed.

I’ve seen hundreds of people answering to AI-generated women on the internet. It’s like they don’t really understand what’s AI and what’s not. AI is amazing in that aspect: making the majority believe it’s real.

So, what’s real and what’s not today?

Will We Be Replaced by AI?

Perhaps there will be countries that approve the use of AI and others that limit it to just certain areas. In any case, AI cannot be truly limited. If you have access to the internet, you can use this tool.

I believe this will be a pretty crazy world with many things happening related to the use of AI. There will even be people who base their personality entirely on AI — sounds crazy, right?

It doesn’t matter if you agree or not, the world won’t stop progressing in this matter. The only thing we can do is ask ourselves:

How can this tool help me in my daily tasks?
Is it valuable to learn about this technology?
Will this really make a change in my life?
Should I prevent my kids from using AI?

I really don’t know all the answers. But just thinking about the last question, this is something we should all be prepared for. We’re talking about information in seconds, and not understanding it can lead to wrong usage — especially for young people.

It can create faster growth but also faster chaos if we’re not prepared for that flood of information. Even as adults, we’re likely to face the same problem.

The Risk of Falling Behind

As a 32-year-old programmer, I think about the AI race and it honestly gives me chills. If we don’t take action — if we don’t learn, adapt, and figure out how to integrate these new tools into our professions — we won’t just fall behind in knowledge. We’ll risk falling behind economically.

Not taking advantage of AI may mean missed opportunities, lost jobs, and in the long run, a weakened financial future that will affect our lifestyle.

In short: if we ignore it, our economy, both personal and collective, could falter.

Conclusion

After reading all the things I wrote today, it looks like I’m not so different from Sam Altman. I speak about everything, but I don’t really know what the conclusion is.

And maybe that’s the real conclusion: we can’t predict it all yet. For now, I will keep reflecting on this topic — perhaps in a next post I’ll go deeper.

For everyone who wants to see the whole interview, please check the video and have your own thoughts.

Final Recommendation

My real recommendation goes to everyone who works in the digital world: start experimenting with AI now.

The question isn’t whether AI will reshape your profession — it already is.

The real question is: will you be a spectator, or will you take part in building the next chapter of human progress?

Vue School Certification: My Experience, Tips, and Final Thoughts

Alejandro Torres — Wed, 03 Sep 2025 23:53:45 +0000

If you are about to take the Vue School certification issued by certificates.dev, or still deciding whether it’s worth it, here I share some advice, my experience, recommendations, and finally a conclusion.

The last 4 years of my career have been all about Vue.js, combined with Python or Golang. Although I’ve also worked with React.js, I never really got attached to that framework. Inevitably, I always ended up choosing Vue, not only because it’s reactive by nature, but also because I truly believe it’s one of the best frameworks to build with JavaScript — and here’s why:

It doesn’t overcomplicate things.
It has good, extensive documentation.
A large and active community.
Security practices: Vue has an entire page dedicated to explaining what to avoid and highlighting its built-in security strengths.

The simplicity of Vue makes a big difference. For example:

React: I feel it abuses ternary operators, which can turn into a nightmare when working at big companies where you face a mess of code just for conditional rendering:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

Vue: lets you do the same thing in a much more elegant and readable way:

<template>
  <section>
    <h1>Sally Ride's Packing List</h1>
    <ul>
      <Item :isPacked="true" name="Space suit" />
      <Item :isPacked="true" name="Helmet with a golden leaf" />
      <Item :isPacked="false" name="Photo of Tam" />
    </ul>
  </section>
</template>

<script setup>
import Item from './Item.vue'
</script>

After 3 years of working mainly with Vue, I came across the opportunity to get certified in this technology since my company was paying for it. I accepted the offer and began preparing.

Preparation

It took me about 3 months because I made sure to complete all the training, which were mostly coding practices, while still working full-time. Honestly, it’s not the most fun activity to study for an exam after 8 hours of daily work — but it’s doable. If you want it, you can make it happen.

There are two certifications:

Level 1: Focused on the fundamentals of Vue.js, covering topics such as:

Creating a Vue Application
Reactivity Fundamentals
Template Syntax
Event Handling
Form Input Binding
Watchers
Lifecycle Hooks
Template Refs
Components
Slots
Transitions
Plugins
Custom Directives
Vue Router
Ecosystem

Level 2: Advanced concepts and practices, with a focus on TypeScript and best practices to avoid building fragile applications. Topics include:

Composables
Testing
Render Function and Virtual DOM
Advanced Props and Events
Provide/Inject
Global State Management
TypeScript
SSR
Performance
A Couple of Notes
Options for Securing Your Senior Developer Examination

I’ll say this often: if you’ve already enrolled, I strongly recommend completing every single training exercise provided for each level.

The Exam

The exam is proctored, which means you’re being monitored the entire time through your webcam. Any suspicious behavior, like looking away too often or checking your phone, is not allowed.

Requirements:

Webcam: your face will be recorded during the entire test.
Microphone: audio will also be recorded.
ID: needed to register for the exam.
A closed room: they’ll ask you to rotate your camera 360° to ensure no irregularities.
Silence: no background music allowed.

The exam has 2 parts:

Multiple-choice questions

You get 30 minutes for this part. They’re fairly straightforward (like “low-hanging fruit”). If you finish early, you don’t get extra time for the coding section, so use the chance to double-check your answers.

Coding challenge

You get 105 minutes. This is where you really need to apply your understanding of the concepts. My recommendation: make sure you’ve done all the training exercises, because they prepare you for exactly this.

At the end of the challenge, once you meet the success criteria, you’ll also be asked to fix a bug left intentionally in the code. That’s the final step before finishing.

What If You Fail?

You get two attempts. If you fail the first, you’ll have another shot with better preparation.

If you run into technical issues during the exam, the platform will give you a free retake.

Is It Worth It?

This is subjective. Some developers who never took the certification might still be more skilled than many who did. Like most things in life, it depends on how you play your cards — luck and timing also play a role.

In my case, it helped me land a contract with another company as a contractor. I worked on migrating from Bootstrap to modern Vue 3 Composition API + Vuetify + TypeScript. The certificate plus my Vue expertise made the competition almost irrelevant when applying for the project.

I’ll put it this way: in life, sometimes it’s better to have it and not need it, than to need it and not have it.

Como me certifique como Vue.js Senior Developer, recomendaciones y consejos

Alejandro Torres — Fri, 29 Aug 2025 23:07:04 +0000

TL;DR:

✅ La certificación de Vue School tiene 2 niveles (básico y avanzado).

⏱️ Dura ~3 meses de preparación con entrenamientos de código.

💻 El examen es proctorizado: preguntas + coding challenge + bug fix.

🎯 En mi caso, valió la pena: me ayudó a cerrar un contrato como contractor.

Si estas próximo a realizar el examen o pensando en si tomar o no la certificación de Vue School emitida por certificates.dev te doy unos consejos, mi experiencia, recomendaciones y por ultimo una conclusión.

Los últimos 4 años de mi carrera han sido puro Vue.js combinados con Python o Golang y aunque realice cosas también en React.js nunca me termine de encariñar con ese framework, inevitablemente para mi me llevaron a siempre elegir **Vue **no solo porque sea una tecnología reactiva en esencia si no porque me parece de los mejores **frameworks **para construir con JavaScript, y te explico el porque:

No te la complica tanto.
Tiene buena y extensa documentación.
Comunidad grande.
Practicas de seguridad: Tienen toda una página completa para explicar lo que debes evitar y te muestra algunas bondades de usar Vue.js en este tema.

En fin fueron tanta las simplicidades de usar Vue, como por ejemplo esto

React: Siento que abusa de los ternary operator y puede resultar una pesadilla cuando te toca trabajar en empresas grandes y ver toda esta maraña de código solo para un renderizado condicional

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Vue: Mientras que vue te permite hacerlo de manera elegante y fácil de leer.

<template>
  <section>
    <h1>Sally Ride's Packing List</h1>
    <ul>
      <Item :isPacked="true" name="Space suit" />
      <Item :isPacked="true" name="Helmet with a golden leaf" />
      <Item :isPacked="false" name="Photo of Tam" />
    </ul>
  </section>
</template>

<script setup>
import Item from './Item.vue'
</script>

Así que a mis 3 años de experiencia me topo con la posibilidad de certificarme en esta tecnología ya que en la empresa donde trabajo estaban pagando para que te certificaras, oferta que acepte y empecé mi camino de estudio.

La preparación

Me tomo unos 3 meses porque me asegure de hacer todos los entrenamientos que eran practicas de código mayormente, y tocaba hacer esto mientras trabajaba lo cual no es de las actividades mas divertidas prepararte para un examen luego de 8 horas de trabajo diarias.

Pero si se puede, el que quiere puede.

Hay dos certificaciones

Nivel 1: es sobre conceptos básicos de Vue.js que se dividen en los siguientes temas:

Creating a Vue Application
Reactivity Fundamentals
Template Syntax
Event Handling
Form Input Binding
Watchers
LifeCycle Hooks
Template Refs
Components
Slots
Transitions
Plugins
Custom Directives
Vue Router
Ecosystem

Nivel 2: conceptos y practicas avanzadas de Vue.js donde se elabora mas sobre TypeScript, buenas practicas para evitar aplicaciones defectuosas y se divide en los siguientes temas:

Composables
Testing
Render Function and Virtual DOM
Advanced Props and Events
Provide/Inject
Global State Management
TypeScript
SSR
Performance
A Couple Notes
Options for Securing Your Senior Developer Examination

Lo menciono mucho en esta publicación pero si ya te inscribiste yo te recomiendo hacer todos y cada uno de los entrenamientos que te provee cada nivel.

El examen

El examen es proctorizado lo que significa que estas siendo vigilado en todo momento del examen con tu propia video cámara, así que cualquier miradita para un lado o cosas que se vean sospechosas como intentos de copiarte o ver tu celular no son validos.

Requisitos:

Webcam: Te van a grabar tu cara toda la prueba
Micrófono: Te van a grabar el sonido toda la prueba.
Tu identificación: Para poder registrarte al examen.
Espacio o cuarto cerrado: Luego te piden un giro de 360 por tu cuarto para ver si es adecuado y no hay nada raro en el ambiente.

- Silencio: No se vale escuchar musiquita mientras haces el examen.

Se compone de 2 partes:

Responder preguntas de selección simple

Te dan 30 minutos para poder realizar esta parte y es básicamente como le decimos en mi tierra "conchitas de mango", si lo haces antes de los 30 minutos no significa que te van a aumentar el tiempo a la siguiente así que si respondiste bien tomate tu tiempo de revisar que respondiste lo correcto antes de ir a la siguiente parte.

Coding challenge

Te dan 105 minutos y acá debes poner en practica tu entendimiento de los conceptos explicados para cada nivel, por lo cual lo ideal en mi opinión, es que preferiblemente te hagas todos los entrenamientos que te provee el sitio para cada nivel porque ponen en práctica absolutamente todo lo explicado en lo teórico.

Luego de terminar el coding challenge y lograr todos los criterios de cumplimiento debes pasar a resolver un BUG que han dejado a propósito en el código y con eso sería el final del examen.

¿Qué pasa si repruebo?

Tienes dos intentos para realizar el examen, así que si no pudiste a la primera podrás tener otra oportunidad con mejor preparación.

También si tuviste algún problema técnico durante el examen la plataforma te dará un reintento gratis.

¿Vale la pena?

En mi caso me ayudo a cerrar un contrato con otra empresa como contractor: para realizar una migración de Bootstrap a lo nuevo de Vue 3 composition API + Vuetify + TypeScript y el certificado mas mi dominio de Vue hizo que la competencia fuera minima a la hora de entrar al proyecto.

Te lo voy a decir de esta forma, en la vida a veces es mejor pensar en la la frase de un conocido comercial venezolano que dice:

"Es mejor tenerlo y no necesitarlo, que necesitarlo y no tenerlo".
Popularizada por el animador Gilberto Correa para un comercial de seguros.

Así que si ya vives de esta tecnología y le haz sacado provecho económico, ¿Por qué no especializarte mas y ofrecer un servicio de calidad?

¿Tu crees que vale la pena hoy en día tener este certificado?

👉 Si estás pensando hacerlo y tienes dudas, cuéntame en los comentarios y compartimos experiencias.

Como me certifique como Vue.js Senior Developer y recomendaciones

Alejandro Torres — Fri, 29 Aug 2025 23:07:04 +0000

No te la complica tanto.
Tiene buena y extensa documentación.
Comunidad grande.
Practicas de seguridad: Tienen toda una página completa para explicar lo que debes evitar y te muestra algunas bondades de usar Vue.js en este tema.

En fin fueron tanta las simplicidades de usar Vue, como por ejemplo esto

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Vue: Mientras que vue te permite hacerlo de manera elegante y fácil de leer.

<template>
  <section>
    <h1>Sally Ride's Packing List</h1>
    <ul>
      <Item :isPacked="true" name="Space suit" />
      <Item :isPacked="true" name="Helmet with a golden leaf" />
      <Item :isPacked="false" name="Photo of Tam" />
    </ul>
  </section>
</template>

<script setup>
import Item from './Item.vue'
</script>

La preparación

Pero si se puede, el que quiere puede.

Hay dos certificaciones

Nivel 1: es sobre conceptos básicos de Vue.js que se dividen en los siguientes temas:

Creating a Vue Application
Reactivity Fundamentals
Template Syntax
Event Handling
Form Input Binding
Watchers
LifeCycle Hooks
Template Refs
Components
Slots
Transitions
Plugins
Custom Directives
Vue Router
Ecosystem

Nivel 2: conceptos y practicas avanzadas de Vue.js donde se elabora mas sobre TypeScript, buenas practicas para evitar aplicaciones defectuosas y se divide en los siguientes temas:

Composables
Testing
Render Function and Virtual DOM
Advanced Props and Events
Provide/Inject
Global State Management
TypeScript
SSR
Performance
A Couple Notes
Options for Securing Your Senior Developer Examination

Lo menciono mucho en esta publicación pero si ya te inscribiste yo te recomiendo hacer todos y cada uno de los entrenamientos que te provee cada nivel.

El examen

Requisitos:

Webcam: Te van a grabar tu cara toda la prueba
Micrófono: Te van a grabar el sonido toda la prueba.
Tu identificación: Para poder registrarte al examen.
Espacio o cuarto cerrado: Luego te piden un giro de 360 por tu cuarto para ver si es adecuado y no hay nada raro en el ambiente.

- Silencio: No se vale escuchar musiquita mientras haces el examen.

Se compone de 2 partes:

Responder preguntas de selección simple

Coding challenge

¿Qué pasa si repruebo?

Tienes dos intentos para realizar el examen, así que si no pudiste a la primera podrás tener otra oportunidad con mejor preparación.

También si tuviste algún problema técnico durante el examen la plataforma te dará un reintento gratis.

¿Vale la pena?

La verdad esto es muy subjetivo porque habrán algunos que ni han hecho la certificación y seguramente son mas genios que los muchos que si, como todo en la vida todo va a depender de como juegues tus cartas y de las causalidades y casualidades, en mi caso me ayudo a cerrar un contrato con otra empresa como contractor, para realizar una migración de Bootstrap a lo nuevo de Vue 3 composition API + Vuetify + TypeScript y el certificado mas mi dominio de Vue hizo que la competencia fuera minima a la hora de entrar al proyecto.

Te lo voy a decir de esta forma, en la vida a veces es mejor .

La IA lo bueno, lo malo y lo que sigo aprendiendo ( Parte 1)

Alejandro Torres — Fri, 29 Aug 2025 18:32:33 +0000

TL;DR:

🚀 La IA acelera aprendizaje y productividad (ej: GitHub Actions, chatbots, extracción de datos).

⚠️ Pero también trae dependencia, más exigencias laborales y dudas sobre reemplazo humano.

👉 Mejor aprovecharla como herramienta que temerla como sustituto.

Seguramente tu día a día esta lleno de posts que hablan sobre lo maravillosa que es la llegada de la I.A. a nuestra vida y sobre como podría reemplazar a los humanos en muchas labores, como por ejemplo: programación, atención de clientes, reporte y atención de PQRS.

Pareciera una campaña del miedo para hacer creer al mundo que nos van a reemplazar eventualmente, es un tema que no tiene conclusión porque nunca vas a encontrar una respuesta pero esta publicación se va a concentrar en dos cosas:

¿Cómo sacarle provecho a esta situación?,
Lo que no me cuadra.

Si bien la campaña del miedo es lo mas cotidiano, me parece que lo que estamos viviendo no tiene precedentes, y quiero dar un punto de vista de un programador con 32 años con 10 años de experiencia en el área, lo bueno y lo malo.

Pros

Rapidez para resolver problemas: Un caso de ejemplo personal: yo necesitaba extraer montos que superaran una cifra en mis extractos bancarios, le he subido a Chat GPT mis extractos y el me ha creado una tabla para brindarme esa información. En cuestión de un minuto resolví lo que podía haber demorado media hora o mas.
Curva de aprendizaje mas rápida: De la misma forma tener acceso a la IA te podría impulsar en tu proceso de aprendizaje, para poner un ejemplo yo entendía poco o nada de Github Actions y una tarde junto a Chat GPT me llevo a entender y poner en practica un pipeline que necesitaba ejecutar para desplegar mi proyecto a CloudFlare, antes esto podía haber demorado mas perdiendo tiempo buscando documentación en línea, foros. Es tener un mentor asistente digital en tu día a día.
Abre un mundo de posibilidades en aplicaciones modernas: He visto una demanda de construir aplicaciones como chatbots de conocimiento, ejemplo: un chatbot para una empresa de seguros que tiene toda la enciclopedia del negocio en su memoria y que lo usa para compartir esto con los usuarios.
Mucha información en un mismo lugar: No importa la IA que uses todas tienen algo en comun, estudian el conocimiento de la enciclopédia mas grande del mundo (Internet) y te brindan el dato que necesitas en cuestión de segundos.
Abre nuevos empleos: Si, se que hay campañas de miedo anti IA pero imagínate que ahora buscan empleos como: Prompt AI Engineer, se supone que son los profesionales que se encargan de dar instrucciones a modelos de I.A. Asi como este ejemplo hay mas, asi que una por otra, si trajo mas empleo pero también quita empleos.

Contras

Mas exigencia laborales: He escuchado mucho de situaciones como esta de amigos y he vivido también algunas parecidas, jefes que te dicen cosas como: ¿Por qué esto duraría 12 horas de labor si con la IA podríamos hacerlo en menos tiempo? Y aunque es una valida pregunta porque tiene un punto, si, la IA llego para simplificar muchas cosas, pero hay mucho contexto detrás de las cosas que hacemos como programadores en el día a día desde:

Reuniones con clientes.
Levantamiento de requerimientos.
Cambios de requerimientos en una demanda diaria, semanal o aleatoria.
Posible conexión entre múltiples sistemas viejos o modernos.
Manejo de roles y seguridad en aplicaciones.
Demostraciones
Etc. Es decir hay tantas variables atrás de construir sistemas y aplicaciones web, estar en este negocio no solo se trata de escribir código, así que no es tan sencillo resumirlo todo en un prompt.

A pesar de que puedas explicar todo esto a tu superior, inevitablemente sale de nuevo el tema de IA y se vuelve a las mismas preguntas: ¿Podríamos durar menos en esta tarea haciendo uso de la IA?, ¿Por qué no usamos la IA para esta tarea?.

Dependencia: Siento que aunque potencia a muchos nuevos programadores al mismo tiempo los hace un poco inútiles sin una IA al lado y esto me preocuparía a la hora de contratar alguien, no estoy en contra de usarla estoy en contra de contratar a alguien que solo sería capaz de entregar resultados haciendo uso de la misma.

¿Por qué contrataría a alguien si una IA lo puede hacer mejor?: ¿Cómo te defiendes ante eso? Me imagino que llegará el dia qué una super inteligencia por 5 mil dolares al mes sea un agente perfecto que crea tu aplicación web 24/7. ¿Para qué contrataría a un humano que tiene que dormir, comer o descansar ? ¿Para pensarlo no?. En cualquier caso eso es algo que aun no sucede y puede que nisiquiera suceda.

Conclusión

No es una conclusión definitiva pero mira, si la IA existe y podemos usarla, ¿Por qué no mejor concentrarnos en usarla para nuestro provecho en vez de pensar como nos va a reemplazar?

¿Tú qué opinas?

Mi experiencia en Mercado Libre como Senior Developer: lo bueno, lo malo y lo que aprendí

Alejandro Torres — Thu, 28 Aug 2025 15:26:39 +0000

TL;DR:
🚀 Trabajar en Mercado Libre me dio mucha experiencia y crecimiento.

✅ Pros: marca fuerte en el CV, buena paga en LATAM, aprendí Go, Java, Python, home office.

⚠️ Contras: burnout, guardias nocturnas, reuniones interminables.

👋 Salí tras una oferta mejor y porque quería crecer como contractor en USA.

Antes de comenzar

Luego de muchos años programando con Magento, PHP, JavaScript, MySql y haber empezado mi carrera como programador en 2015. Me tope con una de las mejores noticias: Haber entrado a Mercado Libre como Senior Developer en Marzo de 2021.

Acá te cuento lo que sucedió, el por qué agradezco haber ingresado, el porque tuve que salir y los pros **, **contras de esta experiencia única en mi carrera.

El inicio

Luego de un proceso 3 meses que empezó en Diciembre de 2020 donde pase por:

Entrevista
Prueba técnica
Otra entrevista
Firma de contrato

Dio comienzo una de las etapas que reforzaron más mi experiencia como programador.

No quiero extenderme en lo técnico quiero decirte porque vale la pena desde mi punto de vista estar en Mercado Libre

Pros

Es una muy buena marca en tu CV.
De la misma forma la experiencia que ganas es super importante para el resto de tu carrera.
Paga buena en Latino América vs otras compañías.
Siempre el salto de Mercado Libre a otra compañía resulta en mejores ingresos.
Aprendes muchas tecnologías de vanguardia como: Golang, Python, Java, JavaScript, TypeScript, React.js.
Hay trabajo interminable lo que se traduce en mi opinión en poder hacer una carrera larga y duradera en Meli si te sientes a gusto.
Es Home Office / Hibrido: Lo cual se traduce en mas tranquilidad, en realidad no es obligatorio ir a las oficinas ya.
Puedes moverte entre equipos: Conocí a varias personas que cuando no se sentían a gusto en un equipo solicitaban cambio a otras áreas, lo cual es una buena estrategia para manejar el burnout en mi opinión.

Contras

El aprendizaje puede ser limitante en dev Ops ya que todo esta configurado para solo programar y desplegar.
Siempre tienen esta mentalidad de startup: Toca apagar incendios por doquier y esto nos lleva al siguiente punto.
El burnout: es inminente sobre todo si demuestras habilidades técnicas buenas, eso te va a llevar a tener una carga de trabajo mas pesada pero ahora que lo pienso esto pasa en cualquier trabajo.
Las guardias: básicamente tener que despertarte a las 3 am ( dependiendo del área en que trabajes claro ) para levantar o reparar una app que se haya caído si es tu semana de guardia.

¿Por qué salí?

Al comienzo mis primeros 3 meses fueron un paraíso:

Un **onboarding **que demoro menos por mis ganas de codear cuanto antes.
Me encontraba haciendo mi primera demo lo cual me dio mucha alegría en menos de un mes.
El ambiente de trabajo espectacular.

Al quinto mes las cosas cambiaron

Me tope con la noticia de que mi compañero quien era el backend en **Go **se tuvo que ir por razones personales ( mas billete, dinero, plata ), el problema no es que se fuera, el problema es que me dejo solo con una de las aplicaciones mas conflictivas del área con un SLO por debajo de 60% que eran consecuencia de muchas malas practicas.

En este punto solo habían dos opciones:

Rendirse
Reparar esta app conflictiva

La segunda fue mi elección y conforme pasaban los meses, fortalecí mucho mis conocimientos, reparaba y reparaba sin cesar. Al mismo tiempo agotaba mi mente, tenía mas problemas de descanso, salud que inevitablemente contagiaron también mi hogar de estas energías, aunado a eso una cosa que no me gustaba tanto de MELI eran las interminables reuniones, había reunión para todo cada día aparte de la daily, programar y tener muchas juntas es una mala combinación para mi.

Pero lo logré, sacamos adelante esta app con ayuda de una compañera junior que me apoyo con el Front End, lidere la parte técnica y para mi sorpresa aprendí mucho de Go y lo aplique a cabalidad con las mejores prácticas recomendadas por la tecnología.

Ya no era 60% el SLO, era de 98% y en ascenso, me sentía muy feliz por el logro pero al mismo tiempo bastante agotado, el burnout fue inminente, la historia corta de porque salí es que recibí una oferta de trabajo por el doble de lo que ganaba y por menos esfuerzo de lo que hacía para MELI lo cual para mi tenia mucho sentido ya que mi intención al final no era hacer carrera sino poder construir patrimonio, trabajar como independiente y aumentar mi experiencia ya que soy joven, sabía que MELI no era el lugar indicado para mi al menos ya no mas, lo agradecí de corazón y continúe mi camino.

Cambie de trabajo y desde allí nunca deje de trabajar como **contractor **para empresas de U.S.A

¿Te gustaría ingresar a Meli 🚀?

Mercado Libre es una de las empresas tech más grandes de LATAM y busca sobre todo:

Desarrolladores Backend (Java, Go, Kotlin, Node.js).
Frontend Engineers (React, Vue, Angular).
Mobile Developers (Kotlin, Swift, React Native).
Cloud & DevOps (AWS, Kubernetes, Terraform).
Data & AI (Python, ML, Big Data, Spark).

¿Dónde aplicar?

Sitio oficial de empleos: jobs.mercadolibre.com

LinkedIn: suelen publicar ofertas muy actualizadas.
Referral interno, palanca, enchufe: si conoces a alguien dentro, las recomendaciones tienen bastante peso ( el cual fue mi caso ).

¿Qué valoran mucho?

Experiencia con microservicios y arquitecturas distribuidas: Así que es bueno entender el concepto de micro front ends, micro servicios, Etc.
Manejo de alta concurrencia y sistemas escalables: Esto es el día a día en MELI, poder procesar miles y miles de operaciones sin que nada se rompa y por supuesto sea coherente con el proceso, es algo que me dio mucho expertise en Go.
Buenas prácticas: testing, CI/CD, observabilidad, EsLint.
Conocimientos en seguridad: ¡Nada de harcodear passwords en el código jeje!.
Nivel de inglés: no siempre excluyente, pero suma bastante, aunque ahora que lo pienso no hable nada de Inglés.

Conclusión

Para mi fue una de las experiencias mas chéveres de mi carrera:

Aprendí mucho.
Mantuve contactos de personas que estimo mucho.
Definitivamente los argentinos me caen re bien, esta experiencia afianzó mucho mas esa afinidad que como Venezolano tengo con los Argentinos en su cultura y sus formas.
El plan de salud me cayó re bien porque justo me operaron de apendicitis en 2021.

Y si estas comenzando tu carrera en MELI como tu primera experiencia laboral déjame decirte que eres muy afortunado porque no hay mejor lugar para empezar en mi opinión.

¿Recomendaciones?
Nunca dejes aprender y tampoco te sientas mal por no entrar a Mercado Libre, tampoco es que eso te defina como programador.

¿Ya trabajaste en MELI? ¿Qué opinas? ¿Te gustaría ingresar?

When to use Astro and when not: my experience

Alejandro Torres — Tue, 26 Aug 2025 16:30:29 +0000

🚀 Astro: great for blogs, portfolios, SEO, and low-budget projects.

🛠️ Nuxt.js: best for applications with business logic, roles, authentication, and state management.

Recently, I had the experience of launching my personal website using Astro.js, a very simple technology to quickly create a blog or portfolio. What surprised me the most was how easy it is to integrate technologies like Vue.js, React.js, and even other modern frontend libraries.

With that motivation, I decided to launch alejandrotorres.dev, a simple site to showcase my experience, skills, and portfolio. In just three days, I had the first version in production.

I was impressed to see that Astro can integrate with technologies like:

Vue.js
React.js

And many more. For my needs, it was great to know it worked with the two technologies I master.

The good things about Astro

Speed: it definitely delivers what it promises. The result is fast, lightweight static pages, and you can even make use of server-side endpoints, giving you a small margin to add logic without leaving Astro’s philosophy.
Deployment: I should highlight how easy it was to deploy on Cloudflare Pages (I almost always use this platform). But it also works with many other tools.
Content: the main reason I chose Astro, and it fully delivers. Astro was designed to present your content, and it does it beautifully. Its content collections allow you to work with .md or .json files, greatly simplifying the creation of blogs, documentation, or landing pages.

The not-so-good

Compatibility with other frameworks: while you can use Vue.js or React.js, sometimes it’s a bit messy to pass props or decide when to use client:load or client:idle to avoid hydration issues. Especially if you’re coming from an SPA framework where this feels more natural.
Documentation: often I had to dig into the framework itself to solve issues or debug, especially when I decided to use TypeScript.
State management: this is a weak spot. If you think you can have the best of both worlds, that’s not the case. Astro is deficient at managing state, and implementing client-side state can be a real challenge. If you need global state or complex client-side interactions, it feels limited.

When to use Astro

Blogs: an incredible tool for content creation. You can write in .md or .json files, making the process of designing and publishing content much simpler (see docs).
Portfolios: usually static by nature, making Astro a perfect fit since it’s content-driven.
SEO: static pages allow you to easily add the necessary tags to optimize your site for search engines.
Headless CMS Integration: Astro supports a wide variety of CMS integrations for blogs, news, or dynamic content.
Low budget projects: you don’t need a fortune to run a solid site with Astro, making it a great option for MVPs or proof-of-concepts.

When not to use Astro

Astro may complicate things if you need:

Global state management.
Authentication in protected routes.
Highly dynamic components that depend on client-side rendering.

In those cases, I recommend moving to a more complete framework like Nuxt.js.

With Nuxt you get:

✅ SSR + SSG + SPA in the same project.
✅ Middlewares for user roles and authentication (server-side & client-side).
✅ Secure API communication (no secrets exposed).
✅ A stronger ecosystem for projects with complex business logic.

Conclusion

My experience is clear:

Astro is amazing for content-oriented sites (portfolios, blogs, documentation, landing pages).
Nuxt is more suitable when building complete web applications with roles, authentication, and complex state.

It’s not about which is “better,” but about which one is best for each scenario.

For me, Astro was perfect for my portfolio, but if I had to build a payment portal or a corporate dashboard, I wouldn’t hesitate to choose Nuxt.js.

🙏 Thanks for reading. If this helped even one person, it was worth writing.

👉 Have you tried Astro or Nuxt? Which one would you choose for your next project?

Cuando usar Astro js y cuando no según mi experiencia

Alejandro Torres — Tue, 26 Aug 2025 16:02:31 +0000

🚀 Astro: ideal para blogs, portafolios, SEO y proyectos con bajo presupuesto.
🛠️Nuxt.js: ideal para aplicaciones con lógica de negocio, roles, autenticación y manejo de estado.

Hace poco tuve la experiencia de lanzar mi sitio web personal usando Astro.js, una tecnología bastante simple para crear rápidamente un blog o portafolio. Lo que más me sorprendió fue lo fácil que resulta integrar tecnologías como Vue.js, React.js, e incluso otras librerías modernas del ecosistema frontend.

Con esa motivación decidí lanzar alejandrotorres.dev, un sitio sencillo donde mostrar mi experiencia, habilidades y portafolio. En solo tres días tenía una primera versión en producción.

Me sorprendió saber que se pueden integrar tecnologías como:

Vue.js
React.js

Y se pueden integrar otras mas, pero para mis necesidades era bueno saber que era compatible con estas dos tecnologías que domino.

Lo bueno de Astro:

Velocidad: Si que cumple lo que promete, y el resultado es páginas no muy pesadas, estáticas y incluso puedes hacer uso de server side endpoints, como puedes ver acá: https://docs.astro.build/en/guides/endpoints/, lo cual te da un pequeño margen para agregar lógica sin salirte de su filosofía.
Despliegue: cabe destacar que se puede desplegar en CloudFlare y yo casi que ando casado con esta tecnología, muy fácil de desplegar apps, pero no solo sirve con CloudFlare sino con muchas mas herramientas como puedes ver acá: https://docs.astro.build/es/guides/deploy/
Contenido: El punto principal por el cual elegí Astro y esto lo cumple al 100%: Astro js fue diseñado para mostrar tu contenido y lo hace de lujo. Sus content collections permiten trabajar con archivos .md o .json, lo que simplifica muchísimo la creación de blogs, documentación o landing pages.

No me parece tan bueno en:

Compatibilidad con otras tecnologías: Aunque cumple lo de poder desarrollar con Vue.js y React.js a veces resulta bastante engorroso el poder pasar props, entender cuando usarclient:load, client:idle para evitar problemas de Hydration. Especialmente si vienes de un framework SPA donde esto es más natural.
Documentación: Muchas veces tuve que simplemente indagar en el framework para resolver cosas o hacer debugging sobre todo cuando tuve la decisión de trabajarlo con TypeScript esto fue aun mas evidente. Manejo de estado: En este punto queda bastante flojo y es que si piensas que puedes tener lo mejor de ambos pues no es así, Astro es deficiente en el manejo de estado y puede resultar en un reto implementar algo client side. Si necesitas estado global o interacciones complejas en client side, se siente limitado.

¿Cuándo si?

Me gusta ser conciso y para que te evites problemas te voy a dar una lista de opciones de cuando si:

Blogs: Es una increíble herramienta para poder crear tu contenido, te permite hacerlo en archivos .md o .json y eso hace que tu proceso de diseñar y crear contenido para tu aplicación sea menos complicado https://docs.astro.build/en/guides/content-collections/
Portafolios: por lo general un portafolio es estático y no necesita mas que mostrar la labor que haz realizado, acá viene como anillo al dedo ya que Astro es orientado a contenido y esto permite que mostrar tu portafolio sea una tarea mas sencilla.
SEO: Al permitirte crear páginas estáticas te permite añadir las tags que necesites para optimizar el SEO de tu website.
Integración con HEADLESS CMS: astro tiene una variedad de sabores: https://docs.astro.build/en/guides/cms/ para quienes deseen agregar todo tu contenido: blog, noticias, contenido, Etc.
Presupuesto bajo: Me atrevo a pensar que no necesitas una millonada para ejecutar un buen sitio en astro por lo cual pienso que es una buena opción para pruebas de concepto o MVP.

¿Cuándo no?

Astro puede complicarte la vida si necesitas:

Manejo de estado global.
Autenticación en rutas protegidas.
Componentes altamente dinámicos que dependan del client side.

En esos casos, yo recomendaría dar el salto a un framework más completo como Nuxt.js y la unica razón por la cual te lo recomiendo es por la amplia experiencia que tengo usando esta tecnología. Con Nuxt obtienes:
SSR + SSG + SPA en un mismo proyecto.
Middlewares para roles de usuario y autenticación server side y client side.
Comunicación segura con una API, lo cual te permite.
Mejor ecosistema para proyectos con lógica de negocio compleja.

Conclusión

Mi experiencia es clara:

Astro me encanta para sitios orientados a contenido (portafolios, blogs, documentación, landing pages).
Nuxt me resulta más adecuado cuando hay que construir aplicaciones web completas, con roles, autenticación y estado complejo.

No se trata de cuál es "mejor", sino de cuál es mejor para cada escenario. En mi caso, Astro fue perfecto para mi portafolio, pero si tuviera que construir un portal de pagos o un dashboard corporativo, no dudaría en usar Nuxt.js.

Gracias por leer y si esto le ayudo aunque sea a una sola persona valió la pena. ¡Feliz día!

¿Ya probaste Astro o Nuxt? ¿Qué framework prefieres para tu próximo proyecto?