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

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

¿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

Remotion es un framework open source que convierte componentes de React en vídeos reales. Cada frame es código, así de simple.

En vez de usar timelines y keyframes, aquí trabajas con JavaScript, CSS y lógica. Si sabes React, ya sabes usar Remotion.

Es perfecto para:

• Vídeos dinámicos
• Contenido personalizado
• Automatización a escala
• Reels, anuncios y vídeos de datos

Renderizas en local o en la nube y sacas MP4, WebM o GIF sin tocar After Effects.

Código dentro, vídeo fuera.

#Remotion #React #JavaScript #VideoAutomation #Frontend #DevTools #ContenidoDigital

Si alguna vez has tenido que implementar un sistema de subida de archivos en una web, sabes que puede convertirse en un pequeño dolor de cabeza. Formularios poco atractivos, cargas lentas o falta de compatibilidad… y ahí es donde FilePond entra en escena para salvar el día.

FilePond es una librería JavaScript pensada para crear experiencias de subida de archivos rápidas, modernas y muy fáciles de usar. Lo mejor de todo es que es ligera, flexible y extremadamente personalizable, lo que la hace perfecta tanto para proyectos pequeños como para aplicaciones más grandes.

Una de sus grandes ventajas es que funciona de forma asíncrona, permitiendo subir archivos sin recargar la página. Además, ofrece características que hoy en día casi damos por obligatorias: vista previa de imágenes, validación de archivos, límites de tamaño, reordenación mediante drag & drop y compatibilidad con múltiples frameworks como React, Vue, Angular o Svelte.

Otro punto fuerte de FilePond es su sistema de plugins. Gracias a ellos puedes añadir funciones como compresión de imágenes, recorte, conversión de formatos o incluso detección automática de archivos duplicados. Todo esto sin complicarte la vida y manteniendo el rendimiento de la web.

Y si te preocupa la integración con tu backend, FilePond también lo pone fácil. Funciona perfectamente con APIs REST, subida directa a servidores o incluso servicios en la nube. Básicamente, tú decides cómo y dónde se suben los archivos.

En resumen, FilePond no es solo un input para subir archivos, es una solución completa para mejorar la experiencia del usuario y darle un toque profesional a cualquier formulario.

#FilePond #JavaScript #Frontend #SubidaDeArchivos #WebDevelopment #UX #LibreríasJS #DiseñoWeb

Si trabajas en diseño, desarrollo web o creación de contenido visual, sabes lo importante que es contar con buenos iconos. No solo aportan estilo y coherencia visual, también ayudan a mejorar la experiencia del usuario.
Por eso, hoy quiero presentarte Yesicon, una plataforma que se está convirtiendo en la favorita de muchos creativos.

Compatible con todo

¿Usas SVG, CSS, React, Tailwind, Vue o cualquier otro framework moderno?
Perfecto, porque Yesicon es compatible con todos ellos. Copia, pega y listo: tus iconos se integran sin esfuerzo en tu flujo de trabajo.

Visita Yesicon y descubre la colección de iconos más grande y versátil de la web.

#Iconify #React #Vue #Svelte #Solid #setIconos #Iconos #Gratuito #Gratis #Free