S021 – Drag and Drop (Arrastrar y Soltar) en Svelte 5

Esta funcionalidad de «arrastrar y soltar» no es de las primeras cosas que pruebas en un nuevo entorno de programación, pero es importante para determinadas aplicaciones, si deseas que el interfaz de la aplicación aparezca como algo moderno.

Repasando las aplicaciones realizadas en Web con PHPRunner, vi que tenía una, de la que me sentía muy contento y que me faltaba esta pieza/solución. La aplicación es KANBAN.

La parte del interfaz que me faltaba era la de «Drag and Drop» o «Arrastrar y Soltar», para cambiar de estado a los incidentes o tareas.

Objetivo

Seleccionar una librería de DnD (Drag and Drop) para añadir esta funcionalidad a los desarrollos de Svelte 5.

DEMO:  https://fhumanes.com/my-fluid-dnd/

Solución Técnica

El producto que creí que tenía todas las características que necesitaba es Fluid DnD y el ejercicio que he hecho son prácticamente todos los ejemplos que tiene en el blog de documentación.

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

S-020 – Subida de múltiples ficheros

Para mí, el hecho de tener un buen control sobre el componente que nos permite hacer Upload de los ficheros es muy importante, más, cuando quieres que sean un ficheros con extensión determinada y que si son imágenes las puedas redimensionar y ajustar a las características que precises.

Este ejercicio va de eso, subir ficheros de forma elegante y determinando en número de ellos que se pueden subir en la misma transacción.

Objetivo

Disponer de un componente que permita subir ficheros de forma eficiente (asíncrona)  y fácil (arrastrar), controlando características de los ficheros y redimensionando o convirtiendo características de los ficheros.

DEMO:  https://fhumanes.com/multi-files/

Si estás interesado en este artículo sigue leyéndolo en este enlace.

S-019 – Añadir Tailwind y Daisy UI, a componentes de SVAR

Este ejercicio era algo que quería emprender hace mucho tiempo. Los componentes de SVAR, me gustan, me parecen bastantes completos, creo que pueden ser muy eficientes para escribir código rápidamente y que también pueden ser muy útiles para aquellos que empiezan en el desarrollo, porque hay muchas que hacen por tí y que suelen estar muy bien hechas.

Ahora bien, para mí, tiene una definición de temas que es bastante «oscuro», ya que no disponen de una documentación sencilla y completa, para que podamos ajustar estos temas a nuestra necesidades o gustos.

Al haber terminado el ejemplo de Tailwind CSS y Daisy UI, ver la facilidad que ofrecen a los desarrolladores para los ajustes de UI de las aplicaciones, pensé que una solución de ese tipo requería los componentes de SVAR.

Objetivo

Integrar Tailwind CSS + Daisy UI + SVAR, de cara a mejorar la funcionalidad de personalización del UI de los desarrollos hecho con los componentes de SVAR.

DEMO: https://fhumanes.com/movie-svar/

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

S-018 – Integración Tailwind CSS + Daisy UI + Felte + Zod en Svelte

Después de múltiples ejemplos, integrar las mismas soluciones que integré en PHPRunner (aplicaciones Web), me he cuestionado si estoy utilizando Svelte adecuadamente y sobre todo, con los productos más habituales que los programadores «nativos» de Svelte, utilizan.

De ahí surgió la utilización de estos productos:

  • Para interface de aplicación, UI.- He seleccionado Tailwind CSS, que prácticamente es un estándar y que es utilizado masivamente por todos (mucho más que Bootstrap) y se complemente con Daisy UI que facilita el uso de TailWind CSS y nos dota de Temas, componentes para la iteración con el usuario, etc. Muy, muy importante y excelente solución, que nos soluciona la escritura de los componentes de iteración con el usuario.
  • Para la lógica y validación de los formularios.- Los productos seleccionados no tienen tanta difusión, pero son un buen ejemplo del ecosistema de soluciones que hay en el entorno de Svelte.
    Felte, nos soluciona la arquitectura de los formularios y Zod, nos facilta la definición de esquemas de validación de los datos de entrada de los formularios.
Objetivo

Repetir el proyecto de Bootstrap Svelte, con este kit de productos más propio del ecosistema de Svelte y verificar las bondades de utilización de las soluciones más habituales de los componentes de Svelte.

Se mantiene la aplicación de Back-End desarrollada en PHP SLIM4.

DEMO: https://fhumanes.com/felte-svelte/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

S-017 – Integración de PivotGrid de DevExtreme en Svelte

Este componente lo he utilizado con PHPRunner (aplicación Web) y para las aplicaciones de Gestión en una oficina es una solución muy potente, pues se asemeja a una tabla Pivot de Excel, pero con muchas ventajas:

  • Recupera los datos de la base de datos de forma inmediata y su visualización es muy potente.
  • Desde la propia visualización se puede realizar actualizaciones en los registros, de tal forma que la gestión es mucho más rápida y dinámica.

Como en otras librerías, se ha hecho 2 integraciones:

  • CDN – Utilizando la versión de librería de JavaScript.
  • NPM – Utilizando la versión de módulo de JavaScript.

Objetivo

Disponer de una solución potente de Pivot Grid para el entorno de Svelte y aprovechando el conocimiento previo, verificar que la solución de DevExpress, aunque en la web no lo indiquen, se puede utilizar perfectamente con Svelte 5.

DEMO

Si te interesa este tema, sigue leyendo el artículo en este enlace.