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

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 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