El cierre del año 2023 de DaisyUI

Traducido del artículo_ publicado en el blog de DaisyUI por Pouya Saadeghi._

2023 fue un año espectacular para daisyUI. ¡Para el desarrollo Front-end, Para CSS, Para Tailwind y para daisyUI! Echemos un vistazo a lo que hemos logrado en 2023.

Han pasado 3 años desde el primer commit de daisyUI. Al principio, era sólo un pequeño proyecto paralelo para ayudarme con mis propios proyectos freelance. Pero rápidamente se convirtió en algo más grande de lo que jamás podría haber imaginado. Ha sido un viaje emocionante y 2023 en particular fue un año especial para daisyUI. Veamos todas las cosas buenas que pasaron en 2023.

2023 visto desde los números 📊

• En 2023 se lanzaron 190 versiones de daisyUI desde 2.46.1 a 4.4.20 corrigiendo más de 1000 errores y añadiendo muchas nuevas características.
• daisyUI se utiliza ahora en más de 156.000 proyectos de código abierto de acuerdo con el gráfico de dependencia de GitHub (340% de aumento en comparación con 2022).
• En el último año, daisyUI GitHub repo pasó de 16.000 estrellas a 27.000 estrellas y ahora está en los 500 mejores repositorios de GitHub.
• daisyUI paquete NPM recientemente alcanzó el récord histórico de 260.000 descargas por semana. Fue descargado 7,7 millones de veces en 2023 (un aumento del 330% en comparación con 2022).
• El archivo de la CDN que contiene a daisyUI ahora tiene más de 3 millones de descargas por semana solo llegando desde jsDelivr (es posible estimar un número similar proveniente de los demás CDNs).
• A principios de 2023, daisyUI tenía 89 contribuidores. Hasta diciembre, tiene 162 contribuidores de muchos y distintos países alrededor del globo.

Mapa de contribuidores

Mejoras de rendimiento

• daisyUI 4 redujo el tamaño de instalación del paquete Node de 14.0MB a 3.83MB (incluyendo todas las dependencias).
• daisyUI 4 redujo las dependencias de módulos Node en un 92% y la huella de node_modules en un 73%.

	daisyUI 3	daisyUI 4
NPM tamaño de instalación	14.0 MB	3.83 MB
NPM tamaño de bundle	434 kB	238.7 kB
NPM tamaño de bundle (gzip)	74.7 kB	38.8 kB
Total de dependencias en Node Modules	86	7

• Hemos pasado del sistema de color HSL al sistema de color de gama amplia OKLCH. Esto da acceso a una gama de colores más amplia y permite utilizar más colores en los temas de daisyUI.
• daisyUI 4 también pasó de CSS direccional a propiedades CSS lógicas que hace más fácil soportar idiomas RTL en tiempo de ejecución, sin la necesidad de generar un archivo CSS separado usando dependencias adicionales.

Nuevas características

En 2023, se han añadido 7 nuevos componentes, 3 nuevos temas y más de 100 clases de utilidad a daisyUI. También fueron los reescritos los estilos de muchos componentes para hacerlos más accesibles y fáciles de personalizar. Puedes comprobar los detalles en el registro de cambios.

Accesibilidad

Todos los pares de colores utilizados en los temas incorporados de daisyUI han sido probados para la relación de contraste y todos ellos pasan la prueba WCAG. Este test se ejecuta automáticamente cada vez que hay un cambio en los temas o en las funciones de los temas para asegurarse de que se proporcionan combinaciones de colores accesibles por defecto.

Ver resultados de la prueba

En 2023, todos los colores del tema daisyUI fueron ajustados para mejorar el ratio de contraste al mismo tiempo que proporcionan una mejor experiencia visual. Siempre y cuando utilices los pares de colores correctos para construir tu interfaz de usuario (por ejemplo, usando bg-primary y text-primary-content juntos), puedes estar seguro de que tu interfaz de usuario es accesible por defecto, en todos los temas.

En 2023, daisyUI se adaptó a los nuevos estándares de HTML y CSS, como el nuevo elemento <dialog> y características de CSS como :has() y color-mix(). También mejoramos los componentes existentes para asegurarnos de que sean accesibles por defecto. Ahora utilizamos el elemento HTML <dialog> para el modal de daisyUI y usamos HTML <details> para submenús y ejemplos de menús desplegables.

daisyUI utiliza elementos y atributos HTML nativos en todos los componentes para proporcionar una experiencia accesible por defecto. No estamos utilizando <div> y <span> con atributos role para emular elementos HTML nativos. Esto significa que la accesibilidad no es una idea secundaria en daisyUI. Está incluida por defecto si se utilizan los elementos HTML nativos.

Esta es una gran ventaja para daisyUI y es una de las razones por las que daisyUI es accesible. Por ejemplo, el toggle de daisyUI es una casilla de verificación HTML nativa y es accesible por defecto. Pero si una biblioteca de componentes utiliza etiquetas <div> para emular elementos HTML nativos, necesitarían los atributos role="checkbox", aria-checked y aria-labelledby para hacerlo accesible para lectores de pantalla y navegación por teclado. También necesitarían JS personalizado específico de la estructura para hacerlo funcional. Esto no es el caso de daisyUI porque utilizamos elementos y atributos HTML semánticos para los componentes de daisyUI.

En 2023, mejoramos el ejemplo de código para cada componente para asegurarnos de que sean accesibles para la navegación por teclado y los lectores de pantalla.

Para los ejemplos de código específicos de contenido, no proporcionamos un contenido genérico en el ejemplo de código. Por ejemplo, las etiquetas <img> no tienen un atributo alt porque el atributo alt debe ser proporcionado por ti, basado en el contenido de tu página. Esto también es cierto para los atributos aria-label y aria-labelledby. Si proporcionamos un texto ficticio para eso, es probable que envíes ese código a producción sin cambiarlo. Eso no está bien, así que es mejor si recibes un error de tu editor de código o linter para recordarte que agregues el atributo alt o aria-label correcto cuando sea necesario.

Un CLI para instalar Tailwind CSS y daisyUI

En 2023 fue lanzado npm init daisyui que es una herramienta CLI para instalar Tailwind CSS, PostCSS y daisyUI en un solo comando. ¡Dale una estrella al repositorio en GitHub si te gusta!

¡daisyUI tiene un logo ahora!

Algunos dicen que es un huevo frito 🍳 y aguacate 🥑, otros dicen que es una flor 🌼.

Pero todos estamos de acuerdo en que es adorable y sencillo.

Rediseño del sitio web

El sitio web de daisyUI fue rediseñado en 2023. La nueva página de inicio visualiza las características más importantes de daisyUI y cómo puede ayudar a su flujo de trabajo de desarrollo utilizando Tailwind CSS. Están siendo utilizados SvelteKit 2 y Vite 5 para el sitio web ahora y es un placer trabajar con estas herramientas.

Mejoras en #Docs

Se han añadido 6 nuevas traducciones a la página web en 2023. daisyUI docs está ahora disponible en 16 idiomas lo que hace que sea accesible a un público más amplio.

Este año han sido lanzados daisyUI Store, daisyUI Resources y daisyUI Blog.

Se han añadido nuevas páginas incluyendo daisyUI Roadmap, daisyUI utilities docs y también una página de preguntas frecuentes.

Boletín de noticias

¡Ahora hay un boletín de noticias! Puedes suscribirte usando el formulario en el pie de página de la web para obtener las últimas noticias sobre daisyUI.

También puedes suscribirte al feed RSS para el Blog de daisyUI o la daisyUI Store para obtener las últimas actualizaciones.

Una comunidad en crecimiento

Hay proyectos construidos sobre daisyUI como React daisyUI que es una biblioteca de componentes React sobre daisyUI. También hay Mary UI para Laravel y Livewire. Es muy emocionante ver más proyectos como estos en 2024. Si estás trabajando en un proyecto construido sobre daisyUI, házlo saber para que pueda añadirlo al pie de la página web de daisyUI.

Gracias colaboradores de daisyUI 💚

A principios de 2023, daisyUI tenía 89 colaboradores. Ahora tiene 162 colaboradores. Se está muy agradecido por todas las contribuciones y el apoyo de la comunidad. daisyUI es un proyecto comunitario que no sería posible sin la ayuda de todos los contribuyentes.

Contribuidores de daisyUI en Github

daisyUI tiene ahora 77 contribuyentes financieros que ayudan a mantener vivo el proyecto mediante donaciones en Open Collective. ¡Gracias a todos por vuestro apoyo!

Patrocinadores de daisyUI en Open Collective

¿Y ahora qué?

Se continuará la correción errores y la mejora de daisyUI. Hay un montón de cosas interesantes que vienen a CSS y Tailwind CSS en 2024 y vamos a utilizarlas todas en daisyUI. Habrá nuevos componentes, nuevos temas y nuevas características en 2024, además de muchas mejoras en los componentes existentes. ¡Hay mucha emoción por 2024 y espero que tú la tengas también!

Para contribuir a daisyUI, puedes empezar por leer la guía de contribución, y para informar de un error o solicitar una función, puedes abrir una nueva incidencia en GitHub.

Si tienes alguna pregunta, puedes hacerla en las discusiones de daisyUI.

¡Feliz año nuevo! 🎉

2023 fue un gran año para daisyUI y se está muy emocionado por todo lo que podemos lograr en 2024. Espero que tengas un gran año también y se te desea todo lo mejor en 2024.

🎁 Como regalo de año nuevo, utiliza el código de cupón YEAR2024 para obtener un 40% de descuento en todos los productos daisyUI en daisyUI Store.