Библиотека нативного HTML на деле работает на 40 JS-виджетах без остановки
Демо Jelly UI — кнопки, слайдеры и чекбоксы, которые при касании мнутся и колышутся как мягкая резина — в воскресенье почти весь день держалось в топе Hacker News. Затем создатель Semantic UI открыл инструменты разработчика и обнаружил, что движок анимации пересчитывает все 40 компонентов библиотеки каждые 8 миллисекунд — независимо от того, движется ли что-то на экране.
Библиотека — это 40 веб-компонентов без зависимостей: jelly-button, jelly-otp, jelly-range, jelly-dialog. Достаточно одного тега script. Тёмная тема, RTL-раскладка и цветовые токены WCAG AA — из коробки.
Ревьюер нашёл в OTP-поле на шесть ячеек известный антипаттерн и слишком мелкие зоны клика в пагинации. Но один читатель развернул критику: те же мягкие хитбоксы облегчают попадание по мелким кнопкам людям с проблемами мелкой моторики.
Что значит «физика мягкого тела» для сорока HTML-компонентов
Jelly UI называет себя «мягким, тактильным интерфейсом продукта», где «настоящие элементы форм встречаются с физикой мягкого тела». Весь эффект корректно отключается для тех, у кого стоит prefers-reduced-motion. На Hacker News демо за девять часов набрало больше 300 голосов в основном на обаянии — комментаторы называли его «абсолютным блаженством» и «до дурости креативным», — но другие сообщали, что эффект ломается или тормозит в зависимости от браузера и устройства: у одного комментатора всё работало в Chrome для Android, но не в десктопном Chrome или Firefox.
Анимационный цикл, который никогда не останавливается
Для некоторых обаяние не пережило взгляда под капот.
«Эта библиотека запускает RAF-цикл анимации каждые 8 мс для каждого компонента на странице, из-за чего перерисовывается весь документ... Вместо расчёта анимации только по событиям указателя JellyEngine пересчитывает каждый активный компонент на странице на каждом кадре». — Джек Лукич, создатель Semantic UI
Веб-консультант, который по работе занимается аудитом доступности и производительности, прошёлся по демо элемент за элементом:
«Для работы это требует JS, хотя этого можно было избежать ценой некоторых спорных компромиссов в эргономике. Лично я не назвал бы это нативными HTML-элементами форм — по-моему, для этого статуса нужно быть просто улучшением поверх обычных элементов». — консультант по Rust и веб-производительности, проверивший каждый компонент
Тот же обзор назвал шестизначное поле для одноразового пароля хрестоматийным антипаттерном, а у чекбокса не нашёл нормального промежуточного состояния.
Но реакции были не только критическими. Один комментатор на личном опыте развернул претензию в другую сторону:
«У меня плохая мелкая моторика рук. Попадание по современной мелкой цели обычно означает несколько кликов вокруг неё, пока случайным движением мыши я наконец не попаду куда нужно... Что-то вроде этого, где цель меняет форму, чтобы облегчить попадание или увеличить зону клика, было бы прекрасно». — комментатор, рассказавший о слабой мелкой моторике рук
Никто в треде не спорил, что Jelly UI обаятельна. Спор шёл о цене: 40 постоянно работающих циклов физики — забавная деталь личного блога, а та же щадящая поверхность на кнопке оформления заказа, реализованная эффективно, ближе к настоящей функции доступности, чем к трюку, если кто-то возьмётся сделать её именно так.
Получайте такие разборы каждый день
Главные истории Hacker News — на email, в Telegram или RSS.
Kimi K3 берёт $3 за миллион токенов — Томпсон видит риск не в этом
Когда Hugging Face расследовала собственный взлом в этом году, американские топовые модели отказались помогать: их защита от опасного контента приняла криминалистический анализ за саму атаку. В итоге расследование вели через китайскую модель — GLM-5.2 от Z.ai.