Я.Субботник по разработке интерфейсов в Минске

Видео выходного дня. В Минске спустя много лет наконец-то удалось организовать полноценную фронтенд-конференцию. Офлайн, с живым общением со спикерами.

Сейчас как раз идёт трансляция, включайте на фоне.

https://www.youtube.com/live/qQmEGSFKB-8

React Bits

Как написано на сайте, это анимированные React-компоненты для креативных разработчиков.

Вдохновиться точно есть чем. Можно просто взять готовый компонент и встроить к себе с морем пропсов. А можно тут же посмотреть в исходный код и утащить себе только идею и самое нужное. Опенсорс во всей своей красе.

Осторожно: обнаружены WebGL и шейдеры.

https://reactbits.dev/

Негладко про функции сглаживания

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

С демками на канвасе.

https://www.davepagurek.com/blog/easing-functions/

Разбираемся в Performance Extensibility API

Если вам нужно глубоко погружаться в детали перфоманса веб-приложения на клиенте, во вкладке Performance в Chrome DevTools появился Extensibility API.

Гарри Робертс показывает на примерах, как его применять. Например,

performance.measure('cssTime', {
  start: 'cssStart',
  end: 'cssEnd',
  detail: {
    devtools: {
      track: 'CSS',
      color: 'secondary-dark',
      tooltipText: 'External CSS fetched and parsed',
      properties: [
        ['URL', `app.css`],
        ['Transferred Size', `29.3 KB`],
        ['Decoded Body Size', `311.8 KB`],
        ['Queuing & Latency', `104 ms`],
        ['Download', `380 ms`]
      ]
    }
  }
});

Такой код создаст в отладочной панели трек CSS, внутри трека — «колбаску» с замером от отметки cssStart до отметки cssEnd тёмного цвета, которая будет подписана лейблом External CSS fetched and parsed. По клику на «колбаску» можно будет посмотреть дополнительные данные, переданные в properties.

По сути старые методы performance.mark() и performance.measure() обрастают возможностями, которые есть у нативных замеров. Теперь разработчик может создать себе заметные визуальные зацепки с деталями, которые сделают отладку производительности ещё более удобной.

https://csswizardry.com/2025/07/the-extensibility-api/

Шрифты для вайрфрейминга

Иногда нужно нарисовать прототип, не заморачиваясь с наполнением и текстом. Вайрфрейм.

Крис Койер делится набором шрифтов, которые имитируют текст или заменяют его плейсхолдерами.

https://frontendmasters.com/blog/fonts-for-wireframing/

Симуляция движущихся рисунков от руки при помощи 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/