Chez Studio123, on est constamment à la recherche de technologies de pointe pour améliorer la qualité de nos sites web et applications. Au cours des dernières années, on a commencé à adopter Strapi comme système de gestion de contenu (SGC) pour créer des applications modernes de type "headless". L'une des principales caractéristiques de Strapi est sa modularité. Les développeurs peuvent facilement étendre les fonctionnalités de Strapi en créant des plugins qui ajoutent de nouvelles fonctionnalités au système de gestion de contenu.
C'est pourquoi on a choisi Strapi pour notre nouveau site web. Bien que notre site précédent ait utilisé Gatsby pour la construction du front-end, on a décidé de tester une nouvelle approche. On a donc conservé Strapi comme système de gestion de contenu et remplacé le front-end par Next.js. Cependant, en passant à Next.js, on a perdu une fonctionnalité que notre équipe appréciait beaucoup : la génération de palettes de couleurs en tant qu'effet de chargement pour les images. Cette fonctionnalité était incluse dans Gatsby et fonctionnait parfaitement. Lorsqu’on a passé en revue le site avant son lancement, on a réalisé que cette fonctionnalité nous manquait.
On a donc décidé de créer un plugin pour ajouter cette fonctionnalité à Strapi. Grâce à notre expertise technique et à la modularité de Strapi, on a réussi à développer un plugin sur mesure qui a permis de combler cette lacune.
Qu'est-ce que l'open source?
Le terme "open source" fait référence à des logiciels dont le code source est accessible au public. Contrairement aux logiciels propriétaires, les utilisateurs ont la liberté d'utiliser, de modifier et de distribuer ces logiciels selon leurs besoins. Les logiciels open source sont souvent développés par une communauté de contributeurs qui travaillent ensemble pour améliorer le logiciel. L'avantage des logiciels open source est que la collaboration permet une innovation plus rapide et une meilleure qualité de code. Les logiciels open source sont souvent gratuits, mais certains sont vendus sous forme de services.
Notre équipe de développement utilise quotidiennement des logiciels open source pour construire des applications et sites web. On est fier de contribuer à cette communauté en créant notre propre plugin open source. On espère que notre contribution sera utile à d'autres développeurs et leur permettra de créer des applications encore meilleures.
Que fait ce plugin?
Le plugin @studio123/strapi-plugin-image-colour-palette est une extension très utile qui permet de générer automatiquement une palette de couleurs pour chaque image téléchargée sur Strapi. Cette fonctionnalité est rendue possible grâce à l'utilisation de GraphicsMagick, un outil qui permet d'extraire les couleurs dominantes d'une image. Le plugin utilise ces couleurs pour générer une palette de couleurs complète, qui est ensuite stockée dans la base de données de Strapi. Les développeurs peuvent alors facilement accéder à ces informations depuis le front-end de leur application et les utiliser pour améliorer la présentation de leur contenu.
Quels sont les avantages de ce plugin ?
Ce plugin est particulièrement utile pour les développeurs qui créent des applications nécessitant des données de couleur pour les images. Par exemple :
- Permettre aux utilisateurs de filtrer les produits d'une boutique en ligne par couleur, offrant ainsi une meilleure expérience utilisateur et facilitant la recherche de produits spécifiques.
- Afficher une couleur en guise d'espace réservé pour les images en cours de chargement, ce qui permet de réduire les temps de chargement perçus et d'améliorer l'apparence de la page en attendant le chargement complet de l'image (c'est ce qu'on fait sur studio123.ca)
- Utiliser les données de couleur pour accentuer le design d'un site web en harmonisant les couleurs de l'interface avec celles des images. Cela permet de renforcer l'identité visuelle de la marque et de rendre l'application plus attrayante pour les utilisateurs.
Comment installer le plugin ?
Pour installer et utiliser ce plugin, il suffit d'exécuter la commande suivante dans votre terminal à l'aide de yarn (ou npm) :
yarn add @studio123/strapi-plugin-image-color-palettePour plus de détails sur la façon d'activer et de configurer le plugin, rendez-vous sur le dépôt Github.
L'avenir de l'open source chez Studio123
Chez Studio123, on est fiers de contribuer à la communauté open source à travers Strapi et espérons que ce plugin sera utile à d'autres développeurs. On espère continuer à contribuer à cette communauté et de partager davantage de projets open source à l'avenir.
