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

¿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

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

Angular es un framework para la creación de páginas web SPA mantenido por Google. Es uno de los frameworks más populares para el desarrollo de páginas web en la parte front. Empezó siendo una librería Javascript pero actualmente usa Typescript, un lenguaje parecido a Java con tipos que añade funcionalidad a Javascript.

En este repositorio encontrarás una serie de recursos, artículos, guías, tutoriales, etc para el aprendizaje de Angular gratis y en español.

#angular #javascript #frontEnd #framework #webSPA