La publication annonce la sortie de Heroicons v2.1, qui comprend un tout nouveau style micro avec près de trois cents icônes 16x16, conçues pour des interfaces à forte densité comme celles du nouveau kit UI Catalyst. Les icônes ont été redessinées pour offrir une meilleure clarté à leur taille d'utilisation, optimisant ainsi l'expérience utilisateur des applications.
Catalyst est un kit d'interface utilisateur moderne et entièrement componentisé pour React, publié par Tailwind CSS. Il permet aux développeurs de créer des composants personnalisés sans dépendance externe, leur offrant la flexibilité de modifier les styles directement dans leur projet. Avec une attention particulière sur les détails visuels et l'expérience utilisateur, Catalyst s'adapte automatiquement aux modes sombre et clair et offre une API intuitive inspirée du HTML pour une intégration facile.
Tailwind CSS recrute un Ingénieur en Design et un Ingénieur Logiciel Senior pour des projets ambitieux. Les candidats travailleront sur la conception et le développement d'interfaces, ainsi que sur l'amélioration de bibliothèques comme Tailwind CSS et Headless UI. Les postes sont entièrement distants avec un salaire de 275,000 USD. Le travail inclut la création de composants, la documentation, et des innovations intégrées dans des outils comme Next.js et Vite.
La version 2.0 de Headless UI pour React apporte de nombreuses améliorations, notamment un positionnement d'ancre intégré, de nouveaux composants de case à cocher et de formulaires HTML, une détection améliorée des états de survol, de focus et d'activité, ainsi que la virtualisation des listes pour les combobox. La documentation a également été mise à jour et le site web a été revampé.
L'outil Catalyst a reçu une mise à jour majeure, ajoutant de nouveaux composants pour la gestion des layouts d'application, des menus de navigation et des listes de description. Avec la version 2.0 de Headless UI, Catalyst est désormais stable et prêt pour une utilisation en production. De nouveaux layouts sont présentés pour faciliter la structuration des projets, tout en supportant le mode sombre et en offrant des API simples pour une utilisation intuitive. La mise à jour inclut également des titres, des sous-titres, et des diviseurs pour améliorer l'esthétisme des applications.
La version 2.1 de Headless UI pour React simplifie les APIs de transition et permet de gérer plusieurs dialogues à la fois sans imbriquer leurs structures. Cela facilite l'ajout de styles de transition grâce à de nouveaux attributs de données, rendant le code plus léger et simple. Les utilisateurs peuvent désormais ouvrir des dialogues multiples simultanément dans leurs applications, ce qui améliore l'expérience utilisateur lorsqu'il y a des notifications ou erreurs à afficher.
SVAR Gantt pour React est un composant UI open-source qui facilite l'ajout de diagrammes de Gantt interactifs aux applications React, permettant une gestion efficace des tâches avec des fonctionnalités telles que la manipulation par glisser-déplacer, la gestion des dépendances et une personnalisation riche. Ce composant optimise le suivi des projets et permet aux utilisateurs de visualiser l'état d'avancement des tâches de manière fluide, tout en offrant une intégration simple avec n'importe quel backend via des requêtes REST.
Cet article propose un guide pour intégrer Google OAuth dans une application React. Il explique comment configurer un projet API Google, créer une application React utilisant Google Identity Services pour l'authentification, et établir une architecture backend avec Express pour vérifier les tokens d'utilisateur. Le processus comprend la création d'un nouvel API, l’installation d'authentification, et la sécurisation de l'application avec des vérifications côté serveur.
Cet article présente API Platform Admin, un générateur d'interfaces d'administration, mis en avant par Françoix Zaninotto lors de la conférence API Platform Conference 2024. Il souligne son utilisation simple et extensible, sa capacité à réutiliser les configurations existantes et son intégration avec react-admin pour offrir une interface moderne et réactive. L'article met l'accent sur les fonctionnalités au-delà des simples actions CRUD, rendant API Platform Admin un outil attractif pour les développeurs souhaitant personnaliser leurs interfaces.
L'article présente une approche en 5 étapes pour organiser les fichiers et dossiers dans les applications React, en commençant par un fichier unique pour le composant principal, puis en séparant les composants en plusieurs fichiers pour une meilleure gestion de la complexité croissante. Il aborde également l'utilisation de dossiers pour chaque composant afin de gérer les fichiers de styles et de tests, tout en mentionnant des considérations sur l'interface publique des modules.
