Benutzerdefiniertes iHateReading-Repo

Im letzten Monat habe ich viele UI-Komponenten erstellt, die reale Webkomponenten sind, wie Schaltflächen, Eingaben, Formulare, Banner, Galerien

Komponenten für verschiedene Zwecke

• Frontend lernen und besser werden in dem, was ich tue
• Verbessern Sie die Fähigkeit, besseren Code in der Frontend-Entwicklung zu schreiben (was das bedeutet, erkläre ich später)

Ich beschäftige mich derzeit mit dem Tech-Stack oder die Technologie ist ReactJS zusammen mit Next.js als Framework und ich verwende Tailwind CSS für das Styling und GSAP für Animationen

Ich kann mit jedem Tech-Stack arbeiten, der kein Problem darstellt, also habe ich mit dem neuesten Framework und der Sprache „reactjs“ mit next.js begonnen

Als nächstes muss ich alle Komponenten auswählen, die ich entwickeln soll und die ich persönlich auch in meinen bevorstehenden realen Projekten verwenden kann, wie z. B. Zahlungsformular, Abonnementformular, Bildergalerie, Schaltflächen und viele andere UI-Komponenten. Header-Komponenten usw.

iHateReading ist eine Plattform von einem Entwickler für einen Entwickler und seit zwei Jahren teile ich Blogs und Newsletter auf ihatereading.in.

Dies ist der richtige Zeitpunkt, um einige neue Änderungen oder neue Funktionen einzuführen, z. B. benutzerdefiniertes Repo oder benutzerdefinierten Code oder wie auch immer Sie es nennen möchten, um das zurückzubringen, worum es bei dieser Plattform geht.

Nun kommt, woraus diese Komponenten bestehen. Alle Komponenten werden mit den folgenden Modulen hergestellt

1. Reactjs
2. Tailwind CSS
3. GSAP für Animation
4. Mantine.dev UI-Bibliothek (falls erforderlich)

Ich versuche, eine Headless-UI-Komponente zu verwenden, was bedeutet, dass nur Funktionalität ohne Stil- oder Framework-Abhängigkeit hinzugefügt wird. Auf diese Weise können viele Entwickler den Code einfach kopieren und einfügen und ihn direkt verwenden, um schnell zu entwickeln.

Wenn Sie während der Entwicklung dieser Komponenten die erste Komponente sehen, die ich auf https://ihatereading.in/customrepo geteilt habe, und sie mit der neuen oder neuesten Komponente vergleichen, können Sie den Unterschied leicht feststellen.

Weniger Abhängigkeiten, weniger Javascript und mehr optimierte und wiederverwendbare Codekomponenten.

Der ganze Dank geht an die Recherche und den Blog, die ich letztes Jahr gemacht habe: Warum verringert JavaScript die Website-Leistung? weil der Browser im Vergleich zu CSS viel Zeit zum Parsen von JS benötigt. Durch die Reduzierung von JS wird auch die Leistung der Website verbessert.

Darüber hinaus wird CSS heutzutage so stark, dass sehr wenig JS erforderlich ist, um coole Animationen auf die Website zu bringen, und viele Entwickler schenken ihm nicht viel Aufmerksamkeit, was ein weiteres Motto für die Verwendung von mehr CSS > weniger JS ist.

Bisher wurden 40 Komponenten hinzugefügt und ich arbeite an weiteren. Wenn Sie eine Vorstellung davon haben, welche Art von Komponenten, Formen oder Werkzeugen ich herstellen kann, fügen Sie sie im Kommentarbereich hinzu. Ich werde dem Beispiel auf jeden Fall folgen.

Ich teile die Neuigkeiten zur Komponentenentwicklung aktiv auf Twitter und LinkedIn und veröffentliche den Code auf ihatereading.in/customrepo

Schauen Sie sich diese gerne an und lassen Sie mich wissen, was ich noch hinzufügen und erstellen kann.

Prost
Shrey