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

• Apprendre le frontend et devenir 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 une pile technologique 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 également utiliser personnellement 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, etc.

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 qui sont un dépôt personnalisé ou 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. Réagir
2. Tailwind CSS
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, vous pouvez 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, le CSS de nos jours devient 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, ce qui est une autre devise pour utiliser plus 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 des commentaires, je suivrai certainement l'exemple.

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

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

Acclamations
Shrey