Composants de l'interface utilisateur frontale

Dépôt personnalisé iHateReading

Au cours du mois dernier, j'ai créé de nombreux composants d'interface utilisateur qui sont des composants Web réels tels que des boutons, des entrées, des formulaires, des bannières, des galeries

Composants conçus à plusieurs fins

• Apprenez le frontend et devenez meilleur dans ce que je fais
• Améliorer la capacité d'écrire un meilleur code dans le développement frontend (j'expliquerai plus tard ce que cela signifie)

Je suis actuellement tech stack ou la technologie est Reactjs avec next.js comme framework et j'utilise Tailwind CSS pour le style et GSAP pour l'animation

Je peux utiliser n'importe quelle pile technologique qui ne pose pas de problème, j'ai donc commencé avec le dernier framework et le langage est Reactjs avec next.js

Ensuite, je dois choisir tous les composants que je dois développer et que je peux personnellement utiliser également dans mes prochains projets réels tels que le formulaire de paiement, le formulaire d'abonnement, la galerie d'images, les boutons, de nombreux autres composants d'interface utilisateur, Composants d'en-tête et ainsi de suite.

iHateReading est une plateforme créée par un développeur pour un développeur et depuis 2 ans, je partage des blogs ainsi que des newsletters sur ihatereading.in.

C'est le bon moment pour introduire de nouveaux changements ou de nouvelles fonctionnalités, qu'il s'agisse d'un dépôt personnalisé ou d'un code personnalisé ou peu importe comment vous voulez l'appeler, pour ramener ce qu'est cette plate-forme.

Vient maintenant de quoi sont constitués ces composants, tous les composants sont réalisés à l'aide des modules suivants

1. Reactjs
2. CSS Tailwind
3. GSAP pour l'animation
4. Bibliothèque d'interface utilisateur Mantine.dev (si nécessaire)

J'essaie d'opter pour un composant d'interface utilisateur sans tête, ce qui signifie que seules les fonctionnalités seront ajoutées sans aucune dépendance de style ou de framework, de cette manière, de nombreux développeurs peuvent facilement copier-coller le code et l'utiliser directement pour développer rapidement.

Lors du développement de ces composants, si vous voyez le premier composant que j'ai partagé sur https://ihatereading.in/customrepo et que vous le comparez avec le nouveau ou le dernier composant, on peut facilement trouver la différence.

Moins de dépendances, moins de javascript et des composants de code plus optimisés et réutilisables.

Tout le mérite revient à la recherche et au blog que j'ai réalisés l'année dernière. Pourquoi JavaScript réduit les performances du site Web ? car le navigateur prend beaucoup de temps pour analyser JS par rapport à CSS. Ainsi, la réduction de JS améliorera également les performances du site Web.

De plus, CSS devient aujourd'hui si fort que très peu de JS est nécessaire pour apporter des animations sympas au site Web et beaucoup de développeurs n'y prêtent pas beaucoup d'attention, c'est une autre devise pour utiliser davantage de CSS > moins de JS.

40 composants ont été ajoutés jusqu'à présent et je travaille sur d'autres, si vous avez une idée du type de composants, de formulaires ou d'outils que je peux créer, ajoutez-les dans la section commentaires, je suivrai certainement l'exemple.

Je partage activement l'actualité du développement de composants sur Twitter et LinkedIn et je diffuse le code sur ihatereading.in/customrepo

N'hésitez pas à les consulter et à me dire ce que je dois ajouter et créer de plus.

Bravo
Shrey

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!