Frontend

Trabajar con formularios es una parte importante de mi trabajo diario. Creé golemui-kendo para combinar los formularios basados en esquemas de GolemUI con los componentes empresariales de Kendo UI en un solo comando ng add.

Los recientes ataques a la cadena de suministro son una llamada de atención. Aquí te cuento por qué me cambio a pnpm en todos mis proyectos y cómo puedes migrar tu flujo de trabajo de forma segura.

Vercel oculta la complejidad de las variables de entorno. Cuando pasas a Docker, estos desafíos ocultos salen a la luz. Aprende la arquitectura para escalar tu aplicación correctamente.

Una explicación sencilla de los acrónimos (SIEM, IDP, PII, SPII) y conceptos de ciberseguridad que todo desarrollador debe conocer.

Migré mi blog de Hashnode a un sitio personalizado con Next.js en Vercel. Aquí te cuento por qué lo hice, cómo moví todo mi contenido y por qué Vercel es el mejor lugar para mis artículos.

Aprende a compartir esquemas de Zod entre cliente y servidor en Next.js para asegurar la integridad de los datos sin repetir código. Foto por Clément Hélardot en Unsplash

Next.js ofrece una base sólida de rendimiento por defecto. Pero rápido por defecto no significa rápido siempre. Durante los últimos días estuve trabajando con Next.js y React Server Components, asumiendo que el framework resolvería la mayoría de los problemas de rendimiento por mí. Y...

Hoy estuve leyendo sobre Redux-Saga y el uso de funciones generadoras (function*). Te muestro cómo funcionan los generadores en JavaScript, por qué son útiles y cuándo usarlos con un ejemplo práctico.

Aprende a detectar regresiones visuales y de estructura del DOM en Angular usando pruebas de snapshot con Jest, cuándo usar snapshots frente a aserciones tradicionales y buenas prácticas para evitar pruebas frágiles.

No importa si usas Angular 14, 15 o 19: tus aplicaciones siguen bajo el paraguas de Zone.js. Aunque sientas que funcionan bien, por debajo Angular necesita recorrer todo el árbol del DOM con Zone.js, lo que afecta el rendimiento.

Durante el verano repasé mis habilidades con NgRx creando una pequeña aplicación para gestionar mis lugares favoritos. En este artículo te muestro cómo simplificar las operaciones CRUD y reducir el código repetitivo usando NgRx Entities.

La carrera de la IA continúa. Alternativas como Ollama nos ayudan a interactuar con modelos de IA en nuestras máquinas, pero los equipos de Chrome y Google van un paso más allá permitiendo que Gemini Nano corra directamente en el navegador.

En entrevistas recientes con desarrolladores, noté que muchos candidatos se sentían abrumados por los retos de código. Para posiciones junior, es común que pregunten sobre tareas básicas de JavaScript. Hoy comparto técnicas esenciales de manipulación de datos que recomiendo practicar.

Los efectos secundarios son habituales en nuestras aplicaciones. Aprende a manejarlos en Angular con NgRx Effects para evitar sobrecargar tus componentes y mantener tu estado limpio y predecible.

Cuando trabajamos con peticiones a una API externa en Angular, a veces necesitamos enviar headers. Repetir ese código en cada petición no es una buena idea. Aprende a usar interceptores funcionales para resolverlo.

En NgRx, cuando queremos obtener datos del store, la forma más rápida suele ser usar store.select, pero tiene riesgos de tipado. Aprende a usar Selectors para consultar el estado con tipado seguro y mejor rendimiento.

Cuando creas acciones en NgRx, normalmente usas la función auxiliar createAction. Escribimos los nombres de las acciones con un string directo sobre el origen y el evento, como [Cart] Update Price. Esta acción se vincula claramente con la funcionalidad Cart en nuestra aplicación...

Aprende a depurar el estado de NgRx en Angular moderno con Redux DevTools: configura provideStoreDevtools, rastrea acciones, inspecciona cambios y usa time-travel debugging.

En un artículo anterior escribí sobre cómo manejar el estado en Angular usando servicios, pero cuando la aplicación crece y necesita gestionar un estado grande, se vuelve complejo de mantener. Te cuento cuándo y por qué conviene usar NgRx.

Como desarrolladores creamos diferentes tipos de aplicaciones. A veces trabajamos con procesamiento de datos o gráficos, pero otras veces creamos aplicaciones centradas en imágenes. Aprende cómo optimizar su rendimiento en Angular usando la directiva ngOptimizedImage.

Cuando necesito crear aplicaciones en tiempo real con Angular, casi siempre uso SignalR, pero hace unos días un amigo me mencionó SSE. No lo conocía, así que investigué y me sorprendió lo fácil y potente que es.

Estaba escribiendo un artículo para Kendo sobre testing en Angular, pero con la deprecación de Karma me surgieron dudas sobre el futuro de las pruebas en Angular. Te cuento mi experiencia probando Web Test Runner como alternativa.

El rendimiento es uno de los temas más importantes al crear aplicaciones. Aprende cómo usar el bloque @defer en Angular 17 para aplicar lazy loading y reducir el tamaño de tu bundle.

Cuando trabajamos con librerías, buscamos compartir el código con nuestro equipo. Aprende cómo configurar Verdaccio como un registro privado de npm para publicar tus librerías de Angular sin complicaciones.

Cuando creamos una aplicación en Angular, funciona como una SPA: una sola página con múltiples vistas en el cliente. Aprende a navegar entre ellas sin recargar el navegador usando el Router de Angular, RouterLink y Kendo UI.

Un amigo me dijo una vez que conectar un chat con IA era difícil, pero no es así. Hoy quiero mostrarte lo fácil que resulta construir tu propio chat con Gemini, Kendo UI y Angular 17 usando solo unas pocas líneas de código.

Al crear un sitio web, el contenido es más que simple texto. Como aprendí en mi artículo anterior, la accesibilidad va más allá de atributos aria-label o alt en imágenes, incluyendo cómo manejar SVGs, gráficos y contraste de color.

Aprende a revisar y actualizar dependencias obsoletas de forma segura en proyectos con npm, pnpm, yarn y bun usando npm-check-updates (ncu), modo interactivo y soporte para workspaces en monorepos.

Al crear una aplicación web, la accesibilidad suele ignorarse o muchos piensan que basta con usar aria-label. Una guía práctica para comenzar con accesibilidad web siguiendo pautas claras y HTML semántico.

En mi artículo anterior sobre cómo construir una tienda de ejemplo, exploré las animaciones en Angular 17. Al mismo tiempo, desarrollé la página de detalle del producto, la cual necesita extraer el ID del producto desde la URL usando el router.

Constantemente busco formas de mejorar la interacción de los usuarios en los sitios web. Hace poco, mientras creaba la demo de una tienda, quise mejorar la experiencia al navegar entre páginas de productos. Esto me llevó a probar una característica fantástica de Angular 17: View Transitions.

Al terminar 2023, reflexiono sobre las valiosas lecciones y conocimientos que he adquirido escribiendo. Además de este blog, creo contenido para Telerik Kendo. Hoy me alegra compartir mis mejores artículos sobre Kendo UI de este año.

Al escribir pruebas en Angular, Jasmine y Karma vienen configurados por defecto como librería y test runner, pero el equipo de Angular ha estado trabajando para traer Jest. Hoy vamos a experimentar con el soporte experimental de Jest Builder en Angular.

Uso Angular Testing Library para probar mis componentes y funciona de maravilla (me encanta). Sin embargo, me encontré con una situación particular al usar un Web Component dentro de mi componente, lo que provoca el error "Class constructor HTMLElement cannot be invoked without 'new'".

Angular 17 ha sido anunciado y llegará en los próximos días con grandes novedades como control flow, vistas diferidas, hidratación, SSR, signals y mucho más. Uno de los lanzamientos más destacados es Angular.dev.

A veces queremos aprender algo solo por diversión o para crear nuevos proyectos personales. Escuché hablar de Svelte en 2016, pero no lo probé hasta hace unos meses con Bezael para crear un pequeño microfrontend. Sin embargo, ayer empecé a construir un pequeño proyecto personal...

Ayer estuve conversando con mi amigo Jörgen de Groot sobre Signals. Cuando la conversación pasó a los effects, se encontró con el error ERROR NG0203. Poco después, otro amigo me contactó con el mismo problema. Decidí escribir un breve artículo para explicar por qué ocurre...

Desde Angular 16 he escuchado mucho sobre Signals. El equipo de Angular hizo un gran trabajo escuchando a la comunidad y mejorando la API de Signals con la interoperabilidad con RxJS. Ayer estuve hablando con mi amigo Juan Berzosa y aún no había probado Signals, así que...

Hace unos días, un amigo me preguntó cómo evitar claves duplicadas en un array. Le expliqué que existen otras colecciones para trabajar y que cada una se adapta a una situación específica. Como me encanta la NBA, busqué una forma sencilla de explicar cada estructura de datos.

Como desarrolladores, pasamos gran parte de nuestro tiempo solucionando errores. La depuración nos ayuda a encontrar y eliminar fallos en el código, pero a veces encontrar un problema toma más tiempo que resolverlo. Aprende a depurar tus aplicaciones de Angular usando ng.global, Angular DevTools y VS Code.

TypeScript ofrece características muy prácticas que hacen que el código sea más conciso y eficiente. El encadenamiento opcional y la coalescencia nula juegan un papel clave para manipular datos de forma segura en tus proyectos.

Aprende las diferencias exactas entre ng-template, ng-container y ng-content en Angular, cómo pasar contexto con ngTemplateOutlet, proyección con múltiples slots y cómo evolucionan con el control flow moderno de @if, @for y @defer.

Durante los últimos años, los proyectos web han asumido cada vez más responsabilidades, lo que significa más JavaScript. Los frameworks SPA como React, Vue o Angular ofrecen una gran experiencia de desarrollo, pero presentan desafíos de rendimiento que Astro nos ayuda a resolver.

ESBuild es un compilador rápido de JavaScript utilizado por ViteJS. Puedes probarlo en Angular cambiando una sola línea en el archivo angular.json. Nota: está en modo experimental 😜 Cambia el builder de "@angular-devkit/build-angular:browser" a "@angula...

Hoy estuve conversando con mi amigo Leifer sobre los Functional Guards en Angular (14/15) y me hizo varias preguntas: cómo funcionan, si los guards de clase siguen vigentes en Standalone Components y cómo migrarlos usando inject().

Hoy estuve probando Dynamic Forms con mi amigo @alt148 y descubrimos que cambiar un control puede disparar la validación varias veces en el proceso. Por ejemplo, al tener un formulario con un campo, en cada pulsación de tecla el formulario...

Aprende a construir formularios dinámicos tipados y basados en datos en Angular moderno usando Formularios Reactivos, Control Flow (@switch, @for) y validaciones.

Estaba ayudando a un amigo a ordenar una tabla de datos en TypeScript y nos encontramos con un comportamiento inesperado. En este artículo revisamos qué ocurre en JavaScript al usar el método sort con strings y números.

He trabajado en varias empresas creando librerías de UI o frameworks internos para usarlos en múltiples productos, con el sueño de tener una gran interfaz, consistencia y el mismo comportamiento para los usuarios. La idea de una librería de UI ayuda a los desarrolladores a evitar la duplicación...

En Angular, cuando creamos componentes con propiedades públicas o estado para compartir con otros, existen varias opciones: emitir eventos, inyectar un servicio con Subject o usar la propiedad exportAs en el template.

Cuando necesitamos soportar diferentes versiones y casos de uso manteniendo la flexibilidad ante cambios, las cosas pueden volverse complejas. Te muestro cómo crear componentes flexibles y compound components en Angular.

Al crear aplicaciones en Angular, dividir el código en módulos ayuda a mantenerlo organizado, pero a veces necesitamos aislar proyectos completos. Aprende a usar Angular Workspace para gestionar múltiples aplicaciones y librerías en un solo repositorio.

Cuando usamos tipos o interfaces en TypeScript, el compilador exige que el objeto coincida con ellos para evitar errores en tiempo de ejecución por propiedades faltantes. A veces queremos la flexibilidad de crear un objeto sin romper el contrato con la interfaz.

Cuando creamos una aplicación, datos como el menú y las opciones no cambian con frecuencia. Guardarlos en caché evita pedir los datos al servidor una y otra vez, mejorando la velocidad y la experiencia de usuario.

Angular nos ayuda a convertir valores para mostrarlos usando Pipes. Usar métodos en el template para formatear datos afecta el rendimiento; aprende cómo usar pipes y crear pipes personalizados.

Cuando probamos nuestro código, muchas funciones tienen dependencias internas que no queremos invocar directamente. Aprende cómo mockear dependencias con Jest paso a paso.

Angular viene por defecto con Jasmine y es un buen framework de pruebas. Pasé año y medio escribiendo y ejecutando pruebas con Jasmine, y funciona bien, pero el mercado se está moviendo hacia Jest y Testing Library. No te preocupes, Jest es más directo y compatible con tus pruebas de Jasmine.

TypeScript es una tecnología que crece cada día. Empresas como Slack, Airbnb o Google migran sus proyectos a TypeScript. En este artículo te muestro cómo configurar un proyecto básico con TypeScript y Parcel paso a paso.

A veces tenemos una lista larga de imports con archivos que vienen del mismo lugar. Esto genera ruido en el código y lo hace más largo. Te muestro cómo simplificarlos desde un único punto de exportación.

Cuando vamos a una fiesta, me encanta tener todas las cervezas listas para tomar una, pero tener que esperar a que las traigan de la nevera a la mesa no es una buena experiencia. Lo mismo pasa con nuestras aplicaciones en Angular: aprende a usar resolvers para precargar datos antes de activar un componente.

Cuando usamos librerías externas, es muy común declarar y usar un objeto global. Pero el precio a pagar son pruebas más complejas, y usar objetos globales por arte de magia no es una buena práctica. Te muestro cómo registrar una librería externa en Angular usando InjectionToken y buenas prácticas.

Uno de los platos más sencillos de preparar es una hamburguesa. Aunque la base siempre es la misma, los ingredientes pueden variar: te muestro cómo usar ng-content en Angular para proyectar contenido en áreas flexibles y trabajar con múltiples slots.

Sass incluye mixins como darken y lighten para oscurecer o aclarar colores, pero ¿cómo podemos lograr esto sin un preprocesador y solo con CSS nativo? Aprende a usar las funciones hsl() y calc() para generar variantes claras y oscuras de tus colores.

Cuando construimos componentes, necesitamos que sean flexibles para usarlos en muchos lugares o contextos, adaptando su estructura y colores según el caso.

Cuando trabajamos con Sass y Angular, importar archivos es una tarea muy común. Si tienes muchos componentes y necesitas cambiar la estructura de carpetas, actualizar cada ruta se vuelve pesado. Te muestro cómo simplificar tus imports con angular.json.

Hoy estuve ayudando a un compañero con las diferencias al enlazar datos en Angular, ya que ofrece dos formas de mover información hacia el DOM: one-way y two-way data binding. Esto nos permite crear aplicaciones dinámicas.

El mes pasado configuré mi blog con Angular Universal (Server Side Render). Aquí comparto mis pasos para instalar SSR en mi blog: un escenario real y sencillo con solo texto y peticiones HTTP a Contentful.

Estoy refactorizando código en Angular y necesito mantener los mismos nombres de archivo mientras termino la refactorización. Mi solución fue renombrar mis imports. Es una excelente manera de usar un nombre diferente o un alias para mis clases y módulos.

A veces queremos conocer el rendimiento o el tiempo que consume una función o proceso, y podemos resolverlo usando performance.now(). Esta API nos da el tiempo en milisegundos para medir cuánto tarda una función en completar su ejecución.

Hoy un amigo me preguntó sobre la diferencia entre extends e implements. class Media { format: string; } class Video extends Media {} class Image implements Media {} La respuesta rápida para él fue: con extends la clase obtiene todos los métodos y propiedades del padre, mientras que con implements la clase debe implementarlos.

Sigo trabajando con Jest y TypeScript. Ya sabemos cómo hacer aserciones con variables y objetos en nuestro código, y el siguiente paso es manejar errores. Calculator tiene un nuevo requerimiento: si la operación no es +, - o /, debemos lanzar un error.

Sigo reforzando mis puntos débiles en CSS y hoy es el turno de las animaciones. CSS nos permite crear animaciones con la regla @keyframes, definiendo el estado inicial de las propiedades y su duración a lo largo de la animación.

Otra buena forma de agregar efectos con CSS es usando transiciones. Te ayudan a transformar propiedades CSS de un valor a otro de forma suave, con una duración determinada entre ellas.

Aprende a superponer gradientes lineales, radiales y cónicos sobre imágenes de fondo, usar background-blend-mode y crear efectos duotono modernos con CSS puro.

Si trabajas en frontend, saber cómo posicionar elementos con CSS es fundamental. CSS cuenta con cinco tipos de position y en este artículo te muestro un ejemplo práctico de cada uno.

A veces necesitamos dar estilo a una parte específica de un elemento HTML, como la primera letra de un h1 o agregar contenido antes o después. Mi primera opción solía ser JavaScript, pero CSS nos ofrece una mejor solución usando pseudoelementos.

Trabajo con Jasmine y Karma porque es el conjunto de herramientas por defecto para pruebas en Angular. Funciona bien, pero una desventaja es el navegador predeterminado para ejecutarlas. Es algo lento y en CI impacta el tiempo de ejecución...

Sigo reforzando mis puntos débiles en CSS y hoy es el turno de las pseudoclases. Las pseudoclases nos ayudan a definir un estado particular de un elemento. Se identifican usando dos puntos (:), tal como las usamos en enlaces con algo como a:hover.

Sigo trabajando en mis puntos débiles con CSS, y hoy le toca el turno a los combinadores. A veces queremos seleccionar elementos sin afectar a otros y entender la relación entre ellos. Los combinadores de CSS nos ayudan a escribir mejores selectores.

Lista práctica de aplicaciones, paquetes y extensiones para preparar un entorno de desarrollo en Ubuntu enfocado en JavaScript, Angular y TypeScript.

Quiero mostrar un resumen práctico del compilador de TypeScript: la herramienta tsc compila nuestro código, observa cambios y verifica tipos. Aprende cómo configurarla usando la terminal y el archivo tsconfig.json.

En aplicaciones de TypeScript o Angular, podemos evitar rutas relativas largas y desordenadas configurando path mapping en tsconfig para tener imports limpios.

Trabajé durante varios meses con Jest y Vue, pero actualmente trabajo con Angular y el testing es parte de mi aprendizaje. Te explico un poco sobre Jasmine y cómo escribir pruebas unitarias para clases de TypeScript.

Por defecto, al instalar Angular CLI se obtiene la última versión, pero a veces nos toca trabajar con proyectos creados en una versión anterior. Si necesitas volver a una versión previa de Angular CLI, sigue estos pasos.

Si estás usando Angular y necesitas acceder al DOM con SSR, usa el paquete domino. Domino ofrece soporte para la API del DOM y selectores CSS para querySelector(), querySelectorAll() y matches(). Instala el paquete domino desde tu terminal.

Centrar elementos es una tarea muy común en el desarrollo web. En este artículo explico cómo centrarlos tanto horizontal como verticalmente usando el modelo de caja.

A veces necesitamos ejecutar una API simulada con JSON-Server y una SPA al mismo tiempo. Aprende a correr varios scripts de npm en paralelo o en secuencia usando npm-run-all.

Estoy de vuelta con Angular, y hoy estuve leyendo sobre los módulos de Angular, los cuales nos ayudan a encapsular y compartir nuestro código entre aplicaciones. Si has trabajado con Java o .NET, es como una librería donde puedes mantener cierta funcionalidad privada o pública.

En mi artículo anterior hablé sobre decoradores de clases en TypeScript. Hoy es momento de ver los decoradores de propiedades: cómo definirlos y usarlos para escribir código limpio y ordenado.

Los decoradores son una excelente característica de TypeScript que vemos en Angular y otros frameworks. Ayudan a escribir código limpio y declarativo. En este artículo te muestro cómo y cuándo crear tus propios decoradores con un ejemplo práctico.

Las interfaces son una excelente funcionalidad de TypeScript para escribir código estructurado y explícito. Te permiten describir contratos con propiedades y métodos que tus objetos y clases deben cumplir.

En TypeScript, las clases pueden heredar de otras para compartir métodos y propiedades. Además, TypeScript permite usar clases abstractas. Te muestro por qué y cuándo utilizarlas con un ejemplo práctico.

El encapsulamiento es una parte esencial de la POO, y TypeScript soporta las palabras clave get y set para miembros de clases. Podemos encapsular lógica y usar campos privados para gestionar el estado.

TypeScript entiende el tipo de retorno de las funciones por defecto. En este artículo te muestro cómo tipar funciones, trabajar con tipos de retorno y usarlas como tipos de forma segura.

TypeScript incluye sus propios tipos que no existen en JavaScript. Te muestro cómo usarlos durante el desarrollo para avisar al compilador sobre el tipo de dato y trabajar de forma segura.

Estoy empezando a migrar a TypeScript y aprendí cómo funcionan las anotaciones de tipos en las funciones. Aquí comparto lo básico sobre tipos en parámetros y valores de retorno en TypeScript.

Estoy empezando a migrar a TypeScript y a ver cómo funciona. Te muestro cómo trabajar con los tipos primitivos, la inferencia de tipos y cómo evitar errores comunes al declarar tus variables.