mefody.dev

Пикселизация при помощи SVG

Ещё одну интересную демку нашёл. Джей Томпкинс собрал SVG-фильтр, который превращает обычную фотографию в пиксельную. Причём в демке можно поиграться с размером тайла, точкой старта, применяемым фильтром.

Как оно работает:
Шаг 1. При помощи feFlood, feComposite и feTile создаём паттерн, где однопиксельные белые точки расположены в сетке 10x10.
Шаг 2. При помощи ещё одного фильтра feComposite смешиваем паттерн и картинку. Вместо белых пикселей теперь получаем пиксели с цветами из оригинального изображения. Но всего 1% этих пикселей, остальные чёрные.
Шаг 3. Применяем feMorphology с оператором dilate, чтобы «раздуть» пиксели во все стороны. Можем задавать радиус, чтобы сделать либо эффект мозаики, либо эффект LED-пикселей на чёрной подложке.

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

https://codepen.io/jh3y/pen/pvyZZmO

Адвент-календарь HTMHell

Мануэль Матузович в 2021 году запустил первый HTMHell Advent Calendar, в котором собрал ссылки на полезные материалы, видео, статьи и инструменты. В 2022 году этот проект превратился в сборник 24 статей от 24 авторов со всего мира про веб-разработку.

Сегодня стартовал новый цикл. Один день — одна статья. Я точно все прочитаю, потому что в прошлом году нашёл для себя довольно много нового и полезного. И вам советую.

https://htmhell.dev/adventcalendar/

«Самые ненавидимые» фичи в CSS

По результатам опроса State of CSS 2025 тригонометрические функции победили в номинации 'Most Hated'. Всего 9.1% респондентов отметили, что фича прям не нравится, но этого оказалось достаточно, чтобы выйти в топ.

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

На мой субъективный взгляд самые полезные всё-таки тангенс и арктангенс. Потому что приходилось верстать сложные градиенты, где нужно хитро высчитать угол этого градиента. Или рисовать адаптивные скошенные уголки. Когда есть x и y, без всяких гипотенуз можно высчитать угол, а зная угол — сделать красивое. А для имитации физически верных анимаций вам нужны синусы и косинусы, из комбинации которых можно составить почти любую непрерывную сложную анимацию.

И да, это Baseline Widely Available, то есть не что-то новое и нигде не работающее, а вполне себе стабильные фичи.

cos() и sin():
https://css-tricks.com/the-most-hated-css-feature-cos-and-sin/

tan():
https://css-tricks.com/the-most-hated-css-feature-tan/

a-():
https://css-tricks.com/the-most-hated-css-feature-asin-acos-atan-and-atan2/

HTML-in-Canvas

Увидел сначала в твиттерах, потом в чатике редакции «Веб-стандартов» ссылочку на пропозал: рендерить HTML внутри Canvas.

«Шо, опять?» — подумал я. До этого были разной степени проработанности идеи уже, через CSS картинку рендерить, через Browser API. И библиотеки есть популярные, которые эту задачу худо-бедно решают. Основная сложность в том, что для решения задачи нужно либо полностью скопировать поведение браузера (дорого и сложно), либо ограничиться каким-то набором поддерживаемых свойств. И весят все существующие решения прилично.

Но в этот раз как будто всё серьёзно. Потому что в Chrome Canary 138.0.7175.0+ уже можно включить специальный флаг, чтобы начать пользоваться апишкой для экспериментов.

const ctx = document.getElementById('canvas').getContext('2d');
const element = document.getElementById('element');
ctx.drawElementImage(element, 0, 0);

Да, вот так просто. Заинтригован. Буду следить за развитием пропозала.

https://github.com/WICG/html-in-canvas

Доклад «Давай поиграем со шрифтами»

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

В докладе рассказал, как в 2025 году можно работать со шрифтами, почему рендеринг текста вас ненавидит, можно ли сделать пиксель-пёрфект и зачем разработчику знания типографики.

Приятно удивлён, что этот доклад получил топ-1 по оценкам зрителей. Как говорил Тор: «Всё ещё достоин».

https://youtu.be/ktoxhEQqS60

Форматы изображений: кодеки и инструменты сжатия

Полина Гуртовая продолжает цикл статей про цвета и пиксели. Теперь — про сжатие белочек и прятание вороны.

Полина берёт изображение белочки размером 2733 × 3727 пикселей с глубиной цвета 16-bit. И затем с различными параметрами сжимает эту картинку в JPEG и AVIF. Интересно посмотреть, как наивный подход без изменения параметров сжатия по дефолту отличается от более глубокого манипулирования SSIM и MSE.

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

https://developer.mozilla.org/en-US/blog/image-formats-codecs-compression-tools/

Pikaday

Pick a day. Выбери день. Дейтпикер, короче.

Дэвид Бушелл делится гайдом, как собрать хороший дейтпикер для сайта. Спойлер: нативные инпуты.

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

При этом нативные инпуты тоже не идеальный вариант. В разных браузерах разный внешний вид. Нужно писать код руками (о ужас!).

Но в гайде есть примеры, как сделать хорошо. И доступно. И удобно.

Гайд в процессе написания, так что можете присылать автору свои идеи и комментарии.

https://pikaday.dbushell.com/

Примеры использования field-sizing

Есть такая мощная комбинация для элементов форм: field-sizing: content. Напишете так — получите подстраивание размера инпута под контент внутри.

Ахмад Шадид делится различными примерами, где применение свойства выглядит полезным.

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

https://ishadeed.com/article/field-sizing/

Harmonizer

Ещё один полезный инструмент от Злых Марсиан.

В интернетах много генераторов палитр можно найти, но здесь — современный, доступный, в виде плагина для Figma и в виде веб-приложения. Цвета — «оклыч» (OKLCH), проверка контрастности — APCA. Есть удобный предпросмотр для тёмной и светлой темы, причём палитра математически подстраивается сама. И сразу же можно выгрузить палитру в виде CSS-переменных и не только.

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

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

https://evilmartians.com/opensource/harmonizer

View Transitions Feature Explorer

Спецификация View Transition API постепенно разрастается, всё чаще нужно понимать, какие её части в каких браузерах работают.

Брамус собрал демку-подсказчик, которая поможет разобраться. Со ссылками на документацию и релиз-ноуты.

Интересно, что внутри демки тоже используются View Transitions.

https://codepen.io/web-dot-dev/full/EaPbbgx

Когда «идеальный» код падает

Марек Маркевка пишет простую функцию внутри Next.js-приложения.

const isOwner = (userMail: string, ownerMail: string) => {
  return userMail === ownerMail;
};

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

Беда в том, что в месте вызова isOwner(email1, email2) всегда возвращается true. Почему так? Читайте в статье.

На самом деле статья про то, что всякие автоматизации поверх вашего кода нужно понимать и знать. Next.js и React 19 принесли много «полезной автоматики», которая может привести к критичным багам в проде, если не разбираться, во что ваш код на самом деле превращается в итоговом продовом бандле.

Я поэтому предпочитаю сначала всякие улучшалки выключить совсем, а потом постепенно по одной включать, пробовать, экспериментировать.

https://marma.dev/articles/2025/when-perfect-code-fails

Настоящее и будущее прогрессивного рендеринга изображений

Не смогу в короткой заметке рассказать всё то, что рассказал Джейк Арчибальд в своей статье. Обязательно почитайте её. Или послушайте 497-й выпуск подкаста «Веб-стандарты», где мы подробно обсудили статью голосом. Но постараюсь дать основные выводы.

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

JPEG всё ещё лучший по метрикам размера картинки и времени на декодирование в браузере. WebP тоже хорош, но Safari грузит картинку только целиком.

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

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

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

Тем не менее это не повод бежать выключать прогрессивный рендеринг ради экономии 3 kB на картинку. Где-то оно всё же поможет.

https://jakearchibald.com/2025/present-and-future-of-progressive-image-rendering/

Давай поиграем со шрифтами

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

Как всегда, видео опубликую здесь, как только оно появится в общем доступе.

Слайды: https://mefody.dev/talks/fonts-loading/

Дополнительные материалы: https://gist.github.com/MeFoDy/f44aa1d3f027500d1663abe60532f44b

Yandex Cup 2025

Надо же иногда рассказывать, чем я вообще на работе занимаюсь.

Моя команда делает платформу Контест, на которой проводятся различные соревнования по программированию и не только. И вот сейчас у нас проходит большой международный чемпионат Yandex Cup, в котором есть направление «Фронтенд-разработка».

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

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

https://yandex.ru/cup/frontend

Next.js 16 (beta)

Если у вас проект написан на Next.js, то сейчас можно поиграться с бетой 16-го мажорного обновления.

- Переключили дефолтный бандлер на Turbopack. По замерам команды сборка проектов ускоряется в 2–5 раз.
- Поддержка React Compiler. По умолчанию не включён. Но добавляет оптимизаций, мемоизаций и автоматизаций при включении.
- Опять изменения в роутинге. На этот раз систему навигации переписали, чтобы эффективнее работать с запрашиваемыми ресурсами и префетчингом. В коде ничего менять не нужно.
- Переделали работу с Caching API. Добавили больше методов. Мне почему-то каждый раз страшно, когда вижу обновления в этой части Next.js. Надеюсь, в этот раз новых секьюрити-багов не насыпали.
- Вместе с React 19.2 приехала работа с View Transitions в реактовом стиле. Можно будет делать красивые переходы между страницами.

Больше подробностей — по ссылке.

https://nextjs.org/blog/next-16-beta

Interop Feature Ranking

Помните, есть такой проект Interop, где браузеры раз в год определяют для себя список фичей, для которых они обещают за будущий год повысить кроссбраузерность?

Джейк Арчибальд, который теперь работает в команде Firefox, собрал дашборд, который поможет команде Firefox более взвешенно обработать пожелания разработчиков для Interop 2026. Обычно все предложения — это просто ишьи на гитхабе, и для меня, например, всё ещё тайна, как браузеры выбирают из списка то, что точно будут делать. Потому что самые залайканные ишьи часто в Interop не попадают.

Интересный дашборд, оставил в нём свои хотелки, делал по инструкции. И вы не стесняйтесь влиять.

https://interop-rank.jakearchibald.com/

ESLint v10.0.0

В грядущем мажорном обновлении линтера есть много изменений, но хочется обратить внимание на самые важные (на мой субъективный взгляд).

1. Прекращение поддержки версий ниже Node.js v20.19.0.

2. Файлы .eslintrc.* и .eslintignore перестанут работать. Пора переезжать на eslint.config.js, если ещё не переехали.

3. Конфиг eslint:recommended тоже обновится, добавят пару новых правил по умолчанию.

https://eslint.org/blog/2025/10/whats-coming-in-eslint-10.0.0/

Агенты в Playwright

В Playwright теперь есть три агента: планировщик, генератор и хилер.

Планировщик — исследует приложение, пишет план для тестирования в Markdown.

Генератор — превращает план тестирования непосредственно в Playwright-тесты.

Хилер — прогоняет тесты и чинит упавшие. Не код приложения, к сожалению, а код тестов.

Мне прям интересно заиспользовать планировщик для автоматической генерации ручных тестов. Понятно, что придётся допиливать напильником, но не с нуля, экономия времени. И можно для функциональности без тестов быстро сгенерировать хотя бы базовый e2e-тестсет.

https://playwright.dev/docs/test-agents

Динамический тултип

Темани Афиф делится коротким сниппетом, который позволяет собрать тултип на чистом CSS. Тултип пытается вместиться во вьюпорт любым легальным способом. И следует за якорем.

То, для чего мы сейчас используем JS-библиотеки на 200 килобайт, можно будет заменить на пару десятков строк CSS благодаря Anchor Positioning.

(Не забывайте проверять CanIUse)

https://css-tip.com/tooltip-anchor/

State of JavaScript 2025

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

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

https://survey.devographics.com/en-US/survey/state-of-js/2025