Comments 12
Проблема была в том, что иногда анимация подвисала, дергалась, а на слабых ПК вообще отказывалась работать
Так, погоди-ка... Что-то здесь не так... В изначальном коде анимируется box shadow и padding, что потенциально очень плохо для производительности, а в конечном коде этого нет. Или мне Tailwind глаза съел и я этого не вижу. Кажется, что вы изменили суть анимации, но выдаете это за эффект от убирания GSAP. Живой пример до/после в студию!
Теперь компонент ГОТОВ :-)
Да, осталось выкинуть 'sticky bottom-8 top-[80vh] mx-auto mt-8 flex h-[56px] cursor-pointer items-center justify-between gap-[16px] rounded-[10px] px-4 py-[8px] shadow-md backdrop-blur-[3.5px] transition-all bg-[#424245]/70 opacity-1 w-[315px] delay-500 duration-1000', и вообще заживем. А потом мы вспомним былые времена, когда статичные кнопки, у которых даже текст не меняется, делались в виде отдельных чистых HTML, CSS и JS, безо всяких зависимостей, но это уже давно забытые технологии, это мы вряд ли осилим...
соглашусь, иногда мой код не слишком красивый)
а расскажи как лучше было бы сделать?
Мой комментарий больше не к вашему конкретному коду, а к трем тенденциям во фронтенде, которые сильно усугубились в последние годы - использование определенных классов инструментов там, где под них нет соответствующих задач, переусложнение решений для самых простых задач, и создание вырвиглазного винегрета в коде из всех языков сразу. Было время (лет 10-15 назад), когда мы все это уже видели в рамках PHP и классических "сайтов под ключ" на Wordpress. Простейшие задачи требовали очень много времени для решения. Именно не квалификации, а времени на разгребание всего. И теперь то болото из флешбеков приплыло к нам снова.
Ваш изначальный пример из статьи - хорошая иллюстрация ситуации, где все сложно, и не совсем понятно зачем. Ради простейшей кнопки используются:
Реактивный фреймворк, при этом реактивность по сути не задействована.
Передаются параметры компонентам, которые с учетом остальной логики не имеет смысла изначально куда-то выносить - опять же, возможности используются просто чтобы было.
Комплексный шаблонизатор, возможности которого по сути не используются.
Инлайновые стили генерируются и хардкодятся из скриптов. Древнее зло.
На это наложен подход с атомарными CSS-классами, которые десятками собираются в одной строке без какой-либо подсветки синтаксиса, скрадывая от глаз разные условия и обращения к другим элементам. Причем собственно система атомов сломана - все значения идут не из единой дизайн-системы, а хардкодятся на месте.
Ну и упомянутый вами GSAP тут тоже явно был избыточен.
Но это просто кнопка! С учетом того, что возможности инструментов не используются - тут могли бы быть 3 строки HTML, десяток-другой чистого красивого CSS, ну и щепотка JS, чтобы событие к скроллу привязать. Все. Вы что-то в коде изменили, но глобально он все так же сильно переусложнен относительно задачи.
Использовать web animations api, как по мне.
К слову, понадобилось как-то запустить Винду в эмуляторе. Ну казалось бы, какие проблемы, сколько-то памяти, 1 процессор, программа работает.
А вот браузер уже не работает, не справляется он со страницами, забитыми джаваскриптом. Нужно минимум 2 ядра чтобы хоть как-то шевелилось.
Это не к автору статьи претензии )
Поубирали загрузку с бекенда, рендеринг страниц, переложили всё на юзеров, "пусть у них тормозит".
Бизнес-логика прослеживается, "пусть юзер перелистает 30% контента", но юзер может и болт забить на сайт который тормозит и кнопок не показывает сходу. Верните простой HTML! )
Соглашусь с предыдущим спикером. Очень многие анимации проще реализовать на старом добром css, меньше ресурсов, меньше библиотек, но почему то технологии утеряны.
Не устаю писать это - я ненавижу Tailwind
Кнопка реализована тэгом Section? Ну ок, ок...
Самое главное, что хотел бы тебе сказать: нужно изначально делать свои компоненты так, "чтобы фронтенд разработчик в команде пользовался компонентом и ему не приходилось залазить в кишки". Компонент - это черный ящик, что-то даешь на вход, на выходе забираешь элемент с логикой. И уж точно не надо его абсолютно позиционировать, я б за такое по рукам бил 😁
1 - в таилвинд есть свои минусы, но иногда он очень помогает со стилизацией
2 - Section используется потому что это компонент с кнопкой которые принимает children и высчитывает высоту контейнера для анимации
3 - Логика скрыта с помощью контекста, а абсолютное позиционирование идет для иконки в кнопке, а сама кнопка через стики))
Как на примере одной кнопки можно улучшить Frontend часть проекта