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

Si alguna vez has intentado meter mapas en una app web, ya sabes el drama: APIs, claves, configuraciones eternas y documentación que parece escrita por villanos. Pues bien, eso se acaba con Mapcn, un proyecto open source que básicamente dice: “pega esto y ya tienes mapas funcionando”.

Este repositorio de GitHub creado por Anmoldeep Singh se centra en algo muy claro: ofrecer componentes de mapas listos para usar en React, sin complicaciones y con una estética brutal desde el minuto uno. Y lo mejor, sin API keys ni configuraciones infernales. Literalmente puedes instalarlo con un comando y empezar a jugar.

Mapcn está construido sobre MapLibre GL, lo que significa que tienes toda la potencia de un motor de mapas moderno, pero sin depender de servicios de pago ni limitaciones raras. Además, utiliza Tailwind CSS para el diseño, así que encaja perfectamente con proyectos modernos y, especialmente, con shadcn/ui.

Lo interesante aquí es que no estás usando una librería cerrada que te limita, sino que puedes copiar los componentes directamente a tu proyecto y modificarlos como quieras. Es decir, control total. Nada de cajas negras.

En cuanto a funcionalidades, Mapcn no se queda corto: puedes añadir marcadores, popups, rutas, controles de zoom, brújula, localización e incluso animaciones tipo “fly to” para mover el mapa con estilo. Todo esto con componentes declarativos que hacen que trabajar con mapas sea mucho más intuitivo.

Otro puntazo es que es “theme-aware”, es decir, se adapta automáticamente al modo claro u oscuro de tu app, lo que te ahorra tiempo en diseño y hace que todo quede coherente sin esfuerzo.

Además, al no depender de APIs externas obligatorias, puedes usar proveedores como OpenStreetMap o MapTiler sin coste, lo que lo convierte en una opción perfecta tanto para proyectos personales como para productos en producción.

En resumen, Mapcn es de esas herramientas que te hacen preguntarte por qué todo no es así de simple. Si trabajas con React o Next.js y necesitas mapas, esto es prácticamente un must: rápido, bonito, flexible y totalmente gratis.

#Mapcn #React #NextJS #OpenSource #DesarrolloWeb #Frontend #JavaScript #TailwindCSS #Mapas #UIComponents #Programación

Si te mueves en el mundo de la inteligencia artificial, seguro que ya te has dado cuenta de algo: cada semana aparece un modelo nuevo. Que si GPT, que si Claude, que si Gemini… y al final acabas con mil APIs, claves y facturas diferentes. Aquí es donde entra OpenRouter, una herramienta que básicamente hace de “hub” universal para modelos de IA.

OpenRouter es una plataforma que te permite acceder a cientos de modelos de inteligencia artificial desde una única API. Sí, una sola clave para gobernarlos a todos. La idea es sencilla pero potente: en lugar de integrar cada proveedor por separado, usas OpenRouter como intermediario y listo.

Lo interesante es que no solo simplifica el trabajo, sino que también optimiza costes y rendimiento. La propia plataforma puede enrutar tus peticiones al modelo más adecuado según precio, velocidad o disponibilidad, algo clave cuando trabajas con apps o automatizaciones a escala.

Además, funciona con una barbaridad de modelos (más de 300 y más de 60 proveedores), lo que significa que puedes probar, comparar y cambiar de IA sin tocar prácticamente tu código. Esto es oro puro para desarrolladores, startups y gente que está experimentando con productos basados en IA.

Otro punto fuerte es que OpenRouter es compatible con la API de OpenAI, así que si ya has trabajado con ChatGPT o herramientas similares, la curva de aprendizaje es mínima. Cambias la URL, tu API key y a correr.

También mola su sistema de créditos: en lugar de pagar suscripciones individuales por cada modelo, compras saldo y lo usas donde quieras. Esto hace que tengas más control sobre el gasto, especialmente si estás testeando diferentes modelos o construyendo prototipos.

Y ojo, porque esto no es solo para developers hardcore. Cada vez más herramientas y apps integran OpenRouter por debajo, lo que significa que indirectamente lo estás usando sin darte cuenta. De hecho, ya hay cientos de miles de aplicaciones funcionando sobre esta infraestructura.

En resumen, OpenRouter es como el “Spotify de las IA”: eliges el modelo que quieras, cuando quieras, sin casarte con ninguno. Y en un mundo donde la IA cambia cada mes, esa flexibilidad es justo lo que necesitas.

#OpenRouter #InteligenciaArtificial #IA #MachineLearning #Desarrollo #APIs #GPT #Claude #Gemini #Programacion #Tech #AItools

Si te interesa el desarrollo web moderno y React, hay un recurso que deberías guardar ya mismo en favoritos: el curso oficial Learn Next.js de la web de Next.js. Se trata de un tutorial interactivo y totalmente gratuito creado por el propio equipo del framework para aprender a construir aplicaciones web modernas paso a paso.

La gracia de este curso es que no se limita a teoría ni a ejemplos sueltos. Desde el primer momento empiezas a construir una aplicación real mientras aprendes cómo funciona el framework por dentro. El tutorial está organizado en varios capítulos que te guían desde los conceptos básicos hasta características más avanzadas, con ejercicios y pequeños tests para comprobar que realmente has entendido cada parte.

A lo largo del curso crearás un proyecto completo, configurando el entorno de desarrollo y trabajando con un proyecto base llamado “ACME”. Poco a poco irás añadiendo funcionalidades reales como estilos con CSS o Tailwind, optimización de imágenes y fuentes, creación de páginas y layouts, navegación entre rutas o gestión de datos en el servidor.

También aprenderás temas bastante potentes del ecosistema moderno de React: renderizado estático y dinámico, streaming para mejorar tiempos de carga, búsqueda y paginación de datos, autenticación de usuarios, manejo de errores y optimización SEO mediante metadata. Todo ello dentro del propio flujo de desarrollo de Next.js.

Una de las mejores cosas del curso es que puedes hacerlo completamente a tu ritmo. La plataforma guarda tu progreso, así que puedes seguir aprendiendo cuando tengas un rato libre sin perder el hilo. Además, al terminar tendrás una aplicación funcional lista para desplegar, lo cual es perfecto si quieres empezar a crear tus propios proyectos con este framework.

En definitiva, si quieres dar el salto de React a aplicaciones web más completas y rápidas, este tutorial es probablemente uno de los mejores puntos de partida. Es oficial, está pensado para aprender construyendo y, lo mejor de todo, no cuesta absolutamente nada.

#NextJS #ReactJS #DesarrolloWeb #Programacion #JavaScript #Frontend #FullStack #WebDevelopment #DevTools #AprenderProgramacion

Si eres diseñador, desarrollador o simplemente te flipa el buen diseño, Godly.website es como ese moodboard imposible de ignorar que siempre quisiste tener. Se trata de una galería curada de sitios web extraordinarios, seleccionados a mano por su estética, creatividad y presencia visual — nada de basura generada automáticamente. Cada día puedes perderte entre propuestas audaces, portfolios espectaculares, webs con animaciones locas y proyectos que rompen las reglas tradicionales del diseño digital.

La magia de Godly está en su selección: no verás miles de sitios mediocres sino lo mejor de lo mejor, desde e-commerce con estilo hasta portafolios que parecen obras de arte, todo organizado para que te inspires sin perder tiempo.

Eso sí: algunos usuarios comentan que cuando cambian el diseño de la propia plataforma, no todo el mundo está contento — para algunos, la navegación pierde facilidad aunque sigue siendo una mina de buenas ideas.

En definitiva, si lo tuyo es el diseño web con alma, visualmente atrevido y con toneladas de UX y UI que te hagan decir “wow”, Godly.website es una parada obligatoria en tu feed diario de inspiración.

#GodlyWebsite #DiseñoWeb #InspiracionUIUX #WebDesign #UXDesign #UIDesign #TendenciasUX #CreatividadDigital #PortafolioWeb #DiseñadoresWeb #InspiracionWeb

Si te estás adentrando en el mundo de la inteligencia artificial y los modelos de lenguaje, hay un repositorio que literalmente te puede ahorrar meses de búsqueda y experimentación: awesome-llm-apps. ¿Por qué? Porque reúne más de 100 aplicaciones reales construidas con LLMs listas para explorar, ejecutar y modificar.

Detrás de esta colección está Shubham Saboo, y la propuesta es tan simple como poderosa: no limitarse a explicar qué es un LLM, sino mostrarte cómo se usa en el mundo real. Aquí vas a encontrar desde asistentes inteligentes que automatizan tareas hasta sistemas multiagente donde varias IAs colaboran entre sí, pasando por aplicaciones con memoria persistente, integraciones con APIs, chatbots avanzados, herramientas con voz y proyectos que utilizan RAG (Retrieval-Augmented Generation) para consultar información externa de forma inteligente.

Lo interesante no es solo la cantidad, sino la variedad. Hay ejemplos que trabajan con modelos comerciales y open source, patrones de arquitectura reutilizables, estructuras de proyecto bien organizadas y documentación suficiente para que puedas clonar el repositorio y empezar a experimentar en cuestión de minutos. Es como tener un laboratorio completo de IA listo para desmontar pieza por pieza.

Si eres desarrollador, estudiante o simplemente alguien curioso que quiere ir más allá del típico “hazme un prompt”, este repositorio te permite entender cómo se construyen productos reales basados en LLMs. Ves cómo se gestionan las conversaciones, cómo se implementa memoria, cómo se coordinan agentes autónomos y cómo se integran herramientas externas. Es aprendizaje práctico, directo al código.

En resumen, más de 100 apps de LLM en un solo lugar significa exposición masiva a casos de uso reales. Y cuando estás empezando en IA, eso es oro puro: inspiración, estructura y ejemplos concretos que puedes adaptar a tus propios proyectos sin empezar desde cero.

#IA #MachineLearning #LLM #GitHub #Desarrollo #OpenSource #InteligenciaArtificial #AIApps #AgentesIA #RAG

EverShop es una de esas joyitas que muchos desarrolladores y emprendedores están empezando a descubrir cuando quieren montar una tienda online potente y totalmente personalizable sin depender de soluciones cerradas tipo SaaS. Se trata de una plataforma de eCommerce open-source construida con tecnologías modernas como TypeScript, React y GraphQL, diseñada para que tengas control total de tu proyecto desde el backend hasta la experiencia de usuario en el front.

¿Y qué la hace tan atractiva? Primero, que puedes instalarla en tu propio servidor o servicio cloud y adaptarla a cualquier necesidad: desde una tienda pequeña hasta un marketplace más complejo. La administración de productos, categorías, colecciones y pedidos es muy intuitiva si te gusta jugar con código y tener tus procesos bajo control. Además, incluye widgets dinámicos que ayudan a personalizar la tienda sin complicarte la vida, y gracias a GraphQL puedes optimizar al máximo la forma en que tu tienda carga datos.

Otro punto fuerte es su arquitectura modular: puedes ampliar funcionalidades con plugins, extender la interfaz, cambiar diseños o incluso crear herramientas propias si así lo deseas. La comunidad que se ha ido formando alrededor de EverShop está aportando mejoras constantes y nuevas ideas. No es la opción más simple si no te manejas con desarrollo web, pero si te gusta poner tus manos en la masa, es un sueño hecho realidad.

En resumen, EverShop es como tener una tienda Shopify, pero hecha a tu medida desde cero y sin las limitaciones de plataformas cerradas. Si eres developer o empresario digital, merece muchísimo la pena echarle un vistazo.

#EverShop #eCommerce #CódigoAbierto #OpenSource #DesarrolloWeb #ReactJS #TypeScript #GraphQL #TiendaOnline #EcommercePlatform #SelfHosted

Si te interesa el mundo de los agentes de inteligencia artificial y quieres entender cómo funcionan realmente por dentro, esta información te va a encantar. Microsoft ha lanzado una nueva serie formativa en formato livestream titulada “Python + Agentes: Creando agentes y flujos de IA con Agent Framework”, y promete meterse de lleno en lo que de verdad importa cuando hablamos de AI agents modernos.

Ojo: el curso está impartido por Microsoft, nosotros solo compartimos la información para quienes quieran aprovechar la oportunidad.

Se trata de una serie de 6 livestreams en español, centrados en el tema de Agentes, donde durante dos semanas se exploran los conceptos base y los bloques prácticos que definen el comportamiento real de un agent construido en Python. No es solo teoría: es entender cómo piensan, cómo actúan y cómo se estructuran los flujos inteligentes sobre ellos.

La serie está pensada para cualquier persona que quiera comprender cómo funcionan los agents desde dentro. Aquí se habla de tool calling real, de cómo gestionan memoria y contexto, de cómo se construyen workflows por encima del agent y de cómo se conectan con herramientas externas.

Durante los directos aprenderás a registrar y estructurar tools correctamente, conectar servidores MCP locales, añadir contexto utilizando built-in providers, comparar distintas estrategias de memory y monitorear el comportamiento del agente usando OpenTelemetry. Además, se aborda algo clave en cualquier sistema de IA actual: cómo evaluar la seguridad y la calidad del output generado por el agent.

Todos los ejemplos se desarrollan en Python en vivo, y el código se comparte para que puedas ejecutarlo por tu cuenta. También puedes seguir paso a paso utilizando GitHub Models y GitHub Codespaces, lo que facilita muchísimo la práctica sin necesidad de montar entornos complejos desde cero.

Y si te quedas con dudas, después de cada stream puedes participar en office hours diarias dentro del Microsoft Foundry Discord, donde podrás hacer preguntas y profundizar en los temas tratados.

Si todavía estás empezando desde cero en el mundo de la IA generativa con Python, Microsoft recomienda comenzar primero con su serie “Python + AI” de 9 partes, donde cubren fundamentos como LLMs, modelos de embeddings, RAG, tool calling, MCP y mucho más.

En definitiva, es una oportunidad muy interesante para quienes quieren ir más allá del prompt y empezar a construir agentes reales, con estructura, memoria, herramientas y capacidad de integrarse en flujos de trabajo complejos. Si estás explorando el universo de los AI agents, esta serie puede marcar un antes y un después en tu curva de aprendizaje.

#Python #InteligenciaArtificial #AIAgents #MachineLearning #Microsoft #AgentFramework #GenerativeAI #Desarrollo #Programación #LLM #RAG #OpenTelemetry #TechEvents #Livestream

Si alguna vez has pasado horas buscando el icono perfecto para tu proyecto web, app o presentación, ¡deja de sufrir! icons0.dev es como ese amigo silencioso y letal del equipo: no está para presumir, solo te da lo que necesitas rápido y sin complicaciones. Esta herramienta te pone al alcance más de 200,000 iconos de más de 150 colecciones distintas – desde Bootstrap Icons hasta iconos de marcas o temáticas específicas – y todo se despliega en un buscador limpio, rápido e intuitivo.

No necesitas crear cuentas ni pelearte con interfaces lentas: solo busca lo que quieres, filtra por categoría y licencia, y voilá. Además, está alimentado por Iconify y bajo licencia MIT, lo que significa que puedes usar los iconos en proyectos personales o comerciales sin dolor de cabeza (revisa licencia antes de usos extremos, siempre).

¿Y lo mejor? También tiene opciones para integraciones con frameworks y paquetes npm, lo que hace la vida del developer mucho más fácil. Si tu flujo creativo va a toda pastilla, icons0.dev es la gasolinera en medio del desierto que estabas buscando.

#IconosGratis #IconosWeb #DiseñoGráfico #DevTools #RecursosParaDiseño #IconLibrary #IconSearch #DesarrolloWeb

¿Alguna vez te quedaste pensando lo genial que sería poder arrastrar y soltar cosas en tu app sin complicarte la vida? Eso es exactamente lo que Pragmatic Drag and Drop trae al mundo front-end: un enfoque flexible, rápido y pensado para cualquier tecnología que puedas imaginar

Desde Angular hasta React, Svelte, Vue o incluso vanilla JavaScript, este sistema te da las piezas básicas para construir interacciones de drag & drop usando la funcionalidad nativa de la web, lo que significa que aprovechas al máximo lo que el navegador ya sabe hacer sin añadir demasiada chicha innecesaria.

Lo más chulo es que no te ata a un solo framework: imagina una biblioteca pequeña, modular y sin dependencias pesadas, donde tú decides qué partes incluir. Solo tomas lo que necesitas (como los adaptadores para elementos, texto o incluso archivos externos), y el resto queda fuera hasta que lo requieras.

Además, si te mola trastear con ejemplos, hay demos donde puedes ver listas que se reordenan, tableros tipo Trello y áreas que aceptan archivos soltados desde fuera de la página.

Y por si te pica la curiosidad técnica, esto fue creado con un tamaño muy contenido y pensado para que funciones como reordenar, arrastrar entre áreas o integrar con experiencias complejas sean sencillas y eficientes.

# install the core package
yarn add @atlaskit/pragmatic-drag-and-drop
- o - 
npm install atlaskit/pragmatic-drag-and-drop

#DragAndDrop #PragmaticDragAndDrop #AtlassianDesign #UX #UI #DevTools #Frontend #JavaScript #React #WebDesign #InteracciónWeb

¿Alguna vez quisiste leer documentación completa de un repositorio sin perder horas escarbando en código y README? Pues DeepWiki es como un asistente mágico que lo hace por ti. En su versión web puedes buscar cualquier repo público de GitHub y obtendrás una especie de Wikipedia tech del código: explicaciones de funciones, diagramas, resúmenes y hasta conversaciones con IA sobre cómo funciona todo.

La idea es tan simple como genial: DeepWiki analiza los ficheros de tu repositorio (código fuente, README, etc.) y crea una documentación estructurada que puedes leer y consultar con lenguaje natural. Además, puedes hacerle preguntas directas sobre el repo y recibir respuestas basadas en el contenido real.

Truco rápido: si tu repo ya está indexado (o lo indexas), puedes simplemente cambiar en la URL la parte que dice “github.com” por “deepwiki.com”. Por ejemplo:
https://github.com/usuario/mi-proyecto → https://deepwiki.com/usuario/mi-proyecto
y ¡bum! ya estás viendo la documentación generada.

Ten en cuenta que si el repo aún no está indexado, DeepWiki puede pedirte una dirección de correo (o hacer el proceso automático en unos minutos). También hay extensiones y scripts (incluidas opciones para Chrome o tampermonkey) que añaden un botón directo en las páginas de GitHub para saltar a DeepWiki sin escribir nada.

En resumen: si quieres ahorrar tiempo entendiendo proyectos complejos, compartir conocimiento con tu equipo o simplemente explorar código con IA, DeepWiki es como tener un copiloto que convierte repos en documentación útil sin que tú tengas que escribir una sola línea.

#DeepWiki #DocumentaciónAI #RepositoriosGitHub #IA #GitHubDocs #DevTools #AIparaDesarrolladores #CódigoAbierto