Гайд по SVG-фильтрам: начало работы с основами. Ана Тудор разбирает фундаментальные основы SVG-фильтров: настройку элементов <svg> и <filter>, области действия фильтров, подобласти примитивов и цветовую интерполяцию. Гайд объясняет, как примитивы объединяются в цепочки, когда использовать атрибуты result, in и in2, а также разницу между filterUnits и primitiveUnits для адаптивных эффектов. #svg #filter

https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/

Поддержка современных CSS-фич в shadow DOM. Adobe Spectrum Web Engineering отслеживает поддержку CSS-фич внутри shadow DOM и при пересечении его границ. Проект охватывает :has(), @property, @scope, anchor positioning, каскадные слои, выражения от контейнера и нативную вложенность, документируя функциональный статус, кросс-контекстное поведение и баги браузеров. Для каждой фичи есть результаты Web Platform Tests и ссылки на спецификации. #css #webcomponents

https://shadow-dom-css.adobe.com/

State of AI 2026. Devographics запустили новый опрос о том, как разработчики используют инструменты ИИ, модели и ассистенты для написания кода в повседневной работе. Опрос охватывает генерацию кода, промпт-инжиниринг, тестирование с помощью ИИ и предпочтения моделей. Он займёт около 15-20 минут и поможет составить карту быстро меняющегося ландшафта ИИ в разработке. #ai #survey

https://survey.devographics.com/en-US/survey/state-of-ai/2026

Masonry-gridlanes-wc — нативный веб-компонент для masonry раскладки. Скалк Нитлинг создал веб-компонент для masonry-раскладки в соответствии с display: grid-lanes из спецификации CSS Grid Level 3. В браузерах с нативной поддержкой grid lanes компонент полностью уступает место браузеру. В остальных случаях используется JavaScript-фолбек для раскладки по колонкам и строкам с настраиваемыми отступами и шириной колонок. #webcomponents #layout

https://schalkneethling.com/posts/introducing-masonry-gridlanes-wc-a-native-first-masonry-web-component/

Выпуск №523. Никита Дубко, Вадим Макеев и Алексей Симоненко про тайну пропавшего поста, новинки Bun и Node.js, разбитое сердце, полифил для masonry, доступность с LLM и Claude Design.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:15 Тайна пропавшего поста
00:27:03 Новинки Bun
00:42:06 Новинки Node.js
00:47:05 Разбитое сердце
01:02:38 Полифил для masonry
01:19:47 Доступность с LLM
01:39:03 Claude Design

Полностью локальные встраиваемые примеры кода. Александр Овганнисян создал веб-компонент, который рендерит изолированные песочницы для кода через <iframe srcdoc> без сторонних сервисов вроде CodePen или CodeSandbox. Компонент берёт HTML, CSS и JavaScript из элемента <template> и создаёт полностью локальный изолированный превью. Работает везде, где поддерживаются HTML и JavaScript, и не имеет зависимостей. #html #js

https://www.aleksandrhovhannisyan.com/blog/local-code-embeds/

Новинки Firefox 150 для разработчиков. Релиз добавляет sizes="auto" для ленивых изображений, color-mix() с несколькими цветами, light-dark() для изображений, псевдоклассы вроде :buffering, :paused и :playing для <audio> и <video>, свойства animation-range для анимаций, привязанных к скроллу, ключевое слово revert-rule, метод ariaNotify() для уведомлений скринридеров и исправление overscroll-behavior для overflow: hidden. #firefox #browser

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Обзор новинок Git 2.54. Тейлор Блау рассказывает о новых командах: git history reword открывает редактор с сообщением коммита и переписывает его на месте, не затрагивая рабочее дерево или индекс, а git history split позволяет интерактивно разделить коммит на два, выбирая участки кода для нового родительского коммита. В отличие от git rebase, эти команды работают в пустых (bare) репозиториях и отказываются выполнять операции с конфликтами слияния. #git #tools

https://github.blog/open-source/git/highlights-from-git-2-54/

Тестирование доступности в Playwright: что пропускают axe и Lighthouse. Дэвид Мелло объясняет, что автоматические инструменты вроде axe и Lighthouse обнаруживают лишь 30-40% нарушений WCAG. В статье рассматриваются десять категорий проблем доступности, которые сканеры не находят, от неоднозначного текста ссылок до проблем с клавиатурной навигацией, и предлагаются паттерны тестирования в Playwright и стратегии ручной проверки. #a11y #testing

https://www.davidmello.com/software-testing/test-automation/playwright-accessibility-testing-axe-lighthouse-limitations

Варианты предзагрузки изображений на JavaScript. Алекс Макартур сравнивает пять подходов: new Image(), <link rel="preload">, скрытый <div> с CSS-фоном, Cache API и fetch(). У каждого метода свои компромиссы в плане браузерного кеширования, обработки CORS и гибкости. Статья разбирает, когда лучше использовать каждый из них, чтобы избежать задержки при показе ещё не загруженных изображений. #js #performance

https://macarthur.me/posts/preloading-images/

Конец адаптивных изображений. Мэт Маркиз, бывший председатель Responsive Image Community Group, оглядывается на десять лет борьбы с атрибутом sizes и рассказывает, как sizes="auto" вместе с loading="lazy" наконец передают эту работу браузеру для большинства картинок. Поддержка уже есть в Firefox, Safari и Chrome, а длинные значения sizes можно оставлять только для картинок в первом экране. #html #performance

https://piccalil.li/blog/the-end-of-responsive-images/

Выпуск №524. Полина Гуртовая, Вадим Макеев и Алексей Симоненко про Firefox 150, Git 2.54, параллельных агентов в Zed, бету TypeScript 7.0, конец адаптивных картинок и Temporal в Node.js.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:00 Переезд сайта
00:02:55 Новинки Firefox 150
00:21:03 Git 2.54
00:33:10 Параллельные агенты в Zed
00:53:44 Бета TypeScript 7.0
01:09:03 Конец адаптивных картинок
01:23:46 Temporal в Node.js

Автоматизация браузера из терминала с Chrome DevTools MCP CLI. Джоан Леон рассказывает о CLI, которая управляет Chrome через консоль вместо скриптов на Puppeteer или Playwright. Постоянный демон сохраняет состояние между командами для навигации, троттлинга сети, мобильного вьюпорта, тёмной темы и взаимодействия с формами. Можно получать дерево доступности, выполнять JavaScript, делать скриншоты, запускать Lighthouse и трейсить Core Web Vitals. #devtools #tools

https://joanleon.dev/en/chrome-devtools-mcp-cli/

Анимации, управляемые прокруткой. Джош Комо разбирает CSS animation-timeline, где кадры анимации раскладываются по расстоянию прокрутки, а не по времени. Рассказывает про функции тайминга, диапазоны анимации (cover, contain, entry, exit), проценты диапазонов, таймлайны прогресса прокрутки и связанные таймлайны через view-timeline и timeline-scope. Поддержка около 85%, в Firefox — за флагом. #scroll #animation

https://www.joshwcomeau.com/animation/scroll-driven-animations/

В интернете снова весело: первые эксперименты с HTML в <canvas>. Амит Шин разбирает экспериментальный API Canvas Draw Element за флагом в Chrome 146, который рисует нативный HTML на <canvas>, сохраняя семантику, формы и взаимодействие. С помощью атрибута layoutsubtree и drawElementImage() он показывает синхронизацию трансформаций, манипуляции пикселями для эффектов цвета и искажений, отклик на движение мыши и WebGL-шейдеры. #html #api

https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/

SVG с нуля. Кармен Ансио предлагает посмотреть на SVG не как на формат графики, а как на DOM: каждая фигура — элемент, каждый атрибут — стиль, всё это можно стилизовать на CSS, анимировать и менять через JavaScript. Она разбирает viewBox, пять основных фигур (circle, rect, line, polygon, path), анимацию обводки stroke-dasharray, <defs>, <clipPath> и JS-хелперы вроде getTotalLength(). #svg #animation

https://www.carmenansio.com/articles/svg-from-scratch

Выпуск №525. Никита Дубко, Алексей Симоненко и Полина Гуртовая про HTML в Canvas, сайты для агентов, сомнительный Prompt API, альфу Astro 7 и путь к Zed 1.0.

— Лайв на Ютубе
— Слушайте на Ютубе
— Ссылки на сайте

00:01:30 HTML в Canvas
00:21:41 Сайты для агентов
00:39:35 Сомнительный Prompt API
01:15:55 Альфа Astro 7
01:25:34 Путь к Zed 1.0