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.

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.

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.

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

• NPM – https://fhumanes.com/pivotgrid-svelte/
• CDN – https://fhumanes.com/pivotgrid2-svelte/

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

Quien tenga conocimiento de mis artículos del Blog, recodará que tengo algunos artículos sobre el uso del Calendario y Gestor de Recursos de DayPilot. Es un producto muy utilizado en los desarrollos Web y dispone de características muy bonitas y prácticas. Desde mi punto de vista, lo considero con mejor UI y características que FullCalendar.

Aunque dispone de una versión Open Source, esta versión es muy, muy reducida y no la he tenido en cuenta para esta integración, ya que  si necesitamos esta solución en un proyecto, creo que se puede pagar una licencia del mismo, dada la calidad que va a dar al proyecto.

Objetivo

En la web del fabricante no se indica que se puede utilizar con Svelte, pero veremos en el ejemplo que podemos utilizar la web Web JavaScript, para los desarrollos de Svelte.

Como objetivo, el ejemplo debe incorporar:

• Funcionamiento en Svelte 5 y utilización en código reactivo.
• Definición de calendario de día, semana y mes, disponiendo de una guía de 3 meses para poder navegar entre fechas.
• Etiquetado y coloreado de actividades.
• Operación de navegación para reposición de los datos (ahora son fijo, pero se dispone del ejemplo para hacer la petición de las acciones entre fechas).
• Evento de clic en una actividad o obtención de los datos de la acción. (para operaciones CRUD de actividad).
• Se ha personalizado para español, así se facilita la adaptación a otros idiomas.

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

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