Симуляция движущихся рисунков от руки при помощи SVG-фильтров

Знаете такой приём в анимации, когда статический объект слегка меняется текстурно, из-за чего получается эффект движения без движения? В 2d-мультфильмах такое бывает.

Камилло Визини показывает, как сделать такое на SVG-фильтрах:
1. Сначала собираем фильтр feTurbulence, чтобы добавить шум.
2. Затем добавляем feDisplacementMap, который применяет сгенерированный шум на картинке для искажений.
3. Меняем параметры для фильтров из п. 2 и п. 3 по таймеру — анимируем.

Эффект получается классный, для сайтов в стилистике рисунков от руки или презентаций вообще топ.

https://camillovisini.com/coding/simulating-hand-drawn-motion-with-noscript-filters

Проблема с figcaption

Представьте вполне себе привычную, довольно семантичную вёрстку для картинок с подписями.

<figure>
  <img src="image.jpg" alt="доступное описание">
  <figcaption>Длинный-длинный текст, который по ширине значительно превышает ширину самой картинки</figcaption>
</figure>

Крис Койер задаётся вопросом, как сделать так, чтобы:
1. Картинка могла быть любой ширины, но не превышала размер контейнера.
2. Подпись в figcaption подстраивалась по размеру к ширине картинки.
3. Всей этой конструкции можно было добавить красивую обводку.

Простая на первый взгляд задача на самом деле имеет свои заморочки. В статье есть несколько решений.

https://frontendmasters.com/blog/the-figcaption-problem/

Данные о пикселях от энкодеров к декодерам

Полина Гуртовая продолжает понятным языком объяснять, как устроены изображения.

- Что такое пиксель и чем физический пиксель отличается от пикселей в изображении.
- Как хранится изображение в видеокарте.
- Почему существуют разные форматы изображений, их декодеры и энкодеры.
- Как работают декодеры и энкодеры.
- Почему на изображениях после пересохранения исчезают некоторые детали.
- Почему картинки одинакового разрешения весят по-разному.

Если давно хотели разобраться в том, как устроены JPEG или AVIF под капотом, но было лень разбираться в сложных спецификациях — вперёд читать статью от Полины. С белочками.

https://developer.mozilla.org/en-US/blog/image-formats-pixels-graphics/

Библиотека визуализации графов: Canvas vs HTML в Gravity UI

Команда дизайн-системы Gravity UI столкнулась с интересной задачей: отрисовать графы с 10000+ интерактивными компонентами, чтобы страница не зависала намертво. Во всяких админках пайплайнов, CI/CD, модных нынче n8n есть такой тип интерфейса, когда вам нужно на холсте нарисовать много всякого кликабельного и двигабельного, чтобы ещё оно всё стрелочками было соединено с подписями.

Андрей Щетинин рассказывает, почему это всё ещё удобно делать на HTML+CSS для маленького числа компонентов, какие проблемы есть при реализации альтернативы на Canvas и зачем пришлось делать свою библиотеку, которая автоматически переключается с HTML+CSS на Canvas и обратно, сохраняя 60 FPS.

На самом деле редко вижу такие интересные технические статьи с подробным разбором плюсов и минусов различных подходов. Обычно про это доклады делают. А здесь и теория, и практика, и демки.

https://habr.com/ru/articles/934562/

Доступность в цифрах

Мне периодически нужно доказывать, почему ту или иную проблему аксессибилити нужно починить. Не потому, что вокруг злыдни не дают делать хорошо. Наоборот, чтобы выбрать приоритет среди множества задач.

Татьяна Фокина делится замечательным списком исследований, отчётов и статистик про цифровую доступность. Чтобы вам не нужно было искать. Есть ресурсы и про фронтенд, и про доступность в целом, и про законодательство.

https://a11y-blog.dev/ru/articles/a11y-stats/

Ускоряя JS-экосистему: semver

Марвин Хагмайстер (core-разработчик Preact) как-то запустил команду npm install внутри Preact, которая работала дольше 3 секунд, чем привлекла внимание. Марвин начал разбираться, что же там так долго работает — оказалось, пакет semver вызывался во время установки больше 20 тысяч раз. 20 тысяч раз, Карл!

Пакет semver — это утилита для работы с версиями пакетов, вроде ^6.0.0, 4.0.0-alpha.4, 1.x || 2.x и так далее. Нужная. Но можно ли её ускорить?

В статье Марвин показывает, как ему удалось написать свой кастомный парсер, который в 25 раз быстрее.

Хороший пример того, как можно задуматься всего об одной оптимизации и попробовать сделать эффективнее огромную JS-экосистему.

https://marvinh.dev/blog/speeding-up-javanoscript-ecosystem-part-12/

Креативность и цитаты

Энди Кларк задаётся вопросом, как можно стилизовать цитаты и врезки на сайте музыкального исполнителя. Начинает с базовой разметки, постепенно добавляет новые и новые стили, и в конце получает то оформление, которое его устраивает.

Мне понравилась заключительная мысль статьи: цитаты на странице тоже могут вызывать настроение через визуальные смыслы. И вполне нормально экспериментировать с их оформлением, чтобы получилось классно.

https://css-tricks.com/getting-creative-with-quotes/

MinskJS Meetup #13

Если у вас сегодня на вечер ещё нет планов, приходите к нам на уютный онлайн-митап в 19:00 по минскому времени. Поговорим про фронтенд и около:
- Василий Ванчук расскажет про секцию System Design на собеседованиях для фронтенд-разработчиков.
- Анна Ширяева поделится гайдом, как выбрать фронтенд-фреймворк под свою задачу.
- Евгений Дорошкевич объяснит, как делать классные анимации, улучшающие вовлечённость пользователей.

Как обычно, будет всем рады.

Трансляция: https://www.youtube.com/watch?v=7JyODKQYRX4
Программа митапа: https://minskjs.site/events/minskjs-meetup-13/

Интерактивный гайд по path в SVG

Джош Камю продолжает собирать шикарные интерактивные туториалы по SVG. На этот раз он подробно разбирает, что и как работает внутри <path d="..."/>, чем отличаются M от m, L от l и кубические кривые Безье от квадратичных и как нарисовать дуги разных форм. Как обычно, стильно и со спецэффектами.

https://www.joshwcomeau.com/noscript/interactive-guide-to-paths/

Бросаем кубик с random() в CSS

Оказывается, в Safari Technology Preview можно поиграться с функцией random в CSS. Например, вы можете написать width: random(2px, 10px, 1px);, и у вас ширина блоков, к которым применилось свойство, будет случайным числом от 2 до 10 пикселей с шагом в 1 пиксель.

Мне бы такое очень пригодилось в генеративной графике. Делал когда-то демки на препроцессорах, где рандом на самом деле срабатывал только при компиляции. И игрался с тем, чтобы генерировать случайные числа внутри JS и пробрасывать их через кастомные переменные внутрь элементов — но это так себе удобство. А хочется, чтобы при обновлении страницы графика менялась.

Спецификация, на самом деле, более сложная, чем просто генерация чисел. Там можно и кэшированием управлять, и генерировать одно общее число для всех элементов. В Safari есть какая-то реализация, но спека ещё в процессе устаканивания.

https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

Одержимость аккуратными краями круга из radial-gradient()

Простая задача: нарисовать круг свойством background. Берём radial-gradient(var(--radius), var(--my-color) 100%, #0000), можно сразу несколько — профит. Ведь правда?

Беда в том, что для кругов, сделанных при помощи border-radius, срабатывает сглаживание, они выглядят аккуратно, а вот градиенты внутри background рисуются по другим алгоритмам. Края рваные, пиксельные, грубые.

Ана Тюдор со свойственной ей глубиной детализации пробует найти «идеальное» решение, которое и жёсткость уберёт, и слишком размазанными края не сделает, и для любого размера круга подойдёт, и к зуму подстроится.

https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/

Оптимизируем PWA под различные режимы отображения

PWA (прогрессивные веб-приложения) можно запускать в разных режимах. Например, в режиме fullscreen приложение занимает весь экран, а браузерный UI прячется. А в режиме minimal-ui браузерная обвязка компактная, без излишков.

Деклан Чидлоу показывает, как внутри CSS или JS определять, в каком режиме отображения работает веб-приложение, и объясняет, для чего это может быть полезно.

https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

Почему браузеры троттлят JS-таймеры?

Нолан Лоусон делится задачей: нужно после того, как выполнены все микротаски, но ещё не начали выполняться таски в event loop, запустить какие-то полезные фоновые задачи. Думаю, на собеседованиях часто такие вопросы можно услышать.

Есть древний способ вызвать setTimeout(0), но на самом деле это задержка в 4ms, сделанная против абьюза от нехороших разработчиков, ломавших страницы в вебе.

Нолан в статье сравнивает разные способы выполнить изначальную задачу (setImmediate, MessageChannel.postMessage, window.postMessage и scheduler.postTask) по их кроссбраузерности и особенностям. Спойлер: одного идеального способа нет.

https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javanoscript-timers/

Основы выравнивания в CSS

В CSS есть десятки способов выровнять один элемент внутри другого. Не просто так же до сих пор на собеседованиях просят выровнять элемент по центру.

Темани Афиф делится подробнейшим гайдом с демками, как же оно работает:
- Выравнивание в гридах и флексах.
- Как выравнивание влияет на размеры элементов.
- Отличие логических значений от физических.
- Как работает автоматическое выравнивание.
- Блочные и инлайновые элементы.

Обычно на этом сайте Темани собирает короткие полезные советы, но, видимо, в какой-то момент материалов про выравнивание стало так много, что появился новый раздел Explore.

https://css-tip.com/explore/alignment/

Браузеру Google Chrome — 17 лет

Мы в свежем выпуске «Веб-стандартов» поразгоняли немножко на тему этой статьи, но всё равно хочется поделиться ссылкой, после открытия которой сводит олдскулы.

Эдди Османи вспоминает, что нового привнёс Chrome в веб за 17 лет своего существования. Только вдумайтесь, браузеру уже 17 лет. А я помню, как он только появился и начинал отвоёвывать потихоньку рынок у Opera и Firefox.

А ещё вкладки вместо окон, пожирание оперативки, уязвимость Spectre, девтулзы, принуждение к HTTPS, Core Web Vitals, динозаврик при падении странички, PWA и многое другое.

P.S. Читайте осторожно, очень много восхваления Chrome в статье, не забывайте о других браузерах.

https://addyosmani.com/blog/chrome-17th/

Эффект жидкого стекла в браузере: рефракция на CSS и SVG. Крис Фейхо экспериментирует с SVG-фильтрами, чтобы добиться противоречивого, но очень привлекательного эффекта из будущих версий iOS и macOS. #css #noscript

https://kube.io/blog/liquid-glass-css-noscript/

Основы Anchor Positioning в CSS

Ахмад Шадид делится подробным гайдом, что можно будет делать с этой мощной спецификацией. Как всегда, с обилием демок.

Я искренне верю, что Anchor Positioning изменит стандарты работы с тултипами, подсказками и выносными элементами. И позволит делать без JS то, что сейчас без JS делать почти невозможно. Но спека не самая простая, а вот такие гайды как раз помогают разобраться на примерах.

https://ishadeed.com/article/anchor-positioning/

Вспоминаем Image Map

Сейчас олды содрогнутся. Забытая техника древних.

В прошлом довольно часто можно было встретить сайт, где ссылки были не квадратные, а произвольной формы. Причём поверх картинок. При этом кликабельные, доступные, вычурные.

<img src="map.png"
     alt="My awesome map"
     usemap="#map">
<map id="map" name="map">
  <area shape="rect"
        coords="176,14,323,58"
        href="belarus.html"
        alt="Belarus">
  <area shape="poly"
        coords="260,96,209,249,130,138"
        href="belgium.html"
        alt="Belgium">
</map>

Ссылки-картинки с правильным альтернативным текстом, разбитые на области.

Как вы понимаете, были нюансы. Эта штука была абсолютно не готова к адаптивности интерфейсов. И ховеры по ней стилизовать было нельзя. Но выглядело классно. Да и до сих пор выглядит, вы всё ещё можете ими пользоваться.

Энди Кларк собрал альтернативу на SVG и JS, которая лишена минусов оригинальных Image Map. Есть и адаптив, и кликабельность, и стилизация по ховеру.

https://css-tricks.com/revisiting-image-maps/

Полный курс по Svelte 5

Как-то я проморгал, что после Svelte 3 успело выйти уже два мажора со значимыми изменениями. Если вдруг вы тоже пропустили, то Svelte — это фреймворк со своим компилятором, который целится в супер-легковесный клиентский код. Довольно популярный фреймворк, к слову.

Матия из Хорватии (автор сам так подписывается, я не подшучиваю) собрал очень подробный курс, который позволяет изучить Svelte 5 с нуля. 28 глав, 3 часа видео, очень много демок. Бесплатно, но если вам будет полезно, можно задонатить на Patreon.

https://joyofcode.xyz/learn-svelte

Брендирование типов в TypeScript

В разных языках программирования есть разные подходы к типизации. TypeScript умеет сравнивать типы структурно, но это и мешает иногда подсветить ошибки при использовании номинально разных типов, которые идентичны по структуре.

Федерико Жерарди показывает, как можно для таких задач использовать брендирование типов.

type BrandedType<T> = T & { readonly __brand: unique symbol };

В статье есть хороший пример, как таким образом пометить строку, что она прошла через обработку важной функцией.

Я сам с брендированием знаком давно, но обычно добавляю строковых поля для разделения типов. Про то, что можно использовать unique symbol, как-то не задумывался, интересный подход.

https://azraelsec.sh/2025/09/06/Typenoscript-Branding/

Электрическая рамка

Принёс вам демку, в которой интересно поразбираться.

Балинт Ференци собрал на CodePen классный пример рамки, по которой как будто идёт электрический ток. Как это работает:

- При помощи фильтра feTurbulence создаётся три слоя с шумом. Это буквально статические картинки, которые выглядят как цветной дым.
- Каждому слою задана бесконечная анимация, которая двигает слой либо влево, либо вверх. Интересно, что слоёв, которые движутся вверх, сразу два.
- При помощи feComposite и feBlend эти слои смешивают в режиме color-dodge. Получается общий источник пикселей в виде анимированного шума.
- И затем применяется feDisplacementMap, который склеивает картинку, поверх которой будет применяться фильтр, и сгенерированный шум в тонкие электрические линии.
- В CSS это подключается просто, filter: url(#turbulent-displace).

Вся магия в том, что сгенерированный шум во время анимации создаёт яркие и менее яркие области, которые псевдослучайно перемещаются по картинке. Если при помощи фильтров использовать эти яркие области для карты смещения, получается вау-эффект. В демке ещё хорошо имитируются игра света и блики на поверхности, что в комбинации даёт очень красивую, на мой взгляд, карточку.

Сохранил себе в закладки на случай, если захочется что-нибудь эдакое технологическое поделать в интерфейсах.

https://codepen.io/BalintFerenczy/pen/KwdoyEN