ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Si utilizas IA para programar, probablemente ya te hayas encontrado con el siguiente problema: escribir código es cada vez más rápido, pero revisarlo sigue llevando tiempo. Ahí es donde entra Open Code Review, una herramienta de código abierto creada por Alibaba para automatizar las revisiones de código con IA.

La idea es bastante sencilla. Instalas la herramienta, la ejecutas desde la terminal y ocr analiza tus cambios de Git buscando posibles problemas. Pero no se limita a mirar unas cuantas líneas modificadas: el agente puede leer archivos completos, buscar información dentro del proyecto y utilizar ese contexto para generar comentarios precisos sobre el código.

Una de las cosas interesantes es que combina procesos deterministas con un agente de IA. Es decir, la herramienta se encarga de tareas como seleccionar archivos, localizar líneas o aplicar determinadas reglas, mientras que el modelo se ocupa de interpretar el código y detectar problemas. El proyecto incluye reglas para cuestiones como XSS, inyecciones SQL, seguridad, concurrencia y otros errores habituales, además de soportar más de 40 lenguajes y tipos de archivo.

También puedes utilizar diferentes modelos y proveedores, incluyendo APIs compatibles con OpenAI y Anthropic, además de otros proveedores y endpoints personalizados. Incluso permite integrarse con herramientas como Claude Code, Codex, Cursor y OpenCode.

Para probarlo basta con instalarlo mediante npm:

npm i -g @alibaba-group/open-code-review

Y después ejecutar ocr review dentro de tu proyecto. También puedes revisar una rama concreta, un commit o incluso lanzar un análisis completo de determinados archivos.

Otro detalle importante es que Open Code Review nació como una herramienta interna de Alibaba y posteriormente se publicó como proyecto open source bajo licencia Apache-2.0. Según su documentación, llevaba dos años utilizándose internamente antes de abrirse a la comunidad.

En definitiva, es otra señal de hacia dónde está evolucionando el desarrollo: la IA ya no solo escribe código, también empieza a asumir tareas de revisión, control de calidad y detección de problemas. Y en este caso tenemos además una herramienta que puedes instalar y ejecutar directamente desde tu propio entorno de desarrollo.

#OpenCodeReview #Alibaba #InteligenciaArtificial #IA #Programacion #DesarrolloWeb #Codigo #CodeReview #OpenSource #Git #Developers #SoftwareDevelopment

React sigue avanzando y ya tenemos React 19.3, una actualización que trae varias novedades bastante interesantes para quienes trabajan con interfaces web. No es simplemente una versión con correcciones: algunas de las nuevas APIs pueden cambiar bastante la forma de construir determinadas experiencias.

Una de las novedades más llamativas es View Transitions, que pasa de experimental a estable. React incorpora el componente <ViewTransition> para trabajar con las View Transitions API del navegador y crear animaciones cuando elementos aparecen, desaparecen, cambian de posición o se actualizan. Esto permite conseguir transiciones mucho más fluidas sin tener que montar soluciones bastante más complicadas por nuestra cuenta.

También llega Fragment Refs, otra función que puede resultar especialmente útil cuando trabajamos con componentes que generan varios elementos sin un contenedor común. Ahora podemos poner un ref directamente sobre un Fragment y controlar sus elementos hijos para tareas como eventos, foco, observadores de visibilidad, medición o scroll, sin tener que añadir un <div> únicamente para poder acceder al DOM.

Para quienes trabajan con SSR, React 19.3 incorpora browser(). Con use(browser()) podemos indicar que un componente necesita ejecutarse en el navegador y evitar que intente renderizarse en el servidor. Es una solución bastante más limpia para casos que dependen de APIs como localStorage, la zona horaria del dispositivo u otras funcionalidades que no existen durante el renderizado en servidor.

En el apartado de seguridad también hay novedades. React 19.3 añade soporte para Trusted Types, una tecnología del navegador pensada para ayudar a proteger las aplicaciones frente a ataques XSS basados en el DOM. React ahora puede trabajar con estos valores sin convertirlos automáticamente en simples cadenas de texto.

Y hay otra mejora interesante para quienes están metidos de lleno en React Server Components: ahora los Server Components pueden renderizar directamente un Context procedente de un módulo 'use client', sin tener que crear un componente Provider adicional solamente para pasar los datos.

En resumen, React 19.3 apuesta bastante por mejorar la integración entre React y las capacidades nativas del navegador, especialmente en animaciones, SSR, seguridad y control del DOM. Algunas de estas novedades son bastante específicas, pero View Transitions y Fragment Refs pueden tener un impacto directo en la forma en la que construimos interfaces modernas.

Si trabajas habitualmente con React, merece la pena echarle un vistazo a esta versión y, sobre todo, empezar a probar ViewTransition, porque puede simplificar bastante algunas animaciones que hasta ahora requerían bastante trabajo adicional.

#React #ReactJS #React19 #JavaScript #Frontend #DesarrolloWeb #Programacion #WebDevelopment #ViewTransitions #ServerComponents #UI #UX

Se acabó el piloto automático, gracias al piloto automático.

Claude Code tiene un modo llamado Auto Mode que, básicamente, permite que Claude deje de preguntarte cada dos minutos si puede hacer algo.

¿Puedo abrir este archivo? Sí/No.
¿Puedo modificar este script? Sí/No.
¿Puedo ejecutar este comando? Sí/No.

Cuando activas Auto Mode, Claude puede tomar esas decisiones de forma automática. Pero aquí viene la parte interesante: no está completamente solo. Hay un agente clasificador que analiza las acciones y determina si pueden ser destructivas o peligrosas.

Hasta ahora, en modo manual, la última palabra la tenías tú. Con Auto Mode, la tiene otro agente.

Y a partir del 14 de agosto, Auto Mode llegará activado por defecto en las sesiones Pro, Max y Team.

¿Y por qué dice Anthropic que automatizar las aprobaciones puede ser más seguro?

Porque hay un pequeño problema con los humanos: nos cansamos.

Si Claude te pregunta constantemente «¿puedo hacer esto?», llega un momento en el que tu cerebro entra en modo automático y empiezas a responder que sí sin leer realmente qué está haciendo.

Sí.
Sí.
Sí.
Sí.

Es exactamente lo mismo que hacemos con las políticas de privacidad y los términos y condiciones. Nadie los lee. Ves el botón, pulsas «Aceptar» y a otra cosa.

Anthropic ha puesto números al asunto. En una prueba con más de 1.053 testers profesionales, solo el 13,6 % consiguió detectar un comando peligroso, mientras que el agente clasificador lo identificó en el 89 % de los casos.

Y aquí está lo realmente interesante.

La discusión no es simplemente si debemos confiar más o menos en la IA. Es si tiene sentido mantener a una persona tomando decisiones de seguridad que, después de cientos de confirmaciones, probablemente acabará aceptando sin mirar.

Porque un «sí» humano dado por pura inercia tampoco es precisamente un mecanismo de seguridad.

La lectura importante para quienes trabajamos con IA es bastante sencilla: si vas a supervisar a un agente, supervisa de verdad. Lee lo que hace, entiende las consecuencias y presta atención.

Pero si sabes que después de 200 confirmaciones vas a empezar a pulsar «sí» como un NPC, quizá sea mejor delegar esas decisiones en un sistema especializado.

Eso sí: un agente también puede equivocarse.

Así que el futuro no parece ser «la IA lo hace todo y nosotros miramos». Más bien parece ser decidir qué merece nuestra atención y qué podemos dejar que la IA gestione por nosotros.

Y eso sí que tiene bastante más sentido que pasarnos el día pulsando «Sí, Claude, hazlo».

#Claude #ClaudeCode #Anthropic #AutoMode #InteligenciaArtificial #IA #Programación #DesarrolloSoftware #AgentesIA #AIcoding

Si trabajas con bases de datos y alguna vez has pensado «solo quiero probar esta consulta SQL rápidamente», RunSQL puede ser una herramienta bastante interesante. La idea es sencilla: llevar el trabajo con SQL directamente al navegador para que puedas ejecutar consultas y experimentar sin tener que preparar todo un entorno de desarrollo desde cero.

Este tipo de herramientas resultan especialmente prácticas cuando estás aprendiendo SQL, quieres comprobar rápidamente cómo funciona una consulta o necesitas hacer pequeñas pruebas antes de llevar el código a tu proyecto. En lugar de abrir tu IDE, conectarte a una base de datos y preparar todo el entorno, tienes una alternativa más rápida para experimentar.

Para quienes programan habitualmente, RunSQL también puede servir como un recurso de apoyo para probar ideas y trabajar con consultas de una forma más directa. Y si estás empezando con SQL, es una manera interesante de familiarizarte con el lenguaje y entender mejor cómo funcionan las consultas sobre datos.

Al final, RunSQL apuesta por algo que cada vez vemos más en el mundo del desarrollo: herramientas que eliminan pasos innecesarios y permiten centrarse directamente en lo que quieres hacer. Si trabajas con SQL o estás aprendiendo a manejar bases de datos, merece la pena echarle un vistazo y comprobar qué posibilidades ofrece.

#RunSQL #SQL #BasesDeDatos #Programación #DesarrolloWeb #DesarrolloSoftware #WebDevelopment #Coding #Programadores #Tecnología #Desarrollo #ProgramaciónWeb

Si trabajas programando con IA y estás cansado de configurar cada herramienta con un proveedor diferente, OmniRoute puede ser una opción bastante interesante. La idea es sencilla: en lugar de conectar tu IDE o agente de código con cada API por separado, OmniRoute actúa como una capa intermedia que centraliza el acceso a cientos de proveedores de modelos de IA desde un único endpoint.

Una de sus funciones más interesantes es el auto-fallback. Si un proveedor alcanza su límite o deja de estar disponible, OmniRoute puede cambiar automáticamente a otro proveedor para que el trabajo continúe. También permite utilizar estrategias de routing para priorizar proveedores gratuitos, reducir costes o elegir automáticamente la opción más adecuada para cada petición.

Además, es compatible con herramientas habituales del desarrollo asistido por IA como Claude Code, Codex, Cursor, Cline o GitHub Copilot, entre otras. También incorpora funciones como compresión de tokens, memoria, MCP y soporte para protocolos de agentes, por lo que va bastante más allá de ser un simple proxy de APIs.

La instalación también busca ser sencilla: puedes ejecutarlo mediante npm, Docker, como aplicación de escritorio o incluso en dispositivos ARM. Una vez funcionando, tus herramientas pueden apuntar a un único endpoint local y dejar que OmniRoute se encargue del routing entre los distintos proveedores.

Para quienes están metidos de lleno en el desarrollo con IA, es una herramienta que merece la pena echar un vistazo. Especialmente si utilizas varios modelos, quieres aprovechar diferentes planes gratuitos o simplemente buscas tener una configuración más centralizada y flexible.

#OmniRoute #AI #ArtificialIntelligence #IA #AIGateway #OpenSource #Programacion #Desarrollo #Coding #DevTools #ClaudeCode #Codex #Cursor #MCP #LL

Si llevas poco tiempo programando en JavaScript, probablemente todavía no hayas tenido que pelearte con el objeto Date. Si es así, enhorabuena: estás llegando justo cuando las cosas empiezan a cambiar para mejor.

Date existe desde 1995 y arrastra decisiones que hoy parecen difíciles de justificar. Los meses empiezan en cero, las zonas horarias pueden jugarte malas pasadas y una fecha puede modificarse desde cualquier parte del código sin que te des cuenta. No es casualidad que durante años hayan aparecido librerías como Moment.js, Luxon o date-fns para intentar hacer más llevadero el trabajo con fechas.

La buena noticia es que Node.js 26 activa por defecto Temporal, la API moderna que sustituye a Date. Su objetivo es muy claro: trabajar con fechas y horas sin sorpresas. Las fechas son inmutables, existen tipos específicos para fechas, horas y zonas horarias, y los cálculos de calendario son mucho más fiables.

En otras palabras, uno de los mayores quebraderos de cabeza de JavaScript por fin tiene una solución oficial.

Y aquí hay una lección interesante para quien está aprendiendo. La primera es práctica: si empiezas ahora con JavaScript, merece la pena aprender Temporal desde el principio y evitar muchos de los problemas que generaciones de desarrolladores tuvieron que soportar.

La segunda es casi una filosofía de aprendizaje. Muchas veces pensamos que llegamos tarde a una tecnología, pero los lenguajes evolucionan constantemente. Los que empiezan hoy no solo aprenden más rápido, sino que en ocasiones aprenden directamente la versión buena, sin cargar con años de trucos, parches y malas costumbres.

Temporal en JavaScript: guía rápida y ejemplos

Temporal ofrece una forma fiable y predecible de trabajar con fechas y horas. A continuación se presentan ejemplos prácticos para empezar a usarlo hoy mismo.

Crear y formatear fechas

// Asumiendo que Temporal está disponible (Node.js 26+ o polyfill si corresponde)
const todayISO = Temporal.Now.plainDateISO(); // PlainDate
console.log(todayISO.toString()); // e.g., 2026-07-09

const specificDate = Temporal.PlainDate.from('2024-12-25');
console.log(specificDate.toString()); // 2024-12-25

Sumar y restar tiempo

const date = Temporal.PlainDate.from('2024-03-15');

// Sumar 2 meses
const plusTwoMonths = date.add({ months: 2 });
console.log(plusTwoMonths.toString()); // 2024-05-15

// Restar 10 días
const minusTenDays = date.subtract({ days: 10 });
console.log(minusTenDays.toString()); // 2024-03-05

Trabajar con horas y zonas horarias

// Instant en UTC y conversión con zona específica
const instant = Temporal.Now.instant();
const zoned = instant.toZonedDateTimeISO('Europe/Madrid');
console.log(zoned.toString()); // 2024-...T...
console.log(zoned.hour);        // hora en la zona indicada

// Creación de un PlainDateTime y su conversión a ZonedDateTime
const dt = Temporal.PlainDateTime.from('2024-07-09T12:00');
const madrid = dt.toZonedDateTime( Temporal.TimeZone.from('Europe/Madrid') );
console.log(madrid.toString());

Diferencias clave frente a Date

// Date tiene meses basados en  y mutabilidad implícita
const d = new Date(2024, , 31); // 31 de enero de 2024 (confusión frecuente)
d.setMonth(d.getMonth() + 1);
console.log(d.toISOString()); // 2024-03-02T...


// Temporal evita sorpresas: objetos inmutables y tipos explícitos
const t = Temporal.PlainDate.from('2024-01-31');
const nextMonth = t.add({ months: 1 });
console.log(nextMonth.toString()); // 2024-02-29 (manejo claro de meses)

Consejos de migración

• Preferir PlainDate, PlainTime y PlainDateTime para valores sin zona horaria variable.
• Usar ZonedDateTime cuando se trabajen fechas y horas con zonas horarias específicas.
• Mantener inmutabilidad para evitar efectos secundarios inesperados durante cálculos.

Enlaces y conceptos clave

• Temporal.PlainDate, Temporal.PlainTime, Temporal.PlainDateTime
• Temporal.ZonedDateTime para zonas horarias
• Temporal.Now y Temporal.Instant para instantes precisos
• Conversión entre instantes y zonas horarias con toZonedDateTimeISO o toZonedDateTime

Si se desea, puedo adaptar este contenido para un formato específico (guía paso a paso, fragmentos reutilizables en snippets, o una versión enfocada a migración desde Date).

#JavaScript #NodeJS #NodeJS26 #Temporal #WebDevelopment #Programacion #DesarrolloWeb #Frontend #Backend #ECMAScript #Codigo #Developer #DevLife #SoftwareEngineerin

Si trabajas con React, Vue, Angular, Svelte o cualquier otro framework moderno, es muy probable que hayas oído hablar de Storybook. Y si todavía no lo utilizas, puede que estés perdiendo una de las herramientas que más tiempo ahorra en el desarrollo de interfaces.

La idea es muy simple: en lugar de arrancar toda la aplicación cada vez que quieres modificar un botón, un formulario o una tarjeta, Storybook te permite desarrollar cada componente por separado. Es como tener un laboratorio donde probar todos los estados posibles de una interfaz sin depender de APIs, bases de datos o lógica de negocio.

Cada variante de un componente se guarda como una «story». Gracias a eso puedes comprobar rápidamente cómo se comporta un botón deshabilitado, una alerta de error o un formulario con datos reales sin tener que navegar por toda la aplicación para llegar a ese punto.

Pero Storybook ya no sirve únicamente para desarrollar componentes. También genera documentación automática, facilita la creación de Design Systems, permite realizar pruebas visuales, test de interacción y comprobaciones de accesibilidad desde un único lugar. Todo ello convierte la biblioteca de componentes en una fuente de verdad para diseñadores y desarrolladores.

Otra de sus grandes ventajas es que se integra con la mayoría de herramientas habituales del ecosistema frontend, desde React y Next.js hasta Vue, Angular o Web Components. Además, admite cientos de integraciones que amplían todavía más sus posibilidades sin obligarte a cambiar tu flujo de trabajo.

No es casualidad que miles de empresas lo utilicen para mantener sus sistemas de diseño organizados y que millones de desarrolladores lo tengan instalado en sus proyectos. Si alguna vez has perdido tiempo buscando dónde se usa un componente o intentando reproducir un estado concreto de la interfaz, Storybook probablemente sea la solución que estabas buscando.

En un momento donde los proyectos frontend son cada vez más complejos y la reutilización de componentes es la norma, Storybook se ha convertido en una herramienta casi imprescindible para desarrollar interfaces más rápidas, consistentes y fáciles de mantener.

#Storybook #Frontend #JavaScript #React #Vue #Angular #UI #DesignSystem #WebDevelopment #Programación #DesarrolloWeb #OpenSource #FrontendDeveloper #CSS #DeveloperTools

Si estás desarrollando una aplicación con IA, haciendo pruebas o simplemente experimentando con modelos de lenguaje, seguramente te has encontrado con el mismo problema: casi todas las APIs interesantes terminan pasando por caja. Ahí es donde entra en juego Free LLM API Resources, un repositorio que se ha convertido en uno de los recursos más útiles para cualquier desarrollador que trabaje con inteligencia artificial.

La idea es sencilla pero tremendamente práctica: reunir en un único lugar todos los proveedores que ofrecen acceso gratuito o créditos iniciales para utilizar modelos de lenguaje mediante API. En la lista aparecen plataformas conocidas como OpenRouter, Google AI Studio, Groq, Cohere, GitHub Models, Cloudflare Workers AI o NVIDIA NIM, junto a sus límites de uso, cuotas disponibles y modelos compatibles.

Lo interesante no es solo la cantidad de servicios recopilados, sino el tiempo que ahorra. En lugar de investigar proveedor por proveedor para descubrir si tienen plan gratuito, límites diarios o créditos promocionales, aquí tienes una comparativa actualizada que te permite elegir rápidamente la mejor opción para tu proyecto.

Para quienes crean prototipos, herramientas internas, bots, extensiones o proyectos personales, este repositorio puede significar la diferencia entre empezar hoy mismo o perder horas buscando alternativas. Además, incluye tanto proveedores con planes gratuitos permanentes como servicios que ofrecen créditos de prueba para lanzar proyectos más ambiciosos sin inversión inicial.

No es casualidad que haya acumulado decenas de miles de estrellas en GitHub. Se ha convertido en una referencia habitual entre desarrolladores que buscan experimentar con modelos de IA sin disparar costes desde el primer día. Si trabajas con inteligencia artificial, merece un lugar fijo en tus marcadores.

#IA #InteligenciaArtificial #LLM #API #DesarrolloWeb #Programacion #OpenSource #GitHub #MachineLearning #Desarrolladores #AITools #Tech

La inteligencia artificial es muy buena escribiendo código, pero también tiene una peligrosa afición por complicar tareas sencillas. Ahí es donde entra Ponytail, un proyecto open source creado por Dietrich Gebert que intenta enseñar a los agentes de programación una habilidad que muchos desarrolladores veteranos dominan desde hace años: no escribir código cuando no hace falta.

La idea detrás de Ponytail es sorprendentemente simple. Antes de generar una solución, obliga a la IA a hacerse varias preguntas: ¿realmente hay que crear esto?, ¿ya existe en la librería estándar?, ¿el navegador o el sistema operativo ya lo resuelven?, ¿alguna dependencia instalada lo hace? Solo cuando todas las respuestas son negativas permite escribir código nuevo.

El resultado, según los benchmarks publicados por el proyecto, es una reducción drástica del volumen de código generado, menores costes de uso de modelos de IA y tiempos de respuesta mucho más rápidos. Todo gracias a una filosofía basada en YAGNI («You Aren’t Gonna Need It»), un principio clásico que combate la sobreingeniería.

Uno de los ejemplos más divertidos es el de un selector de fechas. Mientras un agente convencional podría instalar una librería completa, crear componentes personalizados y añadir estilos, Ponytail simplemente recuerda que HTML ya incluye <input type="date"> y que probablemente no necesitas nada más.

Lo interesante es que Ponytail no es un modelo de IA ni un asistente independiente. Funciona como una capa de comportamiento compatible con herramientas como Codex, Claude Code, Cursor, OpenCode y otros entornos de desarrollo asistidos por IA. Su objetivo no es hacer que la IA programe más, sino que programe mejor.

En una época donde muchos proyectos terminan con cientos de líneas de código innecesarias, Ponytail apuesta por algo mucho más revolucionario: la simplicidad.

Repositorio oficial: Ponytail en GitHub

#Ponytail #GitHub #OpenSource #Programacion #DesarrolloWeb #Codex #ClaudeCode #IA #DeveloperTools #SoftwareDevelopment #Coding #Tech #Productividad #DevLife #AIProgramming

La mayoría de herramientas de inteligencia artificial actuales funcionan en servidores externos, recopilan datos de uso y dependen de suscripciones. Odysseus propone justo lo contrario: una plataforma open source que convierte tu ordenador en un espacio de trabajo completo para interactuar con modelos de lenguaje de forma local.

Su propuesta es sencilla pero potente. Desde una única interfaz puedes chatear con modelos de IA, utilizar agentes autónomos, ejecutar herramientas, realizar tareas de investigación, gestionar correos electrónicos e incluso servir tus propios modelos. Todo ello funcionando en tu hardware, sin enviar información a terceros y sin sistemas de telemetría ocultos.

Uno de los puntos más interesantes de Odysseus es su enfoque «local-first» y «privacy-first». Esto significa que tus conversaciones, documentos y procesos permanecen bajo tu control. Para desarrolladores, investigadores y entusiastas de la IA, supone una alternativa muy atractiva frente a plataformas cerradas que limitan el acceso o el uso de los datos.

Además, al ser un proyecto de código abierto, cualquiera puede inspeccionar el código, modificarlo y adaptarlo a sus necesidades. Esto abre la puerta a crear asistentes personalizados, entornos de automatización avanzados o laboratorios de experimentación con modelos de lenguaje sin depender de proveedores externos.

Si te interesa la inteligencia artificial, la privacidad y el software libre, Odysseus es uno de esos proyectos que merece un hueco en tu lista de herramientas para probar este año.

#IA #InteligenciaArtificial #OpenSource #LLM #AIWorkspace #SelfHosted #Programacion #DesarrolloWeb #SoftwareLibre #MachineLearning #Productividad #Tech