👨🏼‍💻

khriztianmoreno's Blog

Inicio Etiquetas Acerca |

Posts with tag tutorial

Node.js Corepack: Control de versiones para gestores de paquetes

2024-12-10
javascriptnodejstutorial

El problema con los gestores de paquetes tradicionalesDurante años, npm ha sido el gestor de paquetes de facto para Node.js. Aunque ofrece características robustas como acceso privado a paquetes y autenticación de dos factores, también tiene algunos inconvenientes:Velocidades de instalación lentas: npm puede ser notoriamente lento, especialmente para proyectos grandes.Directorios node_modules abultados: Estos directorios pueden consumir mucho espacio en disco.Configuración compleja: la configuración de npm puede ser intrincada y difícil de dominar.Para solucionar estos problemas, han surgido gestores de paquetes alternativos como Yarn y pnpm. Yarn es conocido por su velocidad, mientras que pnpm optimiza el espacio en disco compartiendo dependencias.¿Qué es Corepack?Corepack es una nueva característica experimental en Node.js que te permite gestionar las versiones de los gestores de paquetes en tus máquinas y entornos. Esto significa que todos los miembros del equipo utilizarán la misma versión del gestor de paquetes, lo que puede ayudar a evitar problemas de compatibilidad.{ "name": "my-project", "scripts": { "start": "node index.js" }, "packageManager": "pnpm@8.5.1" // what is this? (Corepack) }Primeros pasos con CorepackPara activar Corepack, puede ejecutar el siguiente comando:corepack enableUna vez habilitado Corepack, para configurar el gestor de paquetes de tu proyecto, ejecuta corepack use. Este comando actualiza tu package.json automáticamente.corepack use pnpm@8.x # sets the latest 8.x pnpm version in the package.json corepack use yarn@* # sets the latest Yarn version in the package.json¿Por qué usar Corepack?Corepack puede ayudarte a evitar problemas de compatibilidad asegurando que todos los miembros del equipo utilizen la misma versión del gestor de paquetes. También puede ayudarnos a gestionar las versiones del gestor de paquetes en diferentes entornos, como desarrollo, producción y pruebas.El futuro de CorepackCorepack representa un importante paso adelante en la gestión de paquetes Node.js. Al proporcionar una interfaz unificada para diferentes gestores de paquetes, simplifica el flujo de trabajo de desarrollo y reduce la complejidad asociada a la gestión de dependencias. A medida que Corepack madura, tiene el potencial de convertirse en la forma estándar de gestionar paquetes Node.js.ReferenciasCorepack DocumentationCorepack : Managing the Package ManagersHow To Use Corepack¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

Desbloquea tu creatividad con Google Gemini y JavaScript - Guía práctica

2024-06-12
javascriptaitutorial

Hola! Hoy les traigo una nueva herramienta que potenciará tu creatividad a otro nivel: Google Gemini. Esta API de inteligencia artificial te permite generar texto de alta calidad en español, desde simples frases hasta historias completas, con solo unas pocas líneas de código.¿Qué es Google Gemini?Google Gemini es un modelo de lenguaje de última generación desarrollado por Google AI. Se ha entrenado con un conjunto de datos masivo de texto y código, lo que le permite comprender y generar lenguaje natural con una precisión impresionante.¿Qué podemos hacer con Google Gemini y JavaScript?Las posibilidades son infinitas. Aquí te presento algunos ejemplos:Generar contenido creativo: Escribe poemas, historias, guiones, artículos de blog, o cualquier tipo de contenido textual que puedas imaginar.Traducir idiomas: Traduce textos de un idioma a otro de forma rápida y precisa. Responder preguntas: Obtén respuestas a tus preguntas de forma informativa y completa.Crear chatbots: Desarrolla chatbots conversacionales que interactúen con los usuarios de forma natural.Automatizar tareas: Automatiza la generación de informes, correos electrónicos, y otras tareas que requieren procesamiento de lenguaje natural.¿Cómo empezar?Para empezar a usar Google Gemini con JavaScript, solo necesitas:Una cuenta de Google Cloud Platform: https://cloud.google.com/Habilitar la API de Google Gemini: https://ai.google.dev/Ejemplo práctico:En este ejemplo, vamos a generar un poema usando Google Gemini y JavaScript.const { GoogleGenerativeAI } = require("@google/generative-ai"); // Access your API key as an environment variable (see "Set up your API key" above) const genAI = new GoogleGenerativeAI(process.env.API_KEY); async function run() { // For embeddings, use the embedding-001 model const model = genAI.getGenerativeModel({ model: "embedding-001" }); const text = "Escribe un poema sobre la naturaleza"; const result = await model.embedContent(text); const embedding = result.embedding; console.log(embedding.values); } run();Para la generación de texto usamos el método getGenerativeModel del objeto genAI.Ejemplo de poema generado:La tierra verde, el cielo azul, el sol brilla con luz de cristal. Las flores florecen en el jardín, los pájaros cantan con dulce trino. El viento susurra entre las hojas, las abejas zumban entre las flores. La naturaleza es un regalo divino, un lugar de paz y armonía.Conclusión:Google Gemini y JavaScript son una combinación poderosa que te permite desbloquear tu creatividad y desarrollar aplicaciones increíbles. Con esta guía práctica, ya estás listo para empezar a explorar las posibilidades infinitas de esta tecnología.Recursos adicionales:Documentación de Google Gemini: https://ai.google.dev/docsTutoriales de Google Gemini: https://m.youtube.com/watch?v=TXvbT8ORI50Ejemplos de código de Google Gemini: https://m.youtube.com/watch?v=jTdouaDuUOA¡Anímate a experimentar con Google Gemini y JavaScript! Comparte tus creaciones en los comentarios y déjame saber qué te parece esta herramienta.¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

Enchulame la terminal - Mac

2020-05-03
tutorialbashterminal

Como usuario de Mac OS, disfruto trabajar con la terminal y me parece una herramienta especialmente poderosa. Por lo tanto, pasé bastante tiempo personalizándolo y aquí está mi guía definitiva para la personalización de terminales.Alt TextPrimero pensé que solo crearía una publicación corta con algunos de los ajustes que me gustan. Pero tenía tantas cosas que quería mostrar que esto comenzó a convertirse en una publicación considerablemente larga. Así que he decidido publicarlo ahora, con tantos consejos como pueda escribir, y lo actualizaré con nuevos consejos y trucos.Mi terminalInstalaciones recomendadasiTerm2Nerd fonts - Hack Boldzshzsh extensions:autosuggestionssyntax-highlightingPowerlevel10klsd: The next gen ls commandccat: Colorizing catlolcatNeofetch: A command-line system information tool written in bash 3.2+Comencemos entonces a configurar todas las herramientas que vamos a necesitar.PrerrequsitosEn primer lugar, debe instalar iTerm2.Luego instalar brew.Ahora instale oh-my-zsh, abra iTerm2 y pegue el siguiente comando:sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"Luego de tener este par de cosas instaladas entremos mas en materia.Fuentes parcheadasQuiero comenzar a hablar sobre las fuentes parcheadas, ya que muchas de las personalizaciones que explicaré más adelante pueden depender de ellas. Las fuentes parcheadas consisten en fuentes regulares a las que se han agregado algunos símbolos adicionales. De esa manera, puede mostrar iconos especiales (como el icono de su sistema operativo) o agregar nuevas formas a tu prompt.El proyecto más exitoso es nerd-fonts, que incluye muchas de las fuentes más utilizadas y favorita de este proyecto es Hack BoldNerd fontsNerd Fonts es un proyecto que parchea fuentes dirigidas por desarrolladores con una gran cantidad de glifos (iconos). Específicamente para agregar una gran cantidad de glifos adicionales de 'fuentes icónicas' populares como Font Awesome, Devicons, Octicons y otras.Nerd fontsEntonces para instalar estas fuentes en tu Mac OS puedes usar brew:brew tap homebrew/cask-fonts brew cask install font-hack-nerd-fontHe visto que algunas veces no instala las fuentes con cask, aqui hay otra opcion:brew install --cask font-hack-nerd-fontAhora, si busca en la carpeta en la que acaba de instalarlo, verá que aparece allí. ls ~/Library/FontsConfigura tu terminalUna vez que haya descargado Nerd Fonts, puede configurar su terminal para usarlo. Configure iTerm2 para usar la fuente yendo a:iTerm2 -> Preferences -> Profiles -> Text -> Font -> Change FontSeleccione la fuente Hack Regular Nerd Font y ajuste el tamaño si lo desea. También marque la casilla Usar una fuente diferente para texto que no sea ASCII y seleccione la fuente nuevamente. Debería mostrar la nueva fuente e iconos en la solicitud.iTerm2 Text nerd fontsNo te preocupes si no vez un cambio significativo en tu terminal, esto nos va a dar la partida para los siguientes pasos.Colorear el terminalEn el camino hacia la terminal definitiva, no hay nada que mejore su aspecto más que personalizar su esquema de color, por lo que este será nuestro punto de partida. Al buscar en Internet, podrá encontrar muchos temas, pero la forma más fácil de aplicarlos es usar GoghEsta herramienta no requiere instalación y le permite elegir sus colores favoritos de una larga lista de diferentes esquemas preconstruidos.Simplemente copie y pegue el comando: bash -c "$(curl -sLo- https://git.io/vQgMr)"Luego de seleccionar algun tema, este se instalara y estará disponible para seleccionarlo en tu terminal.iTerm2 -> Preferences -> Profiles -> Colors -> Color PresetsLSD, LOLcat y ccatAlgunas de las siguientes herramientas para lograr que se vean mejor necesita que tu iterm2 tenga un contraste minimo.lsd está muy inspirado en el proyecto de súper colores pero con algunas pequeñas diferencias. Por ejemplo, está escrito en RUST y no en ruby, lo que lo hace mucho más rápido.LSDEs necesario instalar las fuentes parcheadas de powerline nerd-font y/o font-awesome.Para instalar LSD solo debes usar brew y ejecutar esta linea en tu terminal:brew install lsdlolcat 🤣️ ¡Obtiene arcoiris y unicornios en todas partes! Esta herramienta aparece comúnmente utilizada junto con Neofetch, agregando un efecto de arco iris impresionante a tu prompt.LOLcatPara instalar LOLcat solo debes usar brew y ejecutar esta linea en tu terminal:brew install lolcatPara verificar que te instalo y funciona correctamente puedes correr en la terminalls | lolcatccat Es el cat colorante. Funciona de manera similar a cat pero muestra contenido con resaltado de sintaxis.asciicastPara instalar ccat solo debes usar brew y ejecutar esta linea en tu terminal:brew install ccatPersonalizar el bash promptEn caso de que haya instalado una fuente parcheada como se describió anteriormente, ahora podrá usar cualquier tipo de símbolos para construir su prompt. Estas fuentes incluyen muchos símbolos powerline que le permitiran personalizar completamente su terminal sin tener que instalar ningún complemento externo.Powerlevel10kEs una rápida reimplementación de POWERLEVEL9K con incluso algunas características adicionales. Incluso mantiene los mismos nombres de variables, por lo que no necesitará cambiar su configuración si viene de POWERLEVEL9k.Una cosa que me encanta de POWERLEVEL10K es que, si aún no tiene configuración, cuando la inicie por primera vez, le mostrará una guía que le preguntará sus preferencias. Durante este proceso, muestra varios ejemplos, por lo que es mucho más fácil de personalizar.Powerlevel10kPara instalarlo en Mac tenemos dos caminos, el primero puede ser usando brew o el segundo que sera el que usaremos es con Oh My Zsh, pega la siguente linea en tu terminal.git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10kAhora deberas indicarle a zsh cual sera el tema a usar, para eso edita el archivo ~/.zshrc, puedes usar cualquier editor de tu preferencia y buscar la propiedad del tema y cambiarlo por ZSH_THEME="powerlevel10k/powerlevel10kDebemos recargar este archivo para ver los cambios en nuestra terminal.source ~/.zshrcAsistente de configuraciónEscribe p10k configure para acceder al asistente de configuración incorporado directamente desde tu terminal.Powerlevel10k wizardAl final del wizard tendras una terminal mas personalizada y te sentiras muy feliz :)Vamos ahora a continuar agregando mas detalles de alto glamour a nuestra terminal.Algunas aliasAlgunos de los comandos que ya ha instalado, de hecho, admiten resaltado de color, por ejemplo: ls, grep y diff. En caso de que desee que estos comandos tengan siempre la opción de color habilitada, puede escribir alias en su archivo de configuración de terminal (.bashrc /.zshrc) para forzarlos.alias l='ls -l' alias la='ls -a' alias lla='ls -la' alias lt='ls --tree' alias cat=ccatPersonalizaciones de ZshZsh es un shell mucho más configurable con toneladas de complementos y temas que harán que su terminal se vea increíble e incluso mejorará su flujo de trabajo. Para este shell, las posibilidades de personalización son casi ilimitadas, por lo que ahora simplemente explicaré la configuración que uso.Una diferencia clave de Zsh es que no viene con configuraciones preconfiguradas como otras conchas como bash o fish, por lo que sugeriría copiar algunas de mis configuraciones como punto de partida, particularmente si lo está instalando por primera vez.Configurar combinaciones de teclas - keybindingsUna de las primeras cosas que noté rápidamente al usar Zsh es que muchas de las teclas y atajos a los que estaba acostumbrado, viniendo de bash, no funcionarían en absoluto o provocarían comportamientos inesperados. Incluso las teclas HOME y END no funcionaron. Así que aquí tienes toda la configuración de combinación de teclas que uso: bindkey '^[[2~' overwrite-mode bindkey '^[[3~' delete-char bindkey '^[[H' beginning-of-line bindkey '^[[1~' beginning-of-line bindkey '^[[F' end-of-line bindkey '^[[4~' end-of-line bindkey '^[[1;5C' forward-word bindkey '^[[1;5D' backward-word bindkey '^[[3;5~' kill-word bindkey '^[[5~' beginning-of-buffer-or-history bindkey '^[[6~' end-of-buffer-or-historyComplementos útilesAutosuggestions Sugiere comandos a medida que escribe según el historial y las finalizaciones.Syntax highlighting Este paquete proporciona resaltado de sintaxis para el shell Zsh. Permite resaltar comandos mientras se escriben en un indicador de Zsh en un terminal interactivo. Esto ayuda a revisar los comandos antes de ejecutarlos, particularmente para detectar errores de sintaxis.Con esto hemos terminado de enchular nuestra terminal. ¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoren

Introducción a Apollo Client con React para GraphQL

2020-01-30
javascriptreactgraphqltutorial

GraphQL se ha vuelto popular recientemente y es probable que reemplace la API Rest. En este tutorial, utilizaremos el Cliente Apollo para comunicarnos con la API GraphQL de GitHub. Integraremos Apollo Client con ReactJS, pero también puede usarlo con otras plataformas (VueJS, Angular, etc).

Flux Standard Action (FSA)

2020-01-20
reactjavascriptreduxtutorial

Es una especificación ligera que define la estructura de una acción, para ser implementada en librerías que usan el patrón o arquitectura Flux.El cumplimiento de FSA ayuda a los desarrolladores a crear abstracciones que pueden funcionar con diferentes implementaciones de Flux.Flux Standard Action — ExampleFlux Standard Action — ExampleTodo inicia después de que Facebook publicó su arquitectura/patrón Flux, muchas librerías implementaron la filosofía Flux, Redux fue una de ellas.Flux se puede dividir en varios conceptos Dispatcher, Store, Action y View. Pero en este post vamos a conocer la parte de Action y como trabajar con estas de una forma mas estandarizada, para mas adelante poder hacer uso de otras librerías que implementan la filosofía FSA.Antes de adentrarnos mas en el tema principal de hoy, conozcamos el concepto de Action y como es definido por flux:Actions define the internal API of your application. They capture the ways to interact with your application. They are simple objects that consist of a “type” field and data.La especificación conduciría al siguiente objeto:{ type: 'ADD_TODO', text: 'TODO content' }El único problema con este ejemplo simple es que el desarrollador puede elegir cualquier nombre de propiedad para los valores. Todos los siguientes nombres son válidos: título, nombre, texto, todoNombre, etc. Es imposible saber qué propiedades esperar del ADD_TODO en el reductor de Redux.Sería mucho más fácil trabajar con acciones de Flux, si pudiéramos hacer ciertas suposiciones sobre su forma. Tal vez la definición de un estándar común mínimo para estos patrones permitiría tener la abstracción necesaria para comunicar nuestras acciones con el reducer. Esto es algo que Flux Standard Action (FSA) viene a resolver.Para entrar un poco en detalle sobre FSA, en necesario partir de la siguiente premisa que Flux Standard Action nos proporciona sobre las acciones:Una acción DEBE:ser un objeto JavaScript simple.tener una propiedad type.Una acción PUEDEtener una propiedad error.tener una propiedad payload.tener una propiedad meta.Una acción NO DEBE incluir propiedades que no sean type, payload, error, y meta.¿pero entonces que significa cada una de estas propiedades que nuestro objeto javascript puede llegar a contener?Veamos entonces cada uno de estostypeLa propiedad requerida type identifica la naturaleza de la acción que ha ocurrido al consumidor, type es una constante de tipo StringpayloadLa propiedad opcional payload PUEDE ser cualquier tipo de valor. Representa la carga de la acción. Cualquier información sobre la acción que no sea el type o el estado de la acción debe ser parte del campo payload.Por convención, el payload DEBERÍA ser un objeto.errorLa propiedad opcional error PUEDE establecerse en verdadero si la acción representa un error.An action whose error is true is analogous to a rejected Promise. By convention, the payload SHOULD be an error object.Si el error tiene cualquier otro valor además de true, incluyendo undefined y null, la acción NO DEBE ser interpretada como un error.metaLa propiedad opcional meta PUEDE ser cualquier tipo de valor. Está destinado a cualquier información adicional que no forme parte de payload .El concepto Flux Standard Action (FSA) es usado por algunas librerías que nos puede ayudar a reducir el texto repetitivo que debemos crear para nuestras accionesLibreríasredux-actions — un conjunto de helpers para crear y manejar acciones de FSA en Redux..redux-promise — Es un middleware que admite acciones de FSA.redux-rx — Utilidades RxJS para Redux, incluido un middleware que admite acciones de FSA.Espero en una próxima ocasión tener la posibilidad de dar una introducción de como reducir el Boilerplate de Redux con Redux-Actions.¡Espero que esto haya sido útil y/o te haya hecho aprender algo nuevo!Profile@khriztianmoreno �

NodeSchool: Aprende por tu cuenta

2020-01-02
javascriptnodejstutorial

A la hora de querer aprender una nueva tecnología o conocer las características de algún lenguaje siempre buscamos en internet algún tutorial que nos enseñe sus conceptos, es por eso que hoy les quiero hablar sobre NodeSchool.io una iniciativa que busca enseñar por medio de talleres autoguiados el aprendizaje de estos temas.