Будни разработчика
Блог Lead JS-разработчика Автор: @bekharsky По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv Чат: https://t.me/htmlshitchat №5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Показати більше📈 Аналітичний огляд Telegram-каналу Будни разработчика
Канал Будни разработчика (@htmlshit) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 14 309 підписників, посідаючи 8 905 місце в категорії Технології та додатки та 45 446 місце у регіоні Росія.
📊 Показники аудиторії та динаміка
З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 14 309 підписників.
За останніми даними від 26 жовтня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -118, а за останні 24 години на -8, загальне охоплення залишається високим.
- Статус верифікації: Не верифікований
- Рівень залученості (ER): Середній показник залученості аудиторії становить 9.73%. Протягом перших 24 годин після публікації контент зазвичай збирає 5.35% реакцій від загальної кількості підписників.
- Охоплення публікацій: В середньому кожен допис отримує 1 392 переглядів. Протягом першої доби публікація в середньому набирає 765 переглядів.
- Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 10.
- Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як css, api, scroll, --fade, bottom.
📝 Опис та контентна політика
Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Блог Lead JS-разработчика
Автор: @bekharsky
По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv
Чат: https://t.me/htmlshitchat
№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978”
Завдяки високій частоті оновлень (останні дані отримано 27 жовтня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.
overflow-y: scroll и scroll-snap-type: y mandatory. Внутри создаётся невидимая область прокрутки, а точки остановки задаются элементами с scroll-snap-align и CSS-переменной --snap. В результате панель перемещается вместе с прокруткой, а браузер самостоятельно обрабатывает жесты, инерцию и фиксацию в ближайшей точке. Никаких вычислений координат пальца на каждом pointermove и анимаций через requestAnimationFrame.
Для вложенного скролла применяется CSS Scroll-driven Animations. Через scroll-timeline и animation-timeline высота панели привязывается к положению внешнего скролла, а содержимое может прокручиваться независимо. Правда, анимация height вызывает перерасчёт layout, поэтому предусмотрена экспериментальная оптимизация с transform, при которой JavaScript вычисляет необходимые смещения в начале прокрутки.
Всё упаковано в Web Component, есть обёртки для React и Vue, поддерживаются нативные <dialog>, Popover API и SSR.
Ну и, конечно, не обошлось без Safari. Из-за бага WebKit пришлось добавлять невидимый горизонтальный overflow шириной в один пиксель, чтобы жесты прокрутки вообще нормально обрабатывались. Куда же без этого.
GitHub · Демо · Подробный технический разбор автора
#scroll #widgetcombobox. Но комбобокс предполагает выбор значения для поля ввода, а здесь мы выполняем команду. aria-autocomplete тоже не подходит: он предполагает определённое поведение списка подсказок, которого наше меню не обеспечивает.
В Base UI в итоге выбрали dialog, внутри которого находятся поле поиска и настоящее menu.
Но с семантикой разобрались — осталась клавиатура. Например, Home и End в текстовом поле перемещают курсор, а в меню — выделение. Стрелками нужно перемещаться между пунктами, сохраняя возможность продолжать печатать. Причём DOM-фокус остаётся в поле ввода, а активный пункт определяется через aria-activedescendant.
Отдельная история с подменю: если оно открылось при наведении мыши, нельзя сразу переводить фокус на его поле поиска. Пользователь мог просто провести указателем мимо.
И всё это ещё нужно проверить с VoiceOver, NVDA и TalkBack. Кстати, по ходу работы команда обнаружила несколько багов доступности даже в обычном компоненте Menu.
Ну что же, давайте снова поговорим о том, что AI избавит нас от необходимости писать код. Допустим, агент за минуту напишет весь JSX, фильтрацию и обработчики клавиатуры. Но кто-то всё равно должен определить, какое поведение мы вообще хотим получить, почему именно такое и соответствует ли оно ожиданиям пользователей.
Особенно тех, кто взаимодействует с интерфейсом не так, как его разработчик.
Отдельный вопрос, конечно, нельзя ли просто заменить все меню на одно обращение в чат.
В общем, очень рекомендую почитать разбор Base UI. Там много интересных деталей, о которых легко не задуматься, даже если весь код пишешь собственноручно.
А ещё обратите внимание, у них видеоиллюстрации отдельные для тёмной и светлой темы 🫠
#ui #a11y #ariahtmlshit
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446— какие вопросы и задачи даёт кандидатам на Frontend-собесах; — что в каждом ответе засчитал бы, а что нет — и почему.А в конце ответит на твои вопросы. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы! Участие бесплатное 🔥 Зарегаться на эфир можно в боте → @shortcut_front_bot Реклама. О рекламодателе.
@scene. Хотите куб? Пишите cube. Сферу? sphere. Трёхмерный бублик? torus. Можно назначить им классы и идентификаторы, расположить в пространстве и стилизовать привычными селекторами.
@scene {
sphere#ball;
}
#ball {
translate: 0 1 0;
color: #ff5a36;
material: glass(1.5, frosted 0.3);
animation: float 2s ease-in-out alternate;
}
@keyframes float {
from {
translate: 0 1 0;
}
to {
translate: 0 1.5 0;
}
}
А дальше начинается прекрасное. Тут есть каскад, специфичность, `!important`, `:nth-child()`, `:hover` и даже `:has()`. Последний позволяет, например, менять внешний вид куба при наведении на соседнюю сферу. Да, теперь можно три часа выяснять, почему CSS не красит бублик.
Материалы тоже описываются стилями: metal(), glass(), jelly(), iridescent(). Есть градиенты, текстуры, освещение, тени, туман и фильтры. Анимации задаются через @keyframes, работают переходы и управление сценой через прокрутку страницы.
Причём это не какая-то хитрая обёртка над Three.js. GSS компилирует сцену в GPU-шейдеры GLSL или WGSL, а геометрия строится через SDF (функции расстояния) и raymarching. Никаких привычных полигональных мешей — видеокарта сама вычисляет поверхности объектов при отрисовке.
У проекта есть интерактивная песочница, npm-пакет, интеграция с Vite и даже расширение для VS Code. Всё это пока экспериментальное, но вполне работающее.
Не знаю, кому пришло в голову, что трёхмерной графике не хватает CSS-каскада и проблем со специфичностью, но теперь я хочу увидеть, как кто-нибудь будет отлаживать сцену с сотней объектов и !important.
https://www.gss-lang.dev/
#3d #webgpu<LineChart>, <BarChart> и <PieChart>. График собирается из меток (marks), шкал (scales), осей (axes) и взаимодействий (interactions): можно начать с линии, добавить поверх точки, снизу столбцы, свои аннотации или вообще собственную метку (mark) — без поиска нового компонента под каждую комбинацию.
По умолчанию используется SVG, но тяжёлый слой можно отдельно перевести на Canvas, оставив оси, подписи и интерактивность в SVG. Canvas, анимации и более тяжёлые части не попадают в bundle, пока они действительно не понадобились.
Линсли пришёл к этой архитектуре после D3, работы над Chart.js 2.0 и собственного react-charts. Последний тоже со временем упёрся в ограничения заранее заданных видов графиков. Поэтому Charts построен ближе к Grammar of Graphics: визуализация складывается из отдельных частей, а не выбирается целиком из списка готовых типов.
Линсли пишет, что идеи для API копил около десяти лет, архитектуру и поведение проектировал сам, а почти всю реализацию отдал coding agents. Для Charts уже есть отдельный гайд по AI authoring — как агенту выбирать примитивы, проверять результат и не выдумывать несуществующие API. Собственный Skill через TanStack Intent тоже запланирован, но пока не выпущен.
В результате Charts рассчитан даже не столько на графики, это весьма решённая проблема, сколько на все придури вашего дизайнера :)
#charts #tanstack