Пользовательский репозиторий iHateReading

За последний месяц я создал множество компонентов пользовательского интерфейса, которые являются реальными веб-компонентами, такими как кнопки, входы, формы, баннеры, галереи

Компоненты, созданные для нескольких целей

• Изучите интерфейс и станьте лучше в том, что я делаю
• Улучшите возможность писать более качественный код при фронтенд-разработке (позже я объясню, что это значит)

В настоящее время я занимаюсь техническим стеком или технологией — это responsejs вместе с next.js в качестве фреймворка, и я использую Tailwind CSS для стилизации и GSAP для анимации

Я могу использовать любой технологический стек, который не является проблемой, поэтому я начал с последней версии фреймворка и языка — реакции js с next.js

Далее мне нужно выбрать все компоненты, которые мне следует разработать, которые я смогу лично использовать в своих предстоящих реальных проектах, таких как форма оплаты, форма подписки, галерея изображений, кнопки и множество других компонентов пользовательского интерфейса. Компоненты заголовка и т. д.

iHateReading — это платформа, созданная разработчиком для разработчика, и последние 2 года я веду блоги, а также информационные бюллетени на ihatereading.in.

Сейчас подходящее время, чтобы внести некоторые новые изменения или новые функции, например, собственный репозиторий, собственный код или как бы вы это ни называли, чтобы вернуть суть этой платформы.

Теперь поговорим о том, из чего состоят эти компоненты. Все компоненты созданы с использованием следующих модулей

1. Reactjs
2. CSS попутного ветра
3. GSAP для анимации
4. Библиотека пользовательского интерфейса Mantine.dev (если требуется)

Я пытаюсь использовать безголовый компонент пользовательского интерфейса, что означает, что будут добавлены только функциональные возможности без каких-либо стилей или зависимостей от платформы, таким образом, многие разработчики могут легко скопировать и вставить код и использовать его напрямую для быстрой разработки.

Если во время разработки этих компонентов вы увидите первый компонент, которым я поделился на https://ihatereading.in/customrepo, и сравните его с новым или последним компонентом, вы легко сможете обнаружить разницу.

Меньше зависимостей, меньше JavaScript, больше оптимизированных и повторно используемых компонентов кода.

Вся заслуга принадлежит исследованию и блогу, который я провел в прошлом году: «Почему JavaScript снижает производительность веб-сайта?» потому что браузеру требуется больше времени для анализа JS по сравнению с CSS. Таким образом, сокращение JS также улучшит производительность сайта.

Кроме того, CSS в настоящее время становится настолько сильным, что для создания классной анимации на веб-сайте требуется совсем немного JS, и многие разработчики не уделяют этому особого внимания, что является еще одним девизом использования большего количества CSS > меньшего JS.

На данный момент добавлено 40 компонентов, и я работаю над дополнительными. Если у вас есть представление о том, какие компоненты, формы или инструменты я могу создать, добавьте их в раздел комментариев, я обязательно последую вашему примеру.

Я активно делюсь новостями о разработке компонентов в Twitter и LinkedIn, а также размещаю код на ihatereading.in/customrepo

Не стесняйтесь ознакомиться с ними и дайте мне знать, что еще добавить и создать.

Ваше здоровье
Шрей