Превратите ваш сайт в MCP сервер для управления агентами
Webpage MCP позволяет агентам в MCP-клиентах управлять уже открытым Chrome браузером: навигация, скриншоты, клики, чтение контента, анализ сети и запуск JavaScript. Проект работает полностью локально через Native Messaging и stdio, добавляя к этому кросс вкладки, сохранение workflow и удобный UX прямо в браузере.
https://github.com/mcpland/webpage-mcp
Webpage MCP позволяет агентам в MCP-клиентах управлять уже открытым Chrome браузером: навигация, скриншоты, клики, чтение контента, анализ сети и запуск JavaScript. Проект работает полностью локально через Native Messaging и stdio, добавляя к этому кросс вкладки, сохранение workflow и удобный UX прямо в браузере.
https://github.com/mcpland/webpage-mcp
❤7🔥6👏1
Два якоря и одна стрелка: позиционирование в CSS
Собираем интерактивную геометрию на чистом CSS: закрепляем один элемент сразу за двумя якорями, вычисляем расстояния и меняем форму стрелки при сближении. Отличный пример, как современные anchor positioning и функции min/inset позволяют делать сложные UI без JS.
https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/
Собираем интерактивную геометрию на чистом CSS: закрепляем один элемент сразу за двумя якорями, вычисляем расстояния и меняем форму стрелки при сближении. Отличный пример, как современные anchor positioning и функции min/inset позволяют делать сложные UI без JS.
https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/
👍10❤2🔥2
Цифровая доступность без визуальных интерфейсов
Как тестировать и улучшать веб интерфейсы для людей, которые работают со скринридерами: от навигации по ссылкам и структуре контента до типичных проблем, которые ломают сценарии в реальном использовании.
https://habr.com/ru/companies/ispsystem/articles/1013824/
Как тестировать и улучшать веб интерфейсы для людей, которые работают со скринридерами: от навигации по ссылкам и структуре контента до типичных проблем, которые ломают сценарии в реальном использовании.
https://habr.com/ru/companies/ispsystem/articles/1013824/
Хабр
О цифровой доступности: как постигать интернет без визуальных интерфейсов
Всем привет! Меня зовут Артем Плаксин, я с рождения практически ничего не вижу. Незрячему или слабовидящему человеку при освоении компьютера приходится сталкиваться с очевидным барьером: очень многое...
👍7❤1
Capacitor OTA - обновления без ревью магазинов: архитектура, стратегии и GitHub Releases
В Capacitor обновляйте только JavaScript бандл через OTA, чтобы правки не требовали пересборки и ожидания в Google Play и App Store. Разбираем, как собрать dist в ZIP, скачать его через capacitor-updater, безопасно откатываться при сбое и выстроить FSD архитектуру с двумя стратегиями обновления.
https://habr.com/ru/articles/1013754/
В Capacitor обновляйте только JavaScript бандл через OTA, чтобы правки не требовали пересборки и ожидания в Google Play и App Store. Разбираем, как собрать dist в ZIP, скачать его через capacitor-updater, безопасно откатываться при сбое и выстроить FSD архитектуру с двумя стратегиями обновления.
https://habr.com/ru/articles/1013754/
Хабр
Capacitor: от веба к мобильным приложениям. Часть 3. OTA обновления в обход сторов
Примерно год назад я написал статью о том, как настроить OTA-обновления в Capacitor-приложении с помощью capacitor-updater . Подход работал, но со временем код стал разрастаться в одном компоненте и...
❤4🔥3
Signal Forms в Angular: быстрый старт
Сигнальные формы в Angular заменяют ручную синхронизацию состояния формы и данных на декларативную модель через FieldTree и FieldState, где изменения напрямую обновляют связанный сигнал. В материале показан минимальный пример и как это упрощает код, но функционал помечен как экспериментальный и требует осторожности в production.
https://habr.com/ru/articles/1013664/
Сигнальные формы в Angular заменяют ручную синхронизацию состояния формы и данных на декларативную модель через FieldTree и FieldState, где изменения напрямую обновляют связанный сигнал. В материале показан минимальный пример и как это упрощает код, но функционал помечен как экспериментальный и требует осторожности в production.
https://habr.com/ru/articles/1013664/
👍7❤2
Вредная веб графика: как разработчики раздувают вес страниц
Оптимизация изображений часто упирается в неправильный формат и отсутствие конвертации: PNG там, где достаточно JPEG, и игнорирование WebP и AVIF. Разберем, как выбрать формат под задачу и получить кратное снижение веса без заметной потери качества, чтобы ускорить загрузку и улучшить UX.
https://habr.com/ru/companies/alfa/articles/1012848
Оптимизация изображений часто упирается в неправильный формат и отсутствие конвертации: PNG там, где достаточно JPEG, и игнорирование WebP и AVIF. Разберем, как выбрать формат под задачу и получить кратное снижение веса без заметной потери качества, чтобы ускорить загрузку и улучшить UX.
https://habr.com/ru/companies/alfa/articles/1012848
🔥8👍4❤2
Astro и HTML minification с HMN за пару шагов
Ускорьте сборку и уменьшите размер страниц в Astro, подключив html-minifier-next и прогоняя минификацию для всех HTML в папке dist через хуки сборки. Настройте preset comprehensive или conservative, чтобы подобрать баланс между размером и совместимостью.
https://meiert.com/blog/astro-html-minification/
Ускорьте сборку и уменьшите размер страниц в Astro, подключив html-minifier-next и прогоняя минификацию для всех HTML в папке dist через хуки сборки. Настройте preset comprehensive или conservative, чтобы подобрать баланс между размером и совместимостью.
https://meiert.com/blog/astro-html-minification/
❤3🤔2🔥1
Ограничители сетевой эффективности для ускорения загрузки веб приложений
Microsoft Edge 146 умеет мониторить загрузку ресурсов и автоматически помечать неэффективные паттерны вроде слишком больших изображений, не сжатых текстовых файлов и больших data URL, отправляя отчеты через Reporting API. Включите фичу через Document-Policy и используйте нарушения, чтобы точечно оптимизировать то, что реально тормозит ваш фронтенд.
https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/
Microsoft Edge 146 умеет мониторить загрузку ресурсов и автоматически помечать неэффективные паттерны вроде слишком больших изображений, не сжатых текстовых файлов и больших data URL, отправляя отчеты через Reporting API. Включите фичу через Document-Policy и используйте нарушения, чтобы точечно оптимизировать то, что реально тормозит ваш фронтенд.
https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/
👍5🤔2❤1
Expo для React разработчиков
Expo позволяет перенести ваши React навыки в React Native и собрать нативные iOS и Android приложения без переписывания с нуля, при этом часть логики можно переиспользовать и для web. Фокус на удобной маршрутизации, нативных API и автоматизации сборок через EAS, чтобы быстрее дойти до релиза.
https://expo.dev/solutions/expo-for-react-web-devs
Expo позволяет перенести ваши React навыки в React Native и собрать нативные iOS и Android приложения без переписывания с нуля, при этом часть логики можно переиспользовать и для web. Фокус на удобной маршрутизации, нативных API и автоматизации сборок через EAS, чтобы быстрее дойти до релиза.
https://expo.dev/solutions/expo-for-react-web-devs
❤9👍4🔥2
Динамические toggletip с anchored container queries
Anchored container queries в Chrome 143+ позволяют определять активную fallback позицию и автоматически переключать caret у подсказки в зависимости от доступного места, сохраняя прогрессивное улучшение для остальных браузеров через popovers и anchor positioning.
https://piccalil.li/blog/building-dynamic-toggletips-using-anchored-container-queries/
Anchored container queries в Chrome 143+ позволяют определять активную fallback позицию и автоматически переключать caret у подсказки в зависимости от доступного места, сохраняя прогрессивное улучшение для остальных браузеров через popovers и anchor positioning.
https://piccalil.li/blog/building-dynamic-toggletips-using-anchored-container-queries/
👍5❤3🤔2
Astro 6 с обновленным dev сервером и API для шрифтов
Astro 6 ускоряет разработку за счет запуска точного production runtime в dev, улучшает поддержку Cloudflare и добавляет встроенный Fonts API, CSP и Live Content Collections. Также доступны экспериментальные фичи вроде Rust компилятора, queued rendering и route caching.
https://astro.build/blog/astro-6/
Astro 6 ускоряет разработку за счет запуска точного production runtime в dev, улучшает поддержку Cloudflare и добавляет встроенный Fonts API, CSP и Live Content Collections. Также доступны экспериментальные фичи вроде Rust компилятора, queued rendering и route caching.
https://astro.build/blog/astro-6/
🔥5❤4👍2
Поддержка системного масштабирования текста в Chrome Canary
Chrome Canary начинает уважать системные настройки масштабирования только текста (как в iOS/Android accessibility) — это помогает делать типографику на сайте предсказуемой и доступной.
https://frontendmasters.com/blog/text-scaling-support-in-chrome-canary/
Chrome Canary начинает уважать системные настройки масштабирования только текста (как в iOS/Android accessibility) — это помогает делать типографику на сайте предсказуемой и доступной.
https://frontendmasters.com/blog/text-scaling-support-in-chrome-canary/
❤🔥5🔥1
Как чинить Dropdown-меню внутри скролл-контейнеров
Когда dropdown оказывается в блоке с
https://www.smashingmagazine.com/2026/03/dropdowns-scrollable-containers-why-break-how-fix/
Когда dropdown оказывается в блоке с
overflow, он может обрезаться, “уезжать” при прокрутке или прятаться под соседними слоями. Разбираем причины по шагам и показываем стабильные решения.https://www.smashingmagazine.com/2026/03/dropdowns-scrollable-containers-why-break-how-fix/
1👎6👍4❤2
Forwarded from Web Stack
Тихие блокеры в robots.txt: как ошибки могут незаметно убрать сайт из Google
Неправильный .robots.txt может остановить обход страниц или скрыть важные директории, из-за чего контент не попадает в поиск. Разбираем типовые ошибки вроде Disallow: /, блокировок ресурсов и синтаксических опечаток, и проверяем конфиг через инструменты Google.
https://dev.to/freedevkit/the-silent-blockers-how-robotstxt-mistakes-can-ghost-your-site-from-google-12h0
Неправильный .robots.txt может остановить обход страниц или скрыть важные директории, из-за чего контент не попадает в поиск. Разбираем типовые ошибки вроде Disallow: /, блокировок ресурсов и синтаксических опечаток, и проверяем конфиг через инструменты Google.
https://dev.to/freedevkit/the-silent-blockers-how-robotstxt-mistakes-can-ghost-your-site-from-google-12h0
❤8👍2😐1
Codemod в JavaScript: меняйте сотни файлов без боли с jscodeshift
Когда в проекте постоянно меняются API, синтаксис и UI-kit, спасает подход “меняем код машиной”: jscodeshift строит AST и позволяет делать предсказуемые трансформации сразу по всем файлам — вместо опасного поиска-замены и regex.
https://habr.com/ru/companies/banki/articles/1011580
Когда в проекте постоянно меняются API, синтаксис и UI-kit, спасает подход “меняем код машиной”: jscodeshift строит AST и позволяет делать предсказуемые трансформации сразу по всем файлам — вместо опасного поиска-замены и regex.
https://habr.com/ru/companies/banki/articles/1011580
🔥6❤2
Masonry на Flexbox: раскладываем элементы по строкам с точной математикой
Разбираем, как Flexbox распределяет свободное место между flex-элементами (grow/shrink), чтобы собрать “мозаичный” layout из карточек разной высоты при известном aspect ratio. Освоим логику расчёта для каждой строки и сможем воспроизвести masonry-эффект без тяжёлых фреймворков.
https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/
Разбираем, как Flexbox распределяет свободное место между flex-элементами (grow/shrink), чтобы собрать “мозаичный” layout из карточек разной высоты при известном aspect ratio. Освоим логику расчёта для каждой строки и сможем воспроизвести masonry-эффект без тяжёлых фреймворков.
https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/
❤10👍3🔥1
Event Loop для начинающих — разбор без страха
JavaScript выполняется в одном потоке, но браузер/окружение берут на себя асинхронщину: таймеры, клики, сети и Promise. Разберём, как Event Loop управляет очередями задач и микрозадачами, почему стек вызовов работает по принципу LIFO и как микрозадачи могут блокировать рендер.
https://habr.com/ru/articles/1011258
JavaScript выполняется в одном потоке, но браузер/окружение берут на себя асинхронщину: таймеры, клики, сети и Promise. Разберём, как Event Loop управляет очередями задач и микрозадачами, почему стек вызовов работает по принципу LIFO и как микрозадачи могут блокировать рендер.
https://habr.com/ru/articles/1011258
🔥5👍3❤1