DEV Community: Jorge Luis Calleja Alvarado

Cómo Enfrentar y Superar la Sensación de No Aportar en una Nueva Etapa

Jorge Luis Calleja Alvarado — Tue, 26 Sep 2023 02:21:00 +0000

No dudaría que la mayoría hemos estado allí: nuestro primer día en la nueva empresa o en cualquier otro lugar, sintiéndonos como un pez fuera del agua bajo la mirada curiosa de los nuevos compañeros. Muchos lo conocen como el síndrome del impostor. Sin embargo, en este caso no se trata de eso, sino más bien de la sensación de no aportar lo suficiente en una nueva etapa profesional. Pero no estás solo en esto.

Tu ritmo es único, y eso está bien.

Cada uno de nosotros tiene y lleva un ritmo único de adaptación. En algunos casos, pueden sentirse como en casa en un par de días, mientras que en otros puede tomar semanas o meses. Tómatelo con calma, esto está perfectamente bien. Creo que lo primero es que no te juzgues por lo rápido o lento que te sientas adaptado. Es mejor si abrazas tu proceso y reconoces que cada día es un paso hacia sentirte más cómodo y seguro.

El ladrón de la alegría

Lo más fácil que hacemos es mirar a nuestro alrededor y sentir que todos están más adelante que tú, que todos están más cómodos y que todos están aportando más que tú. Pero recuerda, solo estás comparando tu comienzo con el capítulo de alguien más. Debes considerar que cada persona que ves ha pasado y ha tenido sus propios desafíos y momentos de dudas. Lo mejor que puedes hacer es no compararte; te recomiendo inspirarte en las historias y trayectorias de cada uno.

Estrategias para abrazar tu valor

Reconoce tus logros: Es fácil olvidar lo que has logrado, pero es importante que recuerdes que has llegado hasta donde estás por tus propios méritos. No te olvides de tus logros y de lo que has aprendido en el camino.
No te compares: Como mencioné antes, no te compares con los demás. Cada uno tiene su propio ritmo y su propia historia. En vez de compararte, inspírate en las historias de los demás.
Acepta que no sabes todo: Es normal sentir que no sabes todo, y es cierto que no puedes saberlo todo. Acepta que estás en un proceso de aprendizaje y disfruta de ese camino.
Aprende a pedir ayuda: No tengas miedo de solicitar apoyo; es normal necesitar ayuda en ciertos momentos. Aprende a pedirla y a aceptarla cuando te la ofrezcan.
Aprende a decir no: Es crucial que sepas establecer límites. No puedes hacerlo todo ni saberlo todo. Aprende a decir no y a priorizar tus tareas y responsabilidades.
Mentoría: Busca aquel mentor en tu entorno que pueda ofrecerte consejos y perspectiva. Es excelente tener a alguien que te guíe en tu proceso y te brinde una visión externa para ayudarte a ver las cosas con mayor claridad.
Aprende a celebrar: Valora y celebra tus logros, por pequeños que sean. Disfruta de cada paso que das en tu proceso de crecimiento.
Pide retroalimentación: Pide retroalimentación acerca de tu labor y rendimiento. Esta valiosa información te permitirá detectar oportunidades de crecimiento y consolidar tus puntos fuertes.

Un mensaje para ti

Si estás leyendo esto y sientes que no aportas lo suficiente, quiero que sepas que tu valor no se mide por cuánto sabes el primer día, sino por tu disposición para aprender, crecer y aportar. Eres valioso, perteneces aquí y, con el tiempo, esa voz interna que duda se silenciará ante la evidencia de tus logros y contribuciones.

Configurando tu Terminal para una Experiencia de Desarrollo Frontend Superproductiva 🚀

Jorge Luis Calleja Alvarado — Thu, 11 May 2023 21:25:00 +0000

Como desarrolladores frontend, en los últimos años nuestra interacción con la terminal ha aumentado significativamente.

Esto se debe a que ejecutamos numerosas tareas con frameworks y bibliotecas como react, react-native, Nextjs, remix, svelte , vuejs, entre otros, tanto para desarrollo web como móvil. Ante esta realidad, se hace evidente la necesidad de buscar una experiencia de terminal más amigable y productiva.

Esta guía solo funciona para Linux y macOS, ya que exa aún no tiene soporte para Windows 🫣. pero podría omitir exa

Lista de herramientas

hyper:
El objetivo del proyecto es crear una experiencia hermosa y extensible para los usuarios de la interfaz de línea de comandos, basada en tecnologías web.
Zsh: Es un shell diseñado para uso interactivo, aunque también es un poderoso lenguaje de scripting.
Oh My Zsh: Oh My Zsh es un framework encantador, de código abierto e impulsado por la comunidad para administrar su configuración de Zsh.
starship: ¡El indicador mínimo, ultrarrápido e infinitamente personalizable para cualquier shell!.
exa:
Un reemplazo moderno para el comando ls.
fig: La línea de comando de próxima generación. La fuente de la verdad para los secretos, scripts y credenciales SSH de su equipo.

Instalar hyper

Hyper me ha acompañado mucho tiempo, aunque su primer commit fue en 06 Oct 2016, no fue que lo conocí en la fecha 10 Mar 2017 por un compañero de trabajo.

Con Homebrew ejecute el siguiente comando para realizar la instalación:

brew install --cask hyper

si prefieres bajar .app, te dejo el link de descarga oficial de hyper

Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://hyper.is/#installation

Instalar Zsh

Zsh mejora la experiencia de terminal con funciones avanzadas y personalización. Es esencial para Oh My Zsh, permitiéndote gestionar tu configuración de Zsh y aumentar tu productividad.

Es bastante simple de instalar, ¡porque ahora tenemos Homebrew! Solo ejecutaremos un comando y estaremos listos.

brew install zsh

Notarás que después de que finalice la instalación, realmente no sucede nada. Tendremos que cambiar nuestro shell a Zsh, y lo hacemos con un comando bastante simple:

chsh -s $(which zsh)

Lo que hemos hecho es cambiar nuestro shell para utilizar Zsh cada vez que iniciamos sesión en nuestra terminal. Ahora, simplemente cierra tu terminal y vuélvela a abrir, y estarás listo para usar Zsh.

Instala en otros sistemas operativos con solo seguir la guía oficial desde el repositorio oficial

Puedes hacer uso de la configuración que te dejo a continuación:

"use strict";
module.exports = {
    config: {
        // default font size in pixels for all tabs
-        fontSize: 13,
+        fontSize: 12,
        // font family with optional fallbacks
+       fontFamily: "DroidSansMono Nerd Font",
+       cursorColor: 'rgba(248,28,229,0.8)',
        // terminal text color under BLOCK cursor
+       cursorAccentColor: '#000',
        // `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
        cursorShape: 'BLOCK',
+       foregroundColor: '#fff',
        // opacity is only supported on macOS
+       backgroundColor: '#000',
        // terminal selection color
+       selectionColor: 'rgba(248,28,229,0.3)',
        // border color (window, tabs)
+       borderColor: '#333',
      ...
    },
+   plugins: ["hyper-one-dark", "hyper-snazzy", "hyper-active-tab", "hyper-pane", "hyper-search", "hyper-aura-theme"],
};
//# sourceMappingURL=config-default.js.map

Instalar oh-my-zsh

Ahora que Zsh está instalado, queremos comenzar a configurarlo para que funcione bien para nosotros.

Una de las formas más fáciles de comenzar es instalando Oh My Zsh.

Oh My Zsh viene con una tonelada de temas y complementos de Zsh que le ahorran mucho tiempo configurando cómo desea que se vea y funcione su shell.

Instalarlo es bastante simple, solo hazlo con:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Una vez que finalice esta instalación, hará una referencia para verificar su nuevo archivo ~/.zshrc .

Este es un archivo de configuración oculto, y aquí es donde comenzará a agregar su configuración para hacer que Zsh sea como lo desea.

Puedes visitar la documentación oficial si tienes problemas https://ohmyz.sh/#install

Instalar y Configurar starship

Starship realmente me brinda una experiencia con la terminal muy agradable, desde manejar los entornos en los que estoy trabajando, hasta ejecutar comandos de manera más rápida.

Ejecute el siguinte comando para realizar la instalación:

brew install starship

Agregue lo siguiente en su archivo de configuración de ~/.zshrc:

# s t a r s h i p
eval "$(starship init zsh)"

Ahora solo cierra y vuelve a abrir tu terminal Hyper y pasarás de esto:

A esto:

Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://starship.rs/guide/#%F0%9F%9A%80-installation

Instalar y Configurar Exa

Exa no es un reemplazo directo para el comando ls, pero ofrece valores predeterminados mucho más intuitivos que el comando nativo. Aunque las opciones de línea de comandos disponibles son similares, no son exactamente iguales.

Sin embargo, la mayoría de las opciones comunes funcionarán de manera consistente.

Ejecute el siguinte comando para realizar la instalacion:

brew install exa

cuando finalize la intslacon simplemnte cierre y abra nuevamnete su terminal hypper y ejecute exa --long --header --git y obtendra un resultado como el sigunete:

Exa puede mostrar íconos junto a los nombres de los archivos para que sean más fáciles de distinguir.

Los iconos son símbolos Unicode especiales y, como tales, requieren que la fuente que se utilice tenga los glifos correctos.

Una buena solución para usar iconos en la terminal es el proyecto Nerd Fonts, que parchea las fuentes de ancho fijo existentes con los íconos necesario.

Personalmente uso la fuente DroidSansMono Nerd Font, mi archivo de configuracion de .hypper.js se ve asi:

"use strict";
module.exports = {
    config: {
        // default font size in pixels for all tabs
        fontSize: 12,
        // font family with optional fallbacks
        fontFamily: "DroidSansMono Nerd Font",
        ...

Es necesario también agregar alias de Exa a tu archivo de configuración .zshrc.

# E X A => M A N A G E R
alias ls='exa --icons'
alias lsa='exa --all'
alias l='exa -lbF --git --icons'
alias ll='exa -lbGF --git --icons'
alias llm='exa -lbGd --git --sort=modified'
alias la='exa -lbhHigUmuSa --time-style=long-iso --git --color-scale'
alias lx='exa -lbhHigUmuSa@ --time-style=long-iso --git --color-scale'

Al ejecutar los alias en Exa, se puede percibir notablemente la diferencia. Nos proporciona una salida más elegante, enriquecida con íconos, con el siguiente comando:

ll

Para más detalles sobre su configuración e instalación, consulta su documentación oficial. https://the.exa.website/#installation

Instalar y Configuar Fig

La línea de comando de próxima generación. La fuente de la verdad para los secretos, scripts y credenciales SSH de su equipo.

Ejecute el siguinte comando para realizar la instalacion:

brew install --cask fig

Para poder usarlo debemos crear una cuanta, puedo hacerlo desde la terminal

fig login

Fig no solo ofrece una funcionalidad de autocompletado al estilo de un IDE, sino que también presenta un tablero interactivo para explorar todas sus características. En este espacio, podrás supervisar la integración con tus editores de texto y terminal de manera efectiva y visual.

Para integrarlo con Hyper, realiza lo siguiente:

Abre el panel de control de Fig.
En la sección de integraciones, activa Hyper.

¡Prepárate para una demostración sorprendente! A continuación, te muestro todo el proceso de integración y configuración que hemos realizado:

Conclusión:

La configuración de tu terminal con Hyper, Fig, Exa, Starship y Oh My Zsh puede llevar tu productividad de desarrollo frontend al siguiente nivel.

Cada una de estas herramientas aporta su propio conjunto de características y beneficios que, cuando se utilizan juntas, crean un entorno de trabajo eficiente y agradable.

Ya sea que estés buscando una interfaz más atractiva, una mayor facilidad de uso, o una forma más efectiva de gestionar tus scripts y credenciales, estos poderosos complementos tienen lo que necesitas.

En resumen, una terminal bien configurada no es solo un lujo, sino una necesidad para cualquier desarrollador frontend moderno.

Zed El Mejor Editor De Texto Del Mundo

Jorge Luis Calleja Alvarado — Fri, 31 Mar 2023 03:54:00 +0000

Hace unas semanas, mientras navegaba por Twitter, me encontré con un tuit de la cuenta oficial de Zed en el que anunciaban la beta pública de su editor de texto. Inmediatamente me dispuse a probarlo y lo utilicé durante un par de semanas para evaluar sus funcionalidades.

Zed, mi nuevo editor favorito, es increíblemente genial. Es de alto rendimiento y no requiere complementos adicionales. Su característica más destacada es la colaboración en tiempo real, lo que lo hace aún más impresionante.

Mi experiencia con Zed: por qué es mi editor de texto preferido.

Siempre he buscado lo que encontré en Sublime Text: un editor disponible en la velocidad de la luz, que se sienta ligero y que me proporcione una gran experiencia de codificación. Con Zed, he encontrado todo eso y más. No he tenido que sacrificar ninguna de las características esenciales, como el resaltado de sintaxis, autocompletado, sugerencias y resaltado de errores. Gracias a Zed, puedo crear software de alta calidad más rápidamente y con una sonrisa.

Navegar por los archivos y carpetas de su proyecto es una experiencia fabulosa en zed, ya que me recuerda a la navegación ligera que proporcionan complementos como los que usan editores como nvim. Además, zed ofrece varios modos, entre ellos un modo vim. Simplemente presiona el atajo CMD + , para abrir la configuración personalizada y activar el modo Vim.



// Zed settings
//
// For information on how to configure Zed, see the Zed
// documentation: https://zed.dev/docs/configuring-zed
//
// To see all of Zed's default settings without changing your
// custom settings, run the `open default settings` command
// from the command palette or from `Zed` application menu.
{
  "vim_mode": true
}

Para sus mapas de teclas podemos configurar base_keymap, que pretenden replicar la sensación de otros editores como Atom, JetBrains, SublimeText, TextMate, VSCode,



// Zed settings

//

// For information on how to configure Zed, see the Zed

// documentation: https://zed.dev/docs/configuring-zed

//

// To see all of Zed's default settings without changing your

// custom settings, run the open</span><span class="w"> </span><span class="err">default</span><span class="w"> </span><span class="err">settings command

// from the command palette or from Zed application menu.

{

  "base_keymap": "VSCode",

}

Explorando las características de Zed

Me centraré en resaltar las características de Zed que, en mi opinión, lo diferencian de otros editores de texto.

Colaboración

Creo unas de las características que hacen que zed sea unos de los mejores editores de texto es la colaboración.

Puede agregar un contacto para que lo tenga disponible como colaborador en los proyectos que usted elija, desplegado desde el ícono en la esquina superior derecha de la ventana, o presionando `cmd-shift-c´ y luego haciendo clic en el botón Agregar a la derecha del cuadro de búsqueda.

Puedes ver qué contactos están disponibles para colaborar y también tienes la opción de rechazar invitaciones.

Code Actions

Cada vez que vea un relámpago junto al numero de linea, significa que hay una acción de código disponible para la ubicación actual del cursor desde el servidor de idioma. Puede hacer clic en el rayo o presionar cmd-. para revelar las acciones disponibles.

Language Servers

Zed hace que la experiencia de editar archivos en diferentes idiomas sea más fácil y sin problemas. Al abrir un archivo en un idioma específico por primera vez, el editor descarga e inicia automáticamente el servidor de idioma correspondiente, si es compatible. Esto significa que no es necesario buscar complementos adicionales para resaltar la sintaxis o tener soporte en el lenguaje del archivo que estás editando.

Si estás interesado en conocer los lenguajes que Zed soporta en cada versión, puedes consultar la lista completa"

https://docs.zed.dev/languages

Breadcrumbs

En la parte superior de los archivos muestra un resumen de los nodos de sintaxis que lo contienen y con la ruta del archivo. Esto puede ser especialmente útil en múltiples archivos o dentro de funciones grandes.

Quien esta detrás de este proyecto

Zed Industries, un equipo pequeño y apasionado con la visión de crear el mejor editor de texto del mundo, para usted y su equipo. Son los creadores de Atom y Tree-sitter.

Conclusión

Después de usar zed durante un tiempo, creo que es el mejor editor de texto para código que he probado. A pesar de que aún se encuentra en su versión beta, se ha convertido en mi editor favorito y no he podido dejar de utilizarlo. Sus características son suficientes para satisfacer mis necesidades diarias de codificación.

Zed aprovecha de manera eficiente todos los núcleos de la CPU y la GPU para iniciarse al instante, cargar archivos en un abrir y cerrar de ojos y responder a sus pulsaciones de teclas en la próxima actualización de la pantalla. El rendimiento implacable lo mantiene en flujo y hace que otras herramientas se sientan lentas.

La codificación productiva comienza con una herramienta que se mantiene fuera de su camino. Zed combina el poder de un IDE con la capacidad de respuesta de un editor liviano para una productividad que puede sentir al alcance de su mano.

referencia: https://wootsbot.dev/blog/zed-el-mejor-editor-de-texto-del-mundo

Mi Experiencia Con Starlink Tras 4 Meses De Uso desde México

Jorge Luis Calleja Alvarado — Tue, 14 Jun 2022 04:27:43 +0000

Starlink ofrece servicio de alta velocidad y baja latencia a través de todo el mundo. Dentro de cada área de cobertura.

En resumen, puedes visitar la pagina y aprender más sobre el tema.
Pero creo que podríamos decir que si vives en un lugar fuera de la ciudad, donde no llega internet de calidad o un internet decente o incluso sin señal de móvil, starlink podría ayudarte, pero por supuesto deberías leer el artículo completo para que entiendas por qué es que vale cada centavo, o si mi recomendación te ayuda a decidir si es para ti.

Como empezo todo

En fechas del 2015 Elon Musk (un genio en mi opinión), en una de sus locuras, anuncia Starlink. Una red de satélites de baja órbita desplegados por todo el mundo para dar acceso a internet prácticamente desde cualquier lugar. Como formaba parte de SpaceX, con las mismas pruebas de sus lanzamientos de cohetes, podían desplegar satélites.

Así empezó todo el sábado, 9 oct 2021, el tiempo avanzaba y la necesidad de mejores conexiones, también, cuando tuve la oportunidad de inscribirme a la beta que lanzó Starlink en México, Honestamente, tenía muchas dudas debido a los costos del equipo y las facturas mensuales. Y con la incertidumbre, si es tan genial como los comentarios de otros países. En ese momento, las cosas que me llevaron a considerar adquirirlo fueron las siguientes.

Internet de alta velocidad
Mejorar mis videollamadas en el trabajo
Sentirse más productivo 😅
Mi velocidad máxima era. Descarga: 8 Megas y 1 Mega Subida 🥶
Soy fan de probar cosas nuevas. 😅

¿Estaba buscando una excusa para probar este Internet?, Realmente no lo creo con mi proveedor de internet anterior si tenía mucho que reclamar, cuando escuchas que podrías tener velocidades de hasta 150 Megas de descarga y 50 de subida envías la orden para probar la beta.

Tuve que esperar casi 4 meses y empezaron a enviar correos de confirmación y pago de los kits, bastante lento para mis deseos de un mejor internet, Starlink exigía un pago de todo el equipo por $11,000 pesos mexicanos (envío incluido) y un montaje completamente autónomo.

Finalmente llegó el momento y mi nuevo kit de internet starlink me estaba saludando. para mí fue un momento muy emotivo ya que tenia muchas ganas de una mejor conexión a internet.

Aunque hay mucho cable y cosas en la caja, todo lo que tienes que hacer es enchufar la corriente, conectar el ruter a la misma fuente de alimentación, poner el receptor sobre su plataforma y él mismo ya buscará los satélites mirando al cielo del norte.
Lo puse en el techo de la casa.

Desde dónde me conecto a mi Starlink

Claro para entender por qué me asombra tanto el tema de recomendar y dar mi punto de vista es mostrarles desde dónde me conecto.

Básicamente soy de un lugar rural llamado San Juan Omeapa un pequeño pueblo en la capital de Guerrero.

Esta es una captura del pueblo del que te hablé.

Verás que es un pueblo muy pequeño, no más de 1000 personas, y no tenemos acceso a la señal del móvil.

Ahora bien, pero ¿qué velocidades ofrece? Lo he llevado a varios lugares alejados de la ciudad y estas son las rápidas respuestas que he tenido.

Las pruebas que realizo realmente me han sorprendido mucho ya que nunca pensé que tendría un internet tan bueno.

He tenido cortes de hasta 15 minutos pero esto es comprensible ya que estaba en proceso de beta, lo más curioso es que deje de preocuparme por mi conexión y hago pruebas solo por curiosidad.

ventajas y desventajas

La verdad no ha habido problemas con la conexión, con el tiempo starlink está lanzando nuevos satélites y he visto como ha mejorado la estabilidad del servicio.

Ventajas

Velocidad definitivamente
Movilidad
Puedes cancelar cuando no necesites internet de starlink y reactivar cuando lo necesites
Puedo transmitir
Juega juegos en línea con mejor calidad
Calidad en mis llamadas de trabajo
Adiós al estrés por el mal servicio de internet
Mejor experiencia en la navegación por la web

Desventajas

Yo pago el precio $2,299.00 pesos mexicanos de manera mensual
A veces la latencia es alta

Conclusión

Quiero ser honesto, definitivamente es un internet con precio alto, pero vale la pena cada centavo si vives en un lugar o decides vivir lo más lejos de la ciudad, si necesitas viajar puedes llevarlo contigo.

Es muy estable no es un internet perfecto pero la mayoría de las veces nunca te das cuenta si estuviste sin internet por unos segundos, Principalmente si está lejos del acceso de calidad a estas conexiones, esto podría cambiar tu forma de vivir ya que puedes tomar mejores decisiones sobre dónde quieres moverte para establecerse, ya sea en la ciudad o en un lugar más tranquilo como lo hago actualmente.

link https://www.wootsbot.dev/blog/mi-experiencia-con-starlink-tras-4-meses-de-uso-en-mexico

¿Qué es XState y por qué usar máquinas de estado?

Jorge Luis Calleja Alvarado — Thu, 09 Jun 2022 03:01:04 +0000

Una de las bibliotecas clave que utilizo actualmente en mis desarrollos es XState. En esta pequeña publicación, Quiero mostrarte por qué, sinceramente, es uno de los descubrimientos más importantes que he hecho recientemente sobre programación y por qué te recomiendo que lo implementes.

¿Qué es XState?

XState es una biblioteca para crear, interpretar y ejecutar máquinas de estado finito y diagramas de estado, así como para administrar las invocaciones de esas máquinas como actores.

Sinceramente tomé esta definición del sitio oficial, pero no se preocupe si no esta familiarizado con los conceptos de máquinas de estado y estados finitos, parecen complejos pero en realidad no lo son.

Si crees que necesitas ampliar tus conocimientos al respecto, en la documentación puedes encontrar los conceptos, pero en resumen, xstate te ayuda a definir de forma declarativa toda tu lógica de negocio de tus aplicaciones, facilitando su interceptación, interacción y respuesta con una gran confianza.

¿Por qué máquinas de estado?

Máquinas de estado: Una máquina de estados finitos es un modelo matemático de computación que describe el comportamiento de un sistema que puede estar en un solo estado en un momento dado. Por ejemplo, supongamos que puede estar representado por una máquina de estado con un número finito (2) de estados: dormido o despierto. En un momento dado, estás dormido o despierto. Es imposible que estés dormido y despierto al mismo tiempo, y es imposible que no estés ni dormido ni despierto.

En realidad, una máquina de estado es un modelo explícito a lo largo del tiempo de su estado, por lo que le ayuda a definir su lógica de negocio de una manera más concisa, también le ayuda a comunicarse mejor con UI/UX y otros compañeros de equipo que no son desarrolladores, lo que hace que su producto sea más robusto y preparado para el futuro. Creo que lo hace atractivo para mí y darle una oportunidad.

Visualizador y un ejemplo

Una gran ventaja de xstate es que tiene un visor fantástico en línea y en editores de texto, lo que le permite ver su gráfico de estado en su totalidad.

así que digamos que tenemos una solicitud para recuperar datos de una API, que representaríamos de la siguiente manera.

Los estados que asignamos a nuestra máquina son:

idle: Es el inicio y es por defecto cuando arrancamos nuestra máquina.
loading: Este estado nos ayudara a saber que la llamada a la api ha iniciado y esta en proceso de ser resuelta.
failure: Nos ayudará a saber si la llamada no tuvo éxito.
loaded: Si la llamada es exitosa, pasaremos a este estado y nuestra máquina terminará, ya que es un estado de tipo final.

Los eventos que tendrá nuestra máquina son:

FETCH: Nos ayudará a pasar del estado de idle al loading
FETCH_CANCEL: Nos llevará de vuelta al estado idle
FETCH_RETRY: Nos ayudará a volver al estado loading cuando estamos en un estado failure, un modo de reintento al llamar a la API.
FETCH_SUCCESS: Pasar del estado de loading al estado loaded, como una forma de terminar la máquina con éxito.
FETCH_ERROR: Pasar del estado de loading al estado failure, esto sucede si hay un error en la llamada a la API.

En la próxima iteración, verá cómo pasó del estado idle, con el evento FETCH al estado loading

En el estado en que se encuentra la máquina loading, entonces nos habilita 3 eventos que son FETCH_CANCEL, FETCH_SUCCESS, FETCH_ERROR

En este ejemplo simularemos que nuestro usuario quiere cancelar la llamada lo cual nos apoyará desde el evento FETCH_CANCEL, lo que el evento nos va a llevar del estado loading al estado idle y habilitará el evento nuevamente FETCH, esto para que pueda realizar el flujo de nuevo.

Para simular una llamada a la api no es exitosa nos ayudará el evento FETCH_ERROR, nos va a llevar del estado loading al estado failure, con ayuda del evento FETCH_ERROR. y nos habilitará el evento FETCH_RETRY para poder hacer un reintento.

Así que ahora estamos en un estado de failure y con el evento FETCH_RETRY vamos a regresar al estado loading para poder hacer un reintento.

Con todos los estados expuestos en este momento, es hora de ver cómo llegamos al estado de loaded, nos apoyamos el evento FETCH_SUCCESS, y esto termina el flujo del estado de la máquina.

Conclusión

Realmente creo que una de las razones por las que las máquinas de estados finitos se han vuelto tan populares es porque tener que escribir explícitamente todo tu estado te ayuda a pensar en un caos más extremo y probablemente a descubrir algunos errores que te perdiste en alguna parte. 🤗

Uso de la funcion gen_random_uuid() nativa de Postgresql en Supabase + Prismajs

Jorge Luis Calleja Alvarado — Tue, 07 Jun 2022 14:27:44 +0000

PostgreSQL incluye una función para generar un UUID, la exponen con el nombre gen_random_uuid() → uuid. Esta función devuelve un UUID de versión 4 (aleatorio). Este es el tipo de UUID más utilizado y es apropiado para la mayoría de las aplicaciones y lo haremos con la ayuda de
Supabase + Prismajs.

Algunas funciones de bases de datos nativas son parte de una extensión. Por ejemplo, gen_random_uuid() es parte del módulo pgcrypto. El módulo pgcrypto proporciona funciones criptográficas para PostgreSQL.

Creando modelo User

En el schema.prisma voy a crear el modelo User con los siguientes atributos, la propiedad @default(uuid()) nos genera un identificador único global basado en la especificación UUID. Este es un ejemplo que puedes encontrar en la documentacion de prisma



model User {
  id          String   @id @default(uuid())
  name        String
  userName    String   @map("user_name")
}

Pero queremos hacer uso de la función gen_random_uuid() de PostgreSQL, Así que los cambios que tenemos que hacer son los siguientes.



  model User {
-    id    String   @id @default(uuid())
+    id    String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid

dbgenerated Representa valores predeterminados que no se pueden expresar en el esquema de Prisma (como random()).

entonces nuestro modelo final sería el siguiente.



model User {
  id          String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  name        String
  userName    String   @map("user_name")
}

Veremos que en el dashboard de supabase al crear un nuevo usuario en la columna id veremos po defecto gen_random_uuid().

Conclusión

En PostgreSQL, existen varias alternativas a los campos de ID, cada una de las cuales tiene un caso de uso adecuado para usar o no, con gen_random_uuid lo que le devolverán son incuestionablemente únicos, lo que garantiza que reciba datos precisos.

También puede usar dbgenerated() para establecer el valor predeterminado para los tipos admitidos. Por ejemplo, puede generar UUID a nivel de base de datos en lugar de depender del uuid() de Prisma.

links:

https://www.wootsbot.dev/blog/uso-de-la-funcion-gen-random-uuid-nativa-de-postgresql-en-supabase-prismajs

Turborepo Mejorando La Experiencia De Desarrollo En Monorepos

Jorge Luis Calleja Alvarado — Fri, 01 Apr 2022 05:58:25 +0000

TurboRepo será una gran tendencia este año 2022, por lo que rápidamente me di a la tarea de escribir y tratar de explicar
qué es, cómo usar TurboRepo y cómo reinventa las técnicas del sistema de compilación para mejorar la experiencia de desarrollo con monorepos.

¿Qué es TurboRepo?

Como la pagina oficial lo define: Turborepo es un sistema de compilación de alto rendimiento para bases de código JavaScript y TypeScript.

Turborepo reinventa las técnicas de sistemas de compilación utilizadas por Facebook y Google para eliminar la carga y los gastos generales de mantenimiento.

Este sistema de compilación podría mejorar las velocidades de compilación aproximadamente entre un 65 % y un 85 % de tus monorepositorios.

En la siguiente imagen muestro la línea de tiempo de ejecución de tareas de un monorepo con turborepo y con 3 paquetes A, B, C tales que A y C dependen de B

Mismo ejemplo con lerna

¿Qué hace TurboRepo?

Sus principios de Turbo Repo es nunca volver a calcular el trabajo que se ha hecho antes.

Para esto genera un gráfico de dependencia a partir de un pipeline de compilación, este se configura en el archivo package.json o turbo.json, ejecuta cada tarea y encuentra y toma huellas almacenadas en caché de los resultados generados por tareas ejecutadas previamente.

¿Qué sucede cuando se inicia una tarea por segunda vez? Si turborepo encuentra una huella digital, la restaura desde la memoria caché y reproduce los registros.

Turborepo gestionando tareas

En este ejemplo tenemos la siguiente estructura de archivos.



basic
├─┬ node_modules
│ │├─┬ @turborepo
│
│ README.md
│ .gitignore
│ .eslintrc.js
│ package.json
│ turbo.json
│ yarn.lock
│
└───packages
│ ├───config
│ │ ├───eslint-preset.js
│ │ └───package.json
│ │
│ ├───tsconfig
│ │ ├───package.json
│ │ └───base.json
│ │ └───nextjs.js
│ │ └───react-library.json
│ │
│ ├───ui
│ │ └───package.json
│ │ ├───Button.tsx
│ │ └───index.tsx
│ │ └───tsconfig.json

Destacaremos turbo.json con la siguientes tareas build, lint, dev, clean. Estas tareas se pueden actualizar con las requeridas por su proyecto y deben ser consistentes con los scripts package.json

En el archivo turbo.json es donde se definen las relaciones topológicas entre las tareas de compilación



// turbo.json

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    },
    "clean": {
      "cache": false
    }
  }
}

En el archivo package.json estan los scripts que turborepo gestionara



// package.json

{
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "clean": "turbo run clean",
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
  },
  "devDependencies": {
    "prettier": "^2.5.1",
    "turbo": "latest"
  }
}

Ejecutaremos la tarea build, por ser la primera vez turborepo escribió su primer cache.



$ yarn build

Si ejecutamos la tarea build por segunda vez, turborepo no volverá a ejecutar el trabajo que ya se ha hecho, sino
que lo tomará de la memoria caché.



$ yarn build

Conclusión

He visto muchos proyectos open source de muchas empresas que desarrollan software, parecen estar migrando hacia monorepos para almacenar su código, algo ha considerar es que las herramientas que se utilizan para esta administración de compilación, especialmente para JavaScript/TypeScript, parecen ser demasiado lentas, es por eso que turborepo es algo que debería considerar agregar a su flujo de desarrollo.

Turborepo está diseñado para adaptarse de forma incremental, por lo que puede agregarlo a sus proyectos de forma gradual y parcial en unos minutos.

Ejemplos

links: https://www.wootsbot.dev/blog/turborepo-mejorando-la-experiencia-de-desarrollo-en-monorepos

Identificar posibles mejoras de CSS en su sitio web

Jorge Luis Calleja Alvarado — Thu, 10 Mar 2022 00:45:00 +0000

Esta característica nos ofrece información detallada sobre colores, fuentes, media queries y declaraciones no utilizadas (Unused declarations).
Esta función es útil cuando realiza modificaciones CSS en la interfaz de usuario y ya no necesita utilizar herramientas de terceros como el selector de color.

Se trata de una función en faces de pruebas de Chrome 96. El equipo de Google Chrome está trabajando activamente en esta función.

Activar CSS Overview

CSS Overview panel

Abra cualquier página web
Abra DevTools
Haga clic en Más opciones> Más herramientas> CSS Overview.

Ejecutar CSS Overview report

Haga clic en el botón Capturar descripción general (Capture overview) para generar un informe de descripción general CSS de su página.

Overview summary

Un resumen de alto nivel del CSS de su página.

Colores

Todos los colores de tu página. Los colores están agrupados por usos como colores de fondo, colores de texto, etc. También le muestra los textos que tienen problemas de bajo contraste.

Se puede hacer clic en cada uno de los colores. Por ejemplo, digamos que este color de borde #52A9FF no coincide con el esquema de color de su sitio, haga clic en él para obtener una lista de los elementos que usan el color.

Conclusión

Utilice el panel Descripción general de CSS (CSS Overview) para comprender mejor el CSS de su página, con esto puede identificar posibles mejoras ya aplicarlas en sus paginas.

links:

https://www.wootsbot.dev/blog/identificar-posibles-mejoras-de-CSS-en-su-sitio-web

Embellecer importaciones absolutas con alias en nextjs

Jorge Luis Calleja Alvarado — Tue, 08 Mar 2022 23:53:58 +0000

Estas trabajando en un proyecto grande o pequeño y algunas de sus declaraciones de importación se ven algo asi import Component from '../../../Component'.

Desde Next.js v9.4.x y posteriores, hace que la configuración de importaciones absolutas sea muy simple para proyectos de JavaScript y TypeScript.
Todo lo que necesita hacer es agregar la configuración baseUrl a jsconfig.json (proyectos JS) o tsconfig.json (proyectos TS).

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Esto permitirá importaciones absolutas desde "." (el directorio raíz).

Los editores como VSCode admiten automáticamente la configuración en jsconfig.json, por lo que Command + Click para saltar al origen de un archivo funcionará como de costumbre.
Atom e IntelliJ también tienen soporte para reescrituras.

Embellecer con Alias

Además, Next.js v9.4.x también admite la opción de rutas, que le permite crear alias de módulos personalizados.
Por ejemplo:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

Luego puede usar su alias así:

// importacion absoluta 'components/button'
import Button from '@/components/Button';

Conclusión

Entonces las importaciones absolutas en Next.js son muy fáciles de configurar, pueden ser muy útiles para proyectos grandes.
Pero por que no simplemente tener una mejor DX (Experiencia de Desarrollador).

links:

https://www.wootsbot.dev/blog/embellecer-importaciones-absolutas-con-alias-en-nextjs