new Date("wtf")

Думаете, что знаете, как работает класс Date в JavaScript? Пройдите тест.

Набрал 8/28 верных ответов. И очень радуюсь, что с нами Temporal.

https://jsdate.wtf/

Ленимся с view-transition-old и view-transition-new

Сид Штумпель на демках показывает, как View Transition API помогает делать красивые преобразования списков минимумом кода.

Представьте, что у вас есть список карточек. И вы хотите, чтобы:
- когда добавляется новая карточка, остальные красиво двигаются на новое место, а новая карточка появляется в освободившемся пространстве;
- когда карточка удаляется, остальные красиво переезжают на новые места.

Что по дефолту делает View Transition API с элементами, на которые он завязан:
- Считает координаты и размеры элемента до перехода.
- Считает координаты и размеры элемента после перехода.
- Делает плавную анимацию изменения размеров и координат через прозрачность и режимы смешивания во время перехода.

Получается, для красивых анимаций внутри списков вам всего лишь нужно разметить при помощи CSS элементы этого списка как анимируемые (через view-transition-name и подобные свойства). Profit!

https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/

Архитектура Local First для фронтенд-приложений

Видео выходного дня. Андрей Кобец в докладе сравнивает классический клиент-серверный подход с подходом Local First.

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

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

Андрей делится примерами, как с такими решениями уже можно работать, в том числе гибридно с классическим Online First подходом, когда для некоторых операций без интернета всё-таки не обойтись.

https://youtu.be/ztygkgtIZYc

State of HTML 2025

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

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

https://survey.devographics.com/ru-RU/survey/state-of-html/2025

Дружелюбное введение в SVG

Джош Камю с хорошим туториалом для новичков по основам SVG. На интерактивных демках показывает, как рисовать линии, прямоугольники, круги, эллипсы и полигоны. Заодно объясняет отличие атрибутов width и height от viewBox. И не только.

Опытные пользователи SVG вряд ли найдут для себя что-то новое, но, справедливости ради, среди нас не так уж много тех, кто часто пишет SVG руками.

https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/

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

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

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

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-svg-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-javascript-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/svg/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/