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

Si trabajas con JavaScript o TypeScript y necesitas meter gráficos en una aplicación, seguramente ya te hayas encontrado con un montón de librerías que hacen prácticamente lo mismo. TanStack Charts intenta darle otra vuelta al asunto.

El proyecto forma parte del ecosistema TanStack y propone una forma bastante flexible de construir visualizaciones a partir de una especie de “gramática” de gráficos. En lugar de limitarte a configurar un tipo de gráfico concreto, puedes combinar diferentes elementos, escalas e interacciones para crear visualizaciones más personalizadas.

La idea está basada en TypeScript y utiliza primitivas de D3 cuando necesitas funcionalidades más avanzadas. Puedes empezar con gráficos habituales como barras o líneas y, si el proyecto se complica, añadir escalas o algoritmos específicos de D3 sin tener que cambiar completamente de sistema.

Otro punto interesante es que la definición del gráfico es independiente del framework. El mismo gráfico puede utilizarse con React, Vue, Angular, Svelte, Solid, Preact, Lit, Alpine e incluso con JavaScript sin framework. También contempla renderizado mediante SVG y, de forma opcional, Canvas.

Además, no se queda únicamente en pintar barras y líneas. TanStack Charts incorpora responsive design, márgenes automáticos, temas, tooltips, animaciones, interacción, accesibilidad, renderizado en servidor (SSR) y exportación. Es decir, intenta cubrir buena parte de lo que necesitas cuando un gráfico pasa de ser una simple demo a formar parte de una aplicación real.

Eso sí, hay una advertencia importante: TanStack Charts 0.6.5 está actualmente en fase pre-alpha y su API puede cambiar, por lo que sus propios responsables indican que todavía no está preparado para producción.

Aun así, es un proyecto muy interesante para seguir de cerca, especialmente si trabajas con TypeScript y necesitas visualizaciones que vayan más allá del típico gráfico de barras. Y si ya conoces el ecosistema TanStack, merece la pena echarle un vistazo.

Puedes consultar el código en GitHub de TanStack Charts y la documentación oficial en TanStack Charts.

#TanStack #TanStackCharts #TypeScript #JavaScript #D3js #DataVisualization #DataViz #WebDevelopment #Frontend #React #Angular #Vue #Svelte #WebDesign #Programming

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

¿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