iHateReading カスタム リポジトリ

ここ 1 か月間、ボタン、入力、フォーム、バナー、ギャラリーなど、現実世界の Web コンポーネントである UI コンポーネントをたくさん作成してきました

いくつかの目的のために作成されたコンポーネント

• フロントエンドを学び、自分の仕事がより上手になります
• フロントエンド開発でより良いコードを書く能力を向上させる (これが何を意味するかについては後ほど説明します)

私は現在テクノロジースタックまたはテクノロジーをreactjsとフレームワークとしてnext.jsを使用しており、スタイリングにはTailwind CSSを、アニメーションにはGSAPを使用しています

問題にならない技術スタックであればどれでも使用できるため、最新のフレームワークと言語は next.js を使用した Reactjs から始めました

次に、支払いフォーム、購読フォーム、画像ギャラリー、ボタン、その他多くの UI コンポーネントなど、今後の現実世界のプロジェクトでも個人的に使用できる、開発すべきすべてのコンポーネントを選択する必要があります。ヘッダーコンポーネントなど。

iHateReading は開発者による開発者のためのプラットフォームで、私は過去 2 年間、ihatereading.in でブログやニュースレターを共有してきました。

これは、このプラットフォームの本質を取り戻すために、カスタム リポジトリやカスタム コードなど、任意の名前で呼ばれるいくつかの新しい変更や新機能を導入する適切な時期です。

次に、これらのコンポーネントが何で構成されているかを説明します。すべてのコンポーネントは次のモジュールを使用して作成されます

1. Reactjs
2. テイルウィンドCSS
3. アニメーション用の GSAP
4. Mantine.dev UI ライブラリ (必要な場合)

私はヘッドレス UI コンポーネントを選択しようとしています。これは、多くの開発者が簡単にコードをコピーアンドペーストし、それを直接使用して迅速に開発できるようにするため、スタイルやフレームワークの依存関係なしで機能のみが追加されることを意味します。

これらのコンポーネントを開発しているときに、https://ihatereading.in/customrepo で共有した最初のコンポーネントを見て、新しいコンポーネントまたは最新のコンポーネントと比較すると、違いを簡単に見つけることができます。

JavaScript の依存関係が減り、コード コンポーネントがより最適化され、再利用可能になります。

昨年行った調査とブログ「JavaScript が Web サイトのパフォーマンスを低下させるのはなぜですか?」にすべての功績があります。これは、ブラウザが JS を解析するのに CSS に比べて時間がかかるためです。これにより、JS を削減することで Web サイトのパフォーマンスも向上します。

さらに、最近の CSS は非常に強力になってきているため、Web サイトにクールなアニメーションを組み込むのに必要な JS はほとんどありませんが、多くの開発者はそれにあまり注意を払っていません。これが、JS よりも多くの CSS を使用するもう 1 つのモットーです。

これまでに 40 のコンポーネントが追加されており、さらに作業中です。どのような種類のコンポーネント、フォーム、ツールを作成できるかについてのアイデアがあれば、コメント セクションに追加してください。私も必ずそのリードに従います。

ihatereading.in/customrepo にコードをプッシュするだけでなく、コンポーネント開発のニュースを Twitter や LinkedIn で積極的に共有しています

お気軽にチェックして、さらに何を追加したり作成したりするかをお知らせください。

乾杯
シュリー