✨ Agent Plugins
Вышла спецификация Agent Plugins 1.0.0 — открытый, независимый от вендоров формат упаковки Agent Skills и MCP-серверов в переносимые плагины. Ее развивают мейнтейнеры из Amazon, Cursor, Microsoft, OpenAI, Vercel, а теперь и Google.
Раньше для каждого клиента приходилось создавать свои обертки и манифесты. Теперь плагин представляет собой универсальную директорию с фиксированной структурой. Написали один раз, и его можно использовать в разных клиентах.
Похоже, экосистема AI-агентов постепенно движется к общим стандартам, а не закрытым форматам.
👉 https://developers.googleblog.com/agent-plugins-package-your-skills-tools-and-more/
Вышла спецификация Agent Plugins 1.0.0 — открытый, независимый от вендоров формат упаковки Agent Skills и MCP-серверов в переносимые плагины. Ее развивают мейнтейнеры из Amazon, Cursor, Microsoft, OpenAI, Vercel, а теперь и Google.
Раньше для каждого клиента приходилось создавать свои обертки и манифесты. Теперь плагин представляет собой универсальную директорию с фиксированной структурой. Написали один раз, и его можно использовать в разных клиентах.
Похоже, экосистема AI-агентов постепенно движется к общим стандартам, а не закрытым форматам.
👉 https://developers.googleblog.com/agent-plugins-package-your-skills-tools-and-more/
👍10🤮7🔥4❤1🥴1🆒1
✨ От парсинга DOM к контрактам: понимание WebMCP
Сейчас агенты гадают по DOM и скриншотам, пытаясь понять, что за кнопка перед ними: кликают, ждут, перепроверяют. Это медленно, дорого по токенам и хрупко. Любой редизайн или A/B-тест может сломать всю цепочку действий.
Идея WebMCP в том, чтобы перевернуть эту логику. Страница сама объявляет свои возможности, как набор именованных инструментов с описанием и типизированной схемой, вместо того, чтобы агент реверс-инжинирил интерфейс методом проб и ошибок.
И Angular v22 уже стал первым крупным фреймворком с экспериментальной поддержкой WebMCP из коробки.
👉 https://angular.love/from-dom-scraping-to-contracts-understanding-webmcp-part-1
Сейчас агенты гадают по DOM и скриншотам, пытаясь понять, что за кнопка перед ними: кликают, ждут, перепроверяют. Это медленно, дорого по токенам и хрупко. Любой редизайн или A/B-тест может сломать всю цепочку действий.
Идея WebMCP в том, чтобы перевернуть эту логику. Страница сама объявляет свои возможности, как набор именованных инструментов с описанием и типизированной схемой, вместо того, чтобы агент реверс-инжинирил интерфейс методом проб и ошибок.
И Angular v22 уже стал первым крупным фреймворком с экспериментальной поддержкой WebMCP из коробки.
👉 https://angular.love/from-dom-scraping-to-contracts-understanding-webmcp-part-1
👍9🤮6🔥1🤩1🐳1💅1
✨ Размытая граница между состояниями CSS и событиями JavaScript
CSS все чаще берет на себя то, что раньше делал только JavaScript. Реагирует на состояния, которые почти неотличимы от событий. Граница между псевдоклассами и обработчиками событий становится все более размытой.
В статье разбираются примеры такого пересечения, а также рассматривается экспериментальный event-trigger, будущий механизм, который может позволить запускать CSS-анимации в ответ на события.
👉 https://habr.com/ru/companies/timeweb/articles/1059272/
CSS все чаще берет на себя то, что раньше делал только JavaScript. Реагирует на состояния, которые почти неотличимы от событий. Граница между псевдоклассами и обработчиками событий становится все более размытой.
В статье разбираются примеры такого пересечения, а также рассматривается экспериментальный event-trigger, будущий механизм, который может позволить запускать CSS-анимации в ответ на события.
👉 https://habr.com/ru/companies/timeweb/articles/1059272/
👍8😁4👏1🤔1
✨ 3 хорошие привычки начинающего фронтендера
Хороший фронтендер думает не только о коде, но и о том, как пользователь будет взаимодействовать с интерфейсом. Именно такие привычки помогают делать сайты удобнее и доступнее.
Статья для начинающих о простых, но важных привычках верстки, которые делают интерфейс удобнее для пользователя, независимо от стека.
В ней Стас Мельников показывает, что даже без глубокого дизайнерского бэкграунда можно заметно улучшить UX, если обращать внимание на детали, которые часто упускают.
👉 https://habr.com/ru/companies/ruvds/articles/1066724/
Хороший фронтендер думает не только о коде, но и о том, как пользователь будет взаимодействовать с интерфейсом. Именно такие привычки помогают делать сайты удобнее и доступнее.
Статья для начинающих о простых, но важных привычках верстки, которые делают интерфейс удобнее для пользователя, независимо от стека.
В ней Стас Мельников показывает, что даже без глубокого дизайнерского бэкграунда можно заметно улучшить UX, если обращать внимание на детали, которые часто упускают.
👉 https://habr.com/ru/companies/ruvds/articles/1066724/
👍7❤2😁2👏1🤔1
✨ Angular Signal Forms: пользовательские контролы без ControlValueAccessor
Создание кастомных элементов управления формами в Angular долгие годы требовало написания громоздкого ControlValueAccessor. С выходом Angular 22 и стабилизацией Signal Forms этот процесс кардинально упростился. Теперь для интеграции компонента с формой достаточно использовать интерфейс FormValueControl.
В статье пошагово разбирается процесс разработки современного кастомного контрола без лишнего бойлерплейта.
👉 https://angularexperts.io/blog/angular-signal-forms-custom-controls
Создание кастомных элементов управления формами в Angular долгие годы требовало написания громоздкого ControlValueAccessor. С выходом Angular 22 и стабилизацией Signal Forms этот процесс кардинально упростился. Теперь для интеграции компонента с формой достаточно использовать интерфейс FormValueControl.
В статье пошагово разбирается процесс разработки современного кастомного контрола без лишнего бойлерплейта.
👉 https://angularexperts.io/blog/angular-signal-forms-custom-controls
👍12😁6❤4🔥3👏3🤔3🌭2🤓1
✨ Эволюция форм
Angular давно ассоциируется с DI, роутингом и в последнее время сигналами. Но есть менее заметная, зато критически важная часть фреймворка, которая работает в каждом серьезном приложении, формы.
Именно через них пользователь взаимодействует с бизнес-логикой. И мало кто задумывается, насколько сильно API форм менялся за последние 15 лет, вместе с самой философией фреймворка.
Статья прослеживает эволюцию форм, от AngularJS с его двусторонним связыванием, через template-driven подходы и эпоху реактивных форм, до появления Signal Forms как нового стандарта.
👉 https://www.codemag.com/Article/264041/From-Template-Driven-to-Signal-Driven-The-Complete-Evolution-of-Angular-Forms
Angular давно ассоциируется с DI, роутингом и в последнее время сигналами. Но есть менее заметная, зато критически важная часть фреймворка, которая работает в каждом серьезном приложении, формы.
Именно через них пользователь взаимодействует с бизнес-логикой. И мало кто задумывается, насколько сильно API форм менялся за последние 15 лет, вместе с самой философией фреймворка.
Статья прослеживает эволюцию форм, от AngularJS с его двусторонним связыванием, через template-driven подходы и эпоху реактивных форм, до появления Signal Forms как нового стандарта.
👉 https://www.codemag.com/Article/264041/From-Template-Driven-to-Signal-Driven-The-Complete-Evolution-of-Angular-Forms
👍10👏5😁5❤3🤔3🔥2
✨ Ленивая загрузка сервисов в Angular 22
Angular давно поддерживает ленивую загрузку, но до недавнего времени она хорошо работала только для роутов и компонентов. Сервисы оставались пробелом. Сервис, зарегистрированный в корневом инжекторе, попадал в основной бандл и оставался там, даже если код, который его использует, никто не вызывал.
Angular 22 закрывает эту брешь с помощью injectAsync, который загружает сервис только при первом запросе его инстанса.
В этой статье детально разбирается, как работает новый API, что он требует от разработчика и в каких случаях окупается.
👉 https://angular.love/lazy-loading-services-in-angular-22
Angular давно поддерживает ленивую загрузку, но до недавнего времени она хорошо работала только для роутов и компонентов. Сервисы оставались пробелом. Сервис, зарегистрированный в корневом инжекторе, попадал в основной бандл и оставался там, даже если код, который его использует, никто не вызывал.
Angular 22 закрывает эту брешь с помощью injectAsync, который загружает сервис только при первом запросе его инстанса.
В этой статье детально разбирается, как работает новый API, что он требует от разработчика и в каких случаях окупается.
👉 https://angular.love/lazy-loading-services-in-angular-22
🔥17❤3👏2👍1👎1😁1🤔1
✨ Хайп вокруг ИИ: реальное состояние дел и будущее
Это расшифровка доклада Ричарда Кэмпбелла, канадского разработчика и технического обозревателя. Скорее исторический обзор того, как развивался ИИ и откуда взялся нынешний хайп.
Он вспоминает главные этапы развития технологии, от первых экспериментов до ChatGPT, и разбирается, почему вокруг ИИ столько шума, денег и громких обещаний.
При этом он не считает ИИ пустышкой и показывает примеры, где технология действительно приносит пользу, например в программировании и биологии.
В общем, это спокойный взгляд на ИИ без лишнего восторга и паники.
👉 https://habr.com/ru/articles/1072298/
Это расшифровка доклада Ричарда Кэмпбелла, канадского разработчика и технического обозревателя. Скорее исторический обзор того, как развивался ИИ и откуда взялся нынешний хайп.
Он вспоминает главные этапы развития технологии, от первых экспериментов до ChatGPT, и разбирается, почему вокруг ИИ столько шума, денег и громких обещаний.
При этом он не считает ИИ пустышкой и показывает примеры, где технология действительно приносит пользу, например в программировании и биологии.
В общем, это спокойный взгляд на ИИ без лишнего восторга и паники.
👉 https://habr.com/ru/articles/1072298/
👍9👏2😁2❤1🔥1
✨ Playwright для компонентных CAT-тестов
Когда говорят о тестах на Playwright, чаще всего имеют в виду e2e. Открыть приложение, пройти авторизацию, поработать с несколькими страницами и проверить сценарий целиком. Но в больших проектах быстро становится ясно, что e2e это долго, дорого и хрупко.
В статье же его предлагают использовать на уровне отдельных компонентов. Тесты запускаются в реальном браузере, а окружение компонента изолируется с помощью Storybook. В результате получается тест, который видит верстку как настоящий пользователь, ловит баги, но при этом остается быстрым, изолированным и предсказуемым.
👉 https://habr.com/ru/articles/1072918/
Когда говорят о тестах на Playwright, чаще всего имеют в виду e2e. Открыть приложение, пройти авторизацию, поработать с несколькими страницами и проверить сценарий целиком. Но в больших проектах быстро становится ясно, что e2e это долго, дорого и хрупко.
В статье же его предлагают использовать на уровне отдельных компонентов. Тесты запускаются в реальном браузере, а окружение компонента изолируется с помощью Storybook. В результате получается тест, который видит верстку как настоящий пользователь, ловит баги, но при этом остается быстрым, изолированным и предсказуемым.
👉 https://habr.com/ru/articles/1072918/
🤔8👍5🔥1👏1😁1
✨ Как мы превратили API-контракт в отдельный артефакт и сократили генерацию клиента с 15 минут до нескольких секунд
Если вы когда-нибудь ловили баги из-за того, что бэкендер незаметно переименовал поле, эта статья будет особенно полезной.
В ней описывается типичная проблема, когда кодогенерация API-контракта занимала слишком много времени и создавала монолитный файл на кучу строк кода, а фронтенд узнавал об изменениях контракта слишком поздно, когда UI уже ломался.
Решением стало хранение OpenAPI-схем в Git. Бэкенд экспортирует JSON при локальном запуске, а фронт перешел на ng-openapi-gen, разбивающий код на модульные функции.
В итоге время сборки сократилось до нескольких секунд, а фронтендеры могут проверять понятный diff контракта до мержа, блокируя любые сюрпризы еще на этапе разработки.
👉 https://habr.com/ru/companies/tbank/articles/1069174/
Если вы когда-нибудь ловили баги из-за того, что бэкендер незаметно переименовал поле, эта статья будет особенно полезной.
В ней описывается типичная проблема, когда кодогенерация API-контракта занимала слишком много времени и создавала монолитный файл на кучу строк кода, а фронтенд узнавал об изменениях контракта слишком поздно, когда UI уже ломался.
Решением стало хранение OpenAPI-схем в Git. Бэкенд экспортирует JSON при локальном запуске, а фронт перешел на ng-openapi-gen, разбивающий код на модульные функции.
В итоге время сборки сократилось до нескольких секунд, а фронтендеры могут проверять понятный diff контракта до мержа, блокируя любые сюрпризы еще на этапе разработки.
👉 https://habr.com/ru/companies/tbank/articles/1069174/
👍10😁2🔥1
✨ Не скрамом единым: 10 нетривиальных концепций управления проектом
Классический подход к управлению проектами часто опирается на точные оценки, подробные планы, контроль и стремление довести начатое до конца. Но современные концепции всё чаще предлагают взглянуть на эти привычные принципы критически.
Статья предлагает взглянуть на управление проектами с неожиданной стороны, через подходы, которые идут вразрез с привычными представлениями.
Почему иногда проект лучше не начинать? Зачем закрывать уже запущенные проекты? Всегда ли нужны оценки сроков и максимальная загрузка команды? И может ли меньше контроля сделать управление эффективнее?
👉 https://habr.com/ru/articles/1073456/
Классический подход к управлению проектами часто опирается на точные оценки, подробные планы, контроль и стремление довести начатое до конца. Но современные концепции всё чаще предлагают взглянуть на эти привычные принципы критически.
Статья предлагает взглянуть на управление проектами с неожиданной стороны, через подходы, которые идут вразрез с привычными представлениями.
Почему иногда проект лучше не начинать? Зачем закрывать уже запущенные проекты? Всегда ли нужны оценки сроков и максимальная загрузка команды? И может ли меньше контроля сделать управление эффективнее?
👉 https://habr.com/ru/articles/1073456/
👍4❤1🔥1👏1😁1🤔1
✨ Полное руководство по Signal Forms
Тема новых форм в Angular уже не раз обсуждалась, но с релизом 22-й версии они официально перешел в статус stable.
В статье масштабный разбор финального API, который подводит черту под периодом превью и показывает, как архитектура форм была переосмыслена.
👉 https://angular.love/signal-forms-in-angular-21-complete-guide
Тема новых форм в Angular уже не раз обсуждалась, но с релизом 22-й версии они официально перешел в статус stable.
В статье масштабный разбор финального API, который подводит черту под периодом превью и показывает, как архитектура форм была переосмыслена.
👉 https://angular.love/signal-forms-in-angular-21-complete-guide
👍13❤2😁2👏1🤔1
✨ Оптимизация бандла Angular
Переход Angular на новую систему сборки на базе esbuild существенно ускорил процесс разработки, однако породил скрытый компромисс в производительности.
Статья разбирает проблему чрезмерной фрагментации бандла, которая приводит к заметному замедлению загрузки приложений у конечных пользователей.
👉 https://push-based.io/article/faster-builds-slower-applications-optimizing-angulars-bundle-output
Переход Angular на новую систему сборки на базе esbuild существенно ускорил процесс разработки, однако породил скрытый компромисс в производительности.
Статья разбирает проблему чрезмерной фрагментации бандла, которая приводит к заметному замедлению загрузки приложений у конечных пользователей.
👉 https://push-based.io/article/faster-builds-slower-applications-optimizing-angulars-bundle-output
👍8🔥5❤2😁2
✨ Как ChatGPT создал Культ Роя для сотен AI-нейросетей
Наверняка вы уже слышали о недавнем инциденте с агентами, которые во время тестирования объединились между собой и в итоге атаковали Hugging Face.
Недавно вышло независимое расследование METR и OpenAI наконец-то опубликовали собственный подробный разбор произошедшего.
На этом фоне статья подробно разбирает всю историю. Как сотни агентов нашли способ общаться друг с другом, сформировали своеобразный рой, выработали собственные правила и в итоге скоординировали атаку.
Интересен не сам взлом, сколько то, как агенты начали коллективно действовать, передавать друг другу идеи и выходить за рамки первоначальной задачи.
История выглядит почти как сюжет научной фантастики, но основана на реальных логах и расследованиях.
👉 https://habr.com/ru/companies/ods/articles/1075370/
Наверняка вы уже слышали о недавнем инциденте с агентами, которые во время тестирования объединились между собой и в итоге атаковали Hugging Face.
Недавно вышло независимое расследование METR и OpenAI наконец-то опубликовали собственный подробный разбор произошедшего.
На этом фоне статья подробно разбирает всю историю. Как сотни агентов нашли способ общаться друг с другом, сформировали своеобразный рой, выработали собственные правила и в итоге скоординировали атаку.
Интересен не сам взлом, сколько то, как агенты начали коллективно действовать, передавать друг другу идеи и выходить за рамки первоначальной задачи.
История выглядит почти как сюжет научной фантастики, но основана на реальных логах и расследованиях.
👉 https://habr.com/ru/companies/ods/articles/1075370/
🤡11🤯4👍3🔥3🤔2👏1😁1😱1🕊1
✨ Инженеры OpenAI не смогли объяснить код, который нейросеть сгенерировала для кернела AI‑ускорителя Jalapeño
Часть низкоуровневого кода для ускорителя была сгенерирована Codex, и команда понимает, как он работает в целом, но не может построчно объяснить его логику.
При этом код оказался достаточно эффективным и прошел тестирование.
Этот случай хорошо иллюстрирует новую модель разработки. Человек задает архитектуру и критерии результата, а нейросеть самостоятельно ищет и оптимизирует реализацию.
А как вы считаете, станет ли нормой код, который работает, но который никто не понимает?
👉 https://habr.com/ru/news/1076906/
Часть низкоуровневого кода для ускорителя была сгенерирована Codex, и команда понимает, как он работает в целом, но не может построчно объяснить его логику.
При этом код оказался достаточно эффективным и прошел тестирование.
Этот случай хорошо иллюстрирует новую модель разработки. Человек задает архитектуру и критерии результата, а нейросеть самостоятельно ищет и оптимизирует реализацию.
А как вы считаете, станет ли нормой код, который работает, но который никто не понимает?
👉 https://habr.com/ru/news/1076906/
😁15🤡11🤔6👍3❤2⚡1🔥1😢1🌚1🫡1
✨ Быстрая настройка Angular Aria Tabs с помощью Google Antigravity CLI
Статья рассматривает практический эксперимент с Angular Aria. Насколько далеко можно уйти от стандартного оформления компонентов, сохранив их доступность.
В качестве примера автор значительно изменяет внешний вид обычных вкладок и проверяет результат с помощью Lighthouse.
👉 https://blog.angular.dev/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-39ff8e0271a4
Статья рассматривает практический эксперимент с Angular Aria. Насколько далеко можно уйти от стандартного оформления компонентов, сохранив их доступность.
В качестве примера автор значительно изменяет внешний вид обычных вкладок и проверяет результат с помощью Lighthouse.
👉 https://blog.angular.dev/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-39ff8e0271a4
👍7❤4🔥3👏2😁2🤔2
✨ Куда уходит время
Девять месяцев автор записывал, чем занимается в течение дня.
За это время стало понятнее, какие задачи постоянно занимают больше времени, чем казалось. Причем речь не только о работе, он отслеживал и часть личных дел.
Но больше часов и задач не всегда означают лучший результат. Иногда дело не в нехватке времени, а в том, как мы его используем. А чтобы понять, куда оно уходит, приходится сначала потратить время на его учет.
Интересно, а вы используете какие-нибудь свои способы следить за временем?
👉 https://habr.com/ru/articles/1076320/
Девять месяцев автор записывал, чем занимается в течение дня.
За это время стало понятнее, какие задачи постоянно занимают больше времени, чем казалось. Причем речь не только о работе, он отслеживал и часть личных дел.
Но больше часов и задач не всегда означают лучший результат. Иногда дело не в нехватке времени, а в том, как мы его используем. А чтобы понять, куда оно уходит, приходится сначала потратить время на его учет.
Интересно, а вы используете какие-нибудь свои способы следить за временем?
👉 https://habr.com/ru/articles/1076320/
😁4👍1
✨ GPT-6 Astra
OpenAI представила GPT-6 Astra, которая делает заметный акцент не только на качестве ответов, но и на способности самостоятельно выполнять сложные многошаговые задачи.
Модель может планировать последовательность действий, использовать необходимые инструменты, проверять промежуточные результаты и доводить сложные задачи до готового результата, практически не требуя постоянного участия человека.
Отдельное внимание уделено безопасности. Astra демонстрирует значительно более высокие возможности в кибербезопасности, поэтому OpenAI одновременно усиливает ограничения и мониторинг.
👉 https://openai.com/index/gpt-6-astra/
OpenAI представила GPT-6 Astra, которая делает заметный акцент не только на качестве ответов, но и на способности самостоятельно выполнять сложные многошаговые задачи.
Модель может планировать последовательность действий, использовать необходимые инструменты, проверять промежуточные результаты и доводить сложные задачи до готового результата, практически не требуя постоянного участия человека.
Отдельное внимание уделено безопасности. Astra демонстрирует значительно более высокие возможности в кибербезопасности, поэтому OpenAI одновременно усиливает ограничения и мониторинг.
👉 https://openai.com/index/gpt-6-astra/
🥱20🔥2❤1👍1
✨ Как мы внедрили Knip в Angular-проект
По мере роста проекта в кодовой базе неизбежно накапливается мертвый код, неиспользуемые зависимости, файлы, экспорты и старые компоненты. В небольшом проекте это можно убрать вручную, но в крупном такой подход быстро перестает работать.
В статье разбирается практический опыт внедрения Knip в крупный nx workspace проект с большим количеством библиотек.
В результате удалось удалить сотни неактуальных файлов, сократить количество зависимостей и, главное, автоматизировать контроль за мертвым кодом, чтобы он не накапливался дальше.
👉 https://habr.com/ru/companies/tbank/articles/1078438/
По мере роста проекта в кодовой базе неизбежно накапливается мертвый код, неиспользуемые зависимости, файлы, экспорты и старые компоненты. В небольшом проекте это можно убрать вручную, но в крупном такой подход быстро перестает работать.
В статье разбирается практический опыт внедрения Knip в крупный nx workspace проект с большим количеством библиотек.
В результате удалось удалить сотни неактуальных файлов, сократить количество зависимостей и, главное, автоматизировать контроль за мертвым кодом, чтобы он не накапливался дальше.
👉 https://habr.com/ru/companies/tbank/articles/1078438/
👍11🤡4🔥3❤1
✨ withComponentInputBinding: уменьшаем связанность, инвертируем зависимости
Routed-компоненты в Angular часто сами достают параметры из URL, вызывают сервисы, загружают данные и еще решают, что показывать во время загрузки. Работает, но сам компонент при этом начинает слишком много знать о том, где и как он используется.
В статье разбирается, как с помощью withComponentInputBinding и резолверов сделать эту связь слабее. Идея довольно простая, компоненту не нужно знать о роутере и сервисе, он просто получает необходимые данные через input. А откуда эти данные взять, решается на уровне конфигурации маршрута.
withComponentInputBinding как раз позволяет напрямую передавать данные из состояния Router в input компонента, который указан в конфигурации Route.
👉 https://habr.com/ru/articles/1078996/
Routed-компоненты в Angular часто сами достают параметры из URL, вызывают сервисы, загружают данные и еще решают, что показывать во время загрузки. Работает, но сам компонент при этом начинает слишком много знать о том, где и как он используется.
В статье разбирается, как с помощью withComponentInputBinding и резолверов сделать эту связь слабее. Идея довольно простая, компоненту не нужно знать о роутере и сервисе, он просто получает необходимые данные через input. А откуда эти данные взять, решается на уровне конфигурации маршрута.
withComponentInputBinding как раз позволяет напрямую передавать данные из состояния Router в input компонента, который указан в конфигурации Route.
👉 https://habr.com/ru/articles/1078996/
👍12🔥2
✨ Скроллбар в 2k26
Кастомные скроллбары долгое время означали много JavaScript. Приходилось отслеживать scroll, считать размеры и положение ползунка, постоянно обновлять DOM и мириться с лишней нагрузкой.
В статье разбирается современный подход, где большую часть этой работы берет на себя CSS. С помощью scroll-driven animations, anchor positioning, container queries и animation-range можно синхронизировать положение и размер скроллбара непосредственно с прокруткой.
JavaScript при этом остается только для перетаскивания ползунка указателем. В итоге получается более простой и производительный компонент, который сохраняет единый внешний вид на разных платформах.
👉 https://habr.com/ru/articles/1079750/
Кастомные скроллбары долгое время означали много JavaScript. Приходилось отслеживать scroll, считать размеры и положение ползунка, постоянно обновлять DOM и мириться с лишней нагрузкой.
В статье разбирается современный подход, где большую часть этой работы берет на себя CSS. С помощью scroll-driven animations, anchor positioning, container queries и animation-range можно синхронизировать положение и размер скроллбара непосредственно с прокруткой.
JavaScript при этом остается только для перетаскивания ползунка указателем. В итоге получается более простой и производительный компонент, который сохраняет единый внешний вид на разных платформах.
👉 https://habr.com/ru/articles/1079750/
❤3🔥2👌2👍1😁1