mefody.dev

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

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

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

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

Ускоряя 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://a11y-blog.dev/ru/articles/a11y-stats/

Библиотека визуализации графов: 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/

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

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

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

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

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

Проблема с figcaption

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разбираемся в 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://www.davepagurek.com/blog/easing-functions/

React Bits

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

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

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

https://reactbits.dev/

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

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

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

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

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

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

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

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

State of HTML 2025

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

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

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

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

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

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

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

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

https://youtu.be/ztygkgtIZYc

Ленимся с 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/

new Date("wtf")

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

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

https://jsdate.wtf/

Почему важно знать про перфоманс-плато

Тэмми Эвертс рассказывает о таком эффекте, как плато производительности. Это ситуация, когда вы ускоряете метрики Core Web Vitals, делаете LCP на несколько секунд быстрее (это много) — а метрики бизнеса почти никак при этом не меняются.

Например, есть такая метрика, Bounce Rate — процентное соотношение тех, кто покинул сайт после просмотра первой страницы, к общему количеству посетителей. Ей часто пользуются маркетологи и продакт-менеджеры. Она должна быть низкой.

Так вот, если у вас на сайте LCP был равен 10 секундам, а стал 4 секунды, то Bounce Rate может никак не измениться. Потому что пользователям всё равно слишком медленно. А вот если был 4 секунды, а стал 2 секунды, то может внезапно измениться кардинально. Один и тот же сайт, одни и те пользователи, но после некоторой отметки хуже уже не сделать.

И что вам делать с этой информацией? На самом деле, если вы любите оптимизировать перфоманс страниц, то можно собрать графики на реальных пользовательских данных, на которых совместить метрики Core Web Vitals и продуктовые метрики. Так у вас появится доказательная база, почему в производительность нужно (или не нужно) вкладываться. Ни один адекватный менеджер не проигнорирует собранные данные, по которым будет видно, что вклад ресурсов в быструю загрузку страницы может вырастить бизнесовые метрики без новых доработок продукта.

А дополнительно вы будете знать, почему иногда значительные усилия по оптимизации производительности не приносят значимого результата — потому что нужно ещё больше оптимизировать. Либо у вас и так всё оптимальнее некуда, но это скорее исключение из правил.

https://www.speedcurve.com/blog/web-performance-plateau/

Марсианский LaunchKit

Давайте уже признаем, что лендинги технопроектов почти все одинаковые. Сверху Hero-картинка, дальше кнопка большая продающая, затем карточки с иконками и числами, потом FAQ и ссылки на соцсети. Отличается только наполнение. И по мне так это даже хорошо: я сразу знаю, где мне искать нужную мне информацию.

Злые Марсиане собрали готовый шаблон, который можно просто взять и склонировать на GitHub. Статика, в которой достаточно заменить контент — работать будет быстрее любых генераторов React-сайтов. Если нужно изменить стили, в репозитории есть инструкция.

https://launchkit.evilmartians.io/

Satisfies в TypeScript

Адам Ракис на примерах объясняет пользу ключевого слова satisfies в TypeScript.

Если коротко, это что-то вроде assert для типов. Представьте, что у вас есть тип с опциональным полем.

type Item = {
  name: string;
  description?: string;
};

function insertItems(items: Item[]) {}

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      description_new: item.item_description,
    };
  })
);

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

Как словить эту ошибку вовремя? Помимо явного указания типов вообще везде, где только можно вписать тип, можно сделать так:

insertItems(
  backendItems.map(item => {
    return {
      name: item.item_name,
      description_new: item.item_description,
    } satisfies Item;
  })
);

Здесь TS проверит реальное соответствие типу и ругнётся на лишнее поле. При этом автовыведение типов всё ещё работает.

Подробнее — по ссылке.

https://frontendmasters.com/blog/satisfies-in-typescript/