Будни разработчика

#ссылка дня

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

Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему.

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

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

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y #бородач

#молния дня


В React обнаружили критическую уязвимость в механизме серверных компонентов (React Server Components). Из-за ошибки в том, как React разбирает входящие данные, сервер может попытаться выполнить вредоносный объект как часть своей логики. Достаточно специально подготовленного HTTP-запроса — и код на сервере окажется под контролем не того, кто его писал.

Это не проблема конкретного фреймворка. Под удар попадает любой проект, где используются RSC: Next.js, Remix (с RSC-вставками), любые кастомные серверные интеграции, экспериментальные рантаймы, кастомные бандлы — неважно. Если у вас есть React Server Components, риск реальный.

Уязвимы версии пакетов react-server-dom-* — 19.0.0, 19.1.0, 19.1.1, 19.2.0.
Официальное описание: https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components

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

Патчи уже вышли: React закрыл её в версиях 19.0.1, 19.1.2, 19.2.1.

Если у вас Next.js, то актуальные безопасные релизы: 15.0.5+ и 16.0.7
(детали: https://nextjs.org/blog/CVE-2025-66478)

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

Кстати, вот и технический разбор как проблемы, так и патча: https://www.ox.security/blog/rce-in-react-server-components/

#react #rsc #next

#поделись дня

Я в этом году просрал все сроки поиска интересных адвент-календарей по коду и разным статьям.

Поэтому, делитесь, котаны. Кто что читает в этом декабре?

Я вот только календарь от HTMHell сходу вспомнил: https://htmhell.dev/adventcalendar/, одна статья в день.

Ну и, пожалуй, ещё https://adventjs.dev/en, возможно, я даже в него ещё запрыгну и буду с вами делиться.

Показывайте ваши!

#advent

#статья дня

Google в очередной раз доказал всем, что дизайн — это не про них.

Если вы, как и я, понимаете, что на этой иллюстрации не так — обнимемся.

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

— Почему при обычном центрировании слоёв и фигур иконки всё равно могут выглядеть «смещёнными» и невыровненными?
— Почему важно не просто «на глаз» выравнивать иконки, а знать, где у фигуры настоящий центр — её геометрический «центр тяжести» (барицентр)?
— Почему автоматизация поиска центра фигуры и её выравнивание — более надёжный путь, чем ручная корректировка, особенно при большом количестве иконок в интерфейсе?

Всё там :) Очень рекомендую.

Кстати, раз уж снова подняли эту тему, маленький лайфхак для дизайнеров: размойте иконку и сразу станет понятно, сбалансирована она, или нет. Вот как тут.

#design #alignment #icons

#дайджест недели

Понедельник
Jhey показал эффект с подсветкой краёв карточек по движению мыши — координаты курсора, CSS и SVG-фильтры. Аккуратная демка, чистая реализация.
https://t.me/htmlshit/3914

Вторник
virtua — библиотека для виртуализации списков с динамическими размерами, бесконечным скроллом и поддержкой популярных фреймворков. Быстрая и универсальная.
https://t.me/htmlshit/3916

Среда
ESLint Plugin De Morgan переписывает отрицания по законам де Моргана. Два правила, автофикс, без зависимостей — мелочь, но делает логику чище.
https://t.me/htmlshit/3917

Пятница
Хороший буст к скорости тестов: заменить ts-jest на @swc/jest. SWC работает быстрее за счёт native-кода и отсутствия проверки типов — проекты ощутимо ускоряются.
https://t.me/htmlshit/3919

#инструмент дня

История от подписчика!

На иллюстрациях — время прогона тестов, стало и было. Как добиться подобного?

Сменой тулинга, конечно же!

Переход с ts-jest на @swc/jest даёт ощутимый прирост скорости. ts-jest завязан на стандартный TypeScript-компилятор. Он работает в одном потоке, выполняет полноценную проверку типов и в целом довольно медленно трансформирует файлы. В больших проектах это приводит к заметной задержке перед запуском любого тестового набора.

@swc/jest использует SWC — транспайлер, написанный на Rust. Его ключевые особенности:

* трансформация работает в нативном коде без виртуальной машины;
* парсер и трансформер многопоточные;
* типы не проверяются, а просто удаляются;
* преобразование максимально близко к «быстрому проходу».

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

Дополнительно ускорить прогон помогает параллелизация. В GitLab CI достаточно указать:

parallel: 3

...и тесты будут запускаться одновременно в нескольких процессах.

Результаты после перехода на @swc/jest:

* 54 тестовых набора, 1018 тестов, 100 снапшотов — 4.48 секунды.
* Меньшая выборка — 13 наборов, 258 тестов — 4.23 секунды.

Ускорение достигается только заменой трансформера: многопоточная трансформация в SWC + отсутствие тайпчекера даёт сразу заметный выигрыш без изменений в самих тестах.

Какой тулинг у вас, котаны?

#swc #jest #typescript

#инструмент дня

Зачем писать !(a && !b && c >= 10 && d !== e), если можно !a || b || c < 10 || d === e?

Ответ на эти и другие вопросы прост: «Потому что не подумал».

Но думать — сложно. И не всегда нужно. Поэтому в IDE от JetBrains встроен преобразователь логических вырадений по законам де Моргана.

А тем, кто предпочитает быть свободным, приходится искать иные решения.

Иногда — даже думать.

И тут есть вариант, откуда не ждали: правило для ESLint!

ESLint Plugin De Morgan: https://github.com/azat-io/eslint-plugin-de-morgan

Запросто преобразует ваши const value = !(a || b !== c) в const value = !a && b === c.

В плагине два правила:

- no-negated-conjunction
- no-negated-disjunction

Все правила имеют автофикс. У плагина нет зависимостей. Поддерживает как современный, так и легаси формат ESLint конфигов.

Твиттер автора с анонсом: https://x.com/azat_io/status/1888874193007132762

Пользуемся, котаны!

#boolean #eslint #logic #бородач

#инструмент дня

Кому адекватной современной виртуализации списков?

Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.

В других фреймворках и ванильных средах ситуация ещё веселее.

При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.

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

Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.

GitHub: https://github.com/inokawa/virtua

Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.

Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.

Отличное современное решение.

#scroll #virtual #бородач

#codepen дня

Jhey стал очень редко радовать нас новыми дропами — готовится к изданию своего курса по эффектной вёрстке, потому кодом делиться — увы — почти перестал.

Но надо отдать должное, когда идея не полностью исходит от него — он всё ещё продолжает демонстрировать уровень!

Итак, помните мы с вами пытались делать эффект Ambilight? Как оказалось, ту же идею можно применить чтобы подсветить края карточек!

Немного JS для передачи координат курсора в CSS, немного SVG-фильтров для размытия продублированного контента — и вы неотразимы!

Собственно, пример: https://codepen.io/jh3y/pen/WbwZaNa

Не забудьте потыкать настройки, чтобы понять реализацию.

#svg #css #ambilight

#дайджест недели

Понедельник
Supercookie — демонстрация того, как обычная favicon может работать как устойчивый идентификатор. Старый трюк, но теперь есть аккуратный POC, который узнаёт вас по иконке.
https://t.me/htmlshit/3909

Четверг
Как вставлять табличные данные из Google Sheets прямо в форму на сайте: ловим paste, парсим табы, раскладываем по input’ам.
https://t.me/htmlshit/3911

Пятница
HTML-in-Canvas: эксперимент, который позволяет <canvas> рисовать настоящий HTML со стилями и вложенностями. Пока сыро, но выглядит как первый нормальный путь к HTML-в-картинку без костылей.
https://t.me/htmlshit/3912

Короткая неделя вышла, котаны.

#новость дня

Если нужно превратить HTML в картинку, приходится пользоваться утилитами разной степени кривизны — ведь нужно имитировать DOM. Cтабильного решения не было вообще (наверное, только Playwright и скриншот).

Теперь начинает появляться что-то вменяемое.

WICG выкатили идею под названием HTML-in-Canvas: холст учат рисовать обычные HTML-элементы: https://github.com/WICG/html-in-canvas

Прямо так, как браузер их и так рисует в DOM — со стилями, размерами, текстом, вложенностями. Только вместо того, чтобы показывать их на странице, он превращает элемент в картинку внутри <canvas>.

На самом деле, выглядит весьма проклято, вот пример с иллюстрации:

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id="drawElement" style="width: 550px;">
    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
    <br>I'm multi-line, <b>formatted</b>,
    rotated text with emoji (&#128512;), RTL text
    <span dir=rtl>من فارسی صحبت میکنم</span>,
    vertical text,
    <p style="writing-mode: vertical-rl;">
      这是垂直文本
    </p>
    an inline image (<img width="150" src="wolf.jpg">), and
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="20" fill="green" />
      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
        SVG
      </text>
    </svg>!
  </div>
</canvas>

Почему нельзя просто API для DOM? Потому что там целая плеяда сесурити-специалистов выступает против.

Работает это пока только в Chrome Canary от 138 и выше, и включать надо отдельный флаг. Плюс есть ограничения: рендерятся только те элементы, которые лежат внутри самого канваса, и некоторые штуки браузер сознательно блокирует — типа чужих iframe или странных SVG. Но в целом — оно работает.

Флаг, кстати, такой: --enable-blink-features=CanvasDrawElement.

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

#html #canvas

#фишка дня

Таблица до сих пор превосходит все попытки её имитировать по очень простой причине:
если скопировать её из браузера, она спокойно вставится в Excel или Google Sheets как нормальный диапазон.

Но вот обратное направление не работает. Скопировал диапазон из Sheets — а в браузере всё рассыпалось в текст, будто ничего и не было.

Иногда это мешает: есть форма с табличкой на сайте, есть данные в Google Sheets, и единственное желание — просто вставить их туда, не перепечатывая по ячейке. Чтобы привычный Ctrl+V вёл себя так же естественно, как в Excel.

Для таких случаев можно сделать маленькую, но удобную вещь — ловить событие вставки и парсить табличные данные из буфера, распределяя их по нужным полям:

document.addEventListener("paste", function (e) {
  const text = e.clipboardData.getData("text");
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  e.preventDefault();
});

Так можно взять диапазон в Google Sheets, нажать Ctrl+V в браузере — и данные разложатся по ячейкам формы, словно это штатная функция.

Я пример забыл, а вы и молчите: https://codepen.io/alinaki/pen/KwzvEeX

#js #table

Yet Another Frontend Night: глубже про AI в реальных проектах Яндекса

Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Главная тема — практическая интеграция AI в фронтенд. Команда Яндекса поделится своими инсайтами, какие нейросетевые инструменты помогают им в работе, как меняется процесс разработки и какие вызовы возникают при решении реальных задач.

Доклады топовых экспертов Яндекса:

— Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
— Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
— Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
— Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
— Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают

Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется.
Подробности и регистрация

#ссылка дня

Сupercookie — https://github.com/jonasstrehle/supercookie
— показывает почти абсурдный рабочий (но в 2025 году лишь частично) способ отслеживать людей через обычную фавиконку.

Браузер хранит эти маленькие иконки так упорно, что по одному только факту: «запросил он её повторно или нет», можно собрать устойчивый идентификатор.

Кстати, поскольку тема не новая, я решил проверить.

Итак:
1. В Chrome стабильно устойчиво, даже после перезапуска браузера
2. В Chrome Incognito устойчиво в пределах сессии, новая сессия — новый айди.
3. В Firefox устойчиво в пределах сессии. Перезапуск бораузера — новая сессия, новый айди.
4. В Firefox Private Window аналогично инкогнито в Chrome: новое окно — новый айди.
5. В Safari вообще определить не смогло — постоянный редирект :)

Фавиконка уже давно время от времени выстреливает в самых неожиданных местах. Когда-то находили утечки приватного режима в Firefox — браузер сохранял фавиконки даже там, где вообще не должен был ничего помнить. Были случаи, когда соединение, открытое ради favicon, не закрывалось даже после того, как вкладку закрыли.

То есть сама механика суперкуки не падает с неба. И теперь это оформлено в аккуратный POC: заходишь на демо в репозитории, а оно спокойно узнаёт тебя, потому что favicon-кэш живёт своей отдельной жизнью.

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

А какова была тема вашей диссертации, котаны? Я вот Шазам копировал.

Если что, есть перевод: https://habr.com/ru/companies/itsumma/articles/542734/

#favicon #security

#дайджест недели

Понедельник
Вариативные шрифты: напоминание, что осей вариативности куча — не только жирность. Забавный шрифт Cheee с пачкой настроек, пример на CodePen, разбивка — через GSAP SplitText.
https://t.me/htmlshit/3897

Вторник
Кастомный веб-компонент для гитарных аккордов: атрибуты → CSS-переменные, дальше гриды. Работает для любого числа струн и любых инструментов.
https://t.me/htmlshit/3899

Среда
Красивый вывод в консоль: спецификатор %c + CSS-стили. Именно так Photoshop Web пихает свой логотип прямо в devtools.
https://t.me/htmlshit/3901

Четверг
Satori от Vercel превращает HTML в SVG — удобно для OG-картинок, отчётов, визиток, карт.

https://t.me/htmlshit/3903
ImageMagick: простой способ центрировать текст через -gravity center и -extent.
https://t.me/htmlshit/3904

Пятница
Visual Types — интерактивный «кликер» для изучения TypeScript: типы, unknown/any, условные типы, паттерны, диаграммы.
https://t.me/htmlshit/3905

Суббота
<css-doodle/> — язык для генеративных паттернов на CSS: flip, reverse, random, shape.
https://t.me/htmlshit/3906

#библиотека дня

Я тут такое нашёл, закачаешься. Очередные выкрутасы с Shadow DOM. На сей раз — метаязык для описания паттернов.

Короче говоря, можно шикарные фоны делать не ограничивая себя возможностями градиентов.

Называется это всё <css-doodle/>: https://css-doodle.com/

Описываем нужный нам паттерн используя правила CSS и простые функции типа flip, reverse, shape, random и так далее, там полновесный декларативный язык.

Огромное число примеров, большое сообщество. Вот, например, автор описывает как сделать классический китайский орнамент на простых flip-invert-reverse функциях: https://yuanchuan.dev/flip-invert-reverse

В общем, потрясающая штука.

#css #pattern #doodle #бородач

#ссылка дня

Интерактивный... кликер (?) для изучения типов в TypeScript: Visual Types.

Показывает всё то, что, в общем, есть в хендбуке, но гораздо нагляднее. Где-то просто на примере объектов, где-то — в виде диаграмм и кругов Эйлера.

Дело, конечно, не ограничивается только типами. Есть и объяснение unknown против any, есть условные типы, есть паттерны и даже мапы.

В общем, есть что покликать на вечер, чтобы потом вспоминать :)

#typescript #tool

#такое дня

Насмотревшись на миллион способов отцентрировать текст в нашем рабочем репозитории, я почему-то вспомнил о том, что есть способы сильно проще.

magick -background lightblue -fill black -font Helvetica -size 800x200 -gravity center caption:"CSS is a scam" -extent 1200x600 text.png

🎉

Извините.

#imagemagick #terminal

#инструмент дня

Ты тоже верстать умеешь лучше, чем рисовать? Say no more!

Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori

Зачем это надо?

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

Короче, крутая штука же.

#svg #html #бородач