#заметка дня

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

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

Но нас тут заинтересовало, зачем Cloudflare добивает стандартную страницу ошибки комментариями?

<!-- a padding to disable MSIE and Chrome friendly error page -->

...не, ну ок, вроде оно само говорит, зачем. Но почему?

Дело в том, что если страница ошибки короче определённого минимального размера (обычно 512 байт), браузер скрывает её и показывает свою стандартную ошибку вида «This page cannot be displayed».

Очевидно, это не шибко-то и удобно: скрывает реальную причину проблемы, мешает автотестам. Собственно, в Internet Explorer была настройка скрытия дружелюбных страниц ошибок, а вот в Chrome так никогда и не сделали.

Да-да, динозаврик — это вот оно, оттуда. Очень весело, очень бесполезно.

Вот даже проблему в трекере подняли лет 15 назад: https://issues.chromium.org/issues/40361889, без подвижек.

На самом деле, добитие комментариями, конечно, не решение Cloudflare. Это работа сервера nginx: https://hg.nginx.org/nginx/file/release-1.6.0/src/http/ngx_http_special_response.c

Одобряем такое поведение, или динозаврик получше будет, котаны?

#nginx #cloudflare #error

#такое дня

Отлично провёл вечер в компании шестигранных ключей. Засор чистил-с.

#фишка дня

Не совсем про разработку, но достаточно интересно.

Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...

А он чёрный. Элементы UI и... чёрный экран.

— DRM, — подумал Штирлиц.

И таки да, DRM. Защита авторских прав содержимого.

Виральность? Не, не слышали.

Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.

Есть хорошее описание её работы: https://hsivonen.fi/eme/

Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.

CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.

CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.

Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.

А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!

Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).

#drm #eme #api #бородач

#ссылка дня

CSS Wrapped 2025 от разработчиков Google Chrome!

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

Пластилиновую!

В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS.

Но не всё — в Safari :(

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

Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия.

Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/

#css #google #chrome

#дайджест недели, а точнее, двух

Понедельник

Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
https://news.1rj.ru/str/htmlshit/3922

Среда

Обсуждение адвент-календарей по разработке и статьям.
https://news.1rj.ru/str/htmlshit/3923

Четверг

Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
https://news.1rj.ru/str/htmlshit/3925


Воскресенье

Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
https://news.1rj.ru/str/htmlshit/3927

Понедельник

GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
https://news.1rj.ru/str/htmlshit/3928

Вторник

Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
https://news.1rj.ru/str/htmlshit/3930

Среда

Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
https://news.1rj.ru/str/htmlshit/3932

Пятница

CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://news.1rj.ru/str/htmlshit/3933

#статья дня

Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).

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

Для этого в Chrome и Safari не так давно появился text-box-trim — CSS-правило, позволяющее обрезать это дополнительное пространство и привести текстовый бокс к реальным границам глифов:

.text {
text-box: trim-both cap alphabetic;
}

А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim

В Firefox пока не работает совсем.

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

text-box-trim — это попытка решить задачу на уровне браузера и сделать точную вертикальную типографику частью нативного CSS.

Давно пора или классическая типографика — наше всё, котаны?

#css #trim

#статья дня

SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.

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

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

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

Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.

#ai #code #security

#заметка дня

Минутка удивительно полезной информации!

Почему Vite.js стартует на порту 5137, а не на 8000, 8080, 8888 и прочих стандартных для разработки веба портах?

Потому что, следим за руками:

V — 5
I — 1
T — 7
E — 3

Я уже вижу, как вы потянулись к клавиатуре чтобы написать: «Пять и один-то понятно, римские. А 7 и E тут при чём?»

Так вот, котаны, это называется leetspeak. Пруф: https://en.wikipedia.org/wiki/Leet

Просто 7 похожа на T, а 3 на E. А ещё всё это вместе похоже на SITE :)

Кстати, Evan You, собственно, создатель Vitejs, Vitest, и Vue.js, подтвердил это достаточно давно.

Какие ещё будут примеры, помимо 1337? :)

#web

#фишка дня

Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.

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

Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.

Демо: https://codepen.io/alinaki/pen/abeOjKw

Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/

Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.

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

Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents

Спасибо Весу Босу за напоминание об этом.

#css #display #contents #бородач

#статья дня, даже две

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

Речь про Sanitizer API — нативную замену innerHTML, которая сразу учитывает XSS и не оставляет это на совести разработчика. Вместо работы со строками используется setHTML(): HTML парсится один раз, очищается и сразу вставляется в DOM.

Это снижает риск обходов безопасности, возникающих при раздельном парсинге и сериализации строк.

API по умолчанию намеренно жёсткий. Удаляются <noscript>, <iframe>, <object>, <embed>, SVG-элементы, style, link, все form-теги, кастомные элементы, комментарии и любые on*-атрибуты — по факту остаётся минимум безопасного HTML, остальное надо разрешать вручную через конфигурацию. Подробности: https://olliewilliams.xyz/blog/sanitizer/

Первая реализация появилась в Chrome, но её удалили, потому что спецификация сильно изменилась и текущая версия API её не отражает. Команды решили не фиксировать «устаревший» API в движках и сейчас переписывают его в соответствии с обновлённым стандартом.

И вот, собственно, статья о том, как все вместе приходили к упрощению API: https://frederikbraun.de/why-sethtml.html

Ссылки на ишью с намереними релизнуться:
https://groups.google.com/a/chromium.org/g/blink-dev/c/iu3VwMotMBc
https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ddjRQbYKuk

Актуальный Sanitizer API в соответствии с новой уже есть в Firefox Nightly и в Chrome Canary за флагом. Ожидаем в 145 Хроме и 148 Лисе.

А вот Safari как обычно. Полифиллим, котаны?

Ах, да! MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API/Using_the_HTML_Sanitizer_API

#sanitizer #xss

#фишка дня

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

Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: https://news.1rj.ru/str/htmlshit/3594

И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.

Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:

dynamic-range-limit: standard;

...X ещё добавляет

filter: brightness(1);.

Забавно, что такая аватарка — у недавно пошедшего войной чуть ли не на весь интернет сооснователя Wordpress.

В общем, если вы не осилили нормализацию изображений в моменте загрузки — пользуйтесь :)

Работает в Chrome 136 и далее и Safari 26 и далее. А пользователи Firefox пока страдают.

#css #hdr

#заметка дня

Вам всем наверняка знакома раскладка masonry — «кладка каменщика». Собственно, название она получила от Masonry.js, библиотеки сетки, влияние которой на веб сложно переоценить.

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

Собственно, в 2020 Firefox стал первым браузером, внёс масонри в display: grid под флагом и так и сидел все эти годы. А Chrome 140 (и соответствующий Edge) так и назвали — display: masonry.

Масонам это не понравилось.

Потому в стандарт пошло название grid-lanes. Да-да, display: grid-lanes, частью grid это так и не стало (и очень хорошо).

Короче, к чему это я. Буквально три недели назад команда WebKit смёрджила в стабильную базу PR, который включает поддержку grid-lanes. И, соответственно, выпустила Safari Technology Preview 234 под соответствующую новость в блоге: https://webkit.org/blog/17660/introducing-css-grid-lanes/

Там очень подробная статья о том, как и когда применять, какие режимы есть, какие настройки.

Chrome и Firefox тоже уже вносят изменения в свой код, так что Masonry в Baseline не за горами!

P. S. кстати, скачивать разные ранние версии WebKit задолго до выхода очередной версии Safari TP можно отсюда: https://webkit.org/build-archives/

#css #masonry

#фишка дня

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

Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.

Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута hidden есть уникальное для Chrome значение until-found, говорящее само за себя.

Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found

Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom

Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.

Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:

if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}

Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.

#chrome #hidden #бородач

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

На связи Глеб, который принес немножечко странного.

Думали ли вы когда-нибудь о том, что алгоритмы сжатия строк потребуются для передачи состояния приложения?
Всё когда-нибудь случается впервые, вот и мне потребовалось передавать в ссылке текущее состояние редактора кода (в нашем продукте это один из основных иструментов).

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

Оказывается не так уж это сложно если вспомнить про алгоритмы сжатия.
Сериализуем объект, сжимаем его с помощью библиотеки lz-string и генерируем ссылку с параметрами состояния редактора в одном из параметров.
Попробовать можно в codepen.

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

В CedrusData (компания, в которой работаю) много интересных задач, в том числе связанных с производительностью. Ждите новых заметок😎

#compression #performance

#фишка дня

Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»

Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb

Весь секрет в наложении маски в виде градиента под элемент:

    &::after {
      mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
    }

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

Работает, кстати, во всех современных браузерах.

#css #gradient #mask

#ссылка дня

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

Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.

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

Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.

Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers

Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.

Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).

#docs #explainers #process #бородач

#новый год дня

С Новым годом, котаны! Пусть всё… дополняйте!

#статья дня

Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.

В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.

Так вот, к чему это я.

Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.

Как вам такое: отрисовка дерева с помощью... списков!

Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL

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

Начало тут: https://fractaledmind.com/2018/03/05/css-tree/

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

#css #html #tree #list

#статья дня

Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.

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

Так вот, сегодня на поветске дня — как украсть любой React-компонент!

И в этом нам поможет React DevTools, любая сносная LLM-ка и вот эта инструкция: https://fant.io/react/

TL;DR
React-приложение хранится не только в DOM-представлении, но и в виде React Fiber — внутреннего дерева (тот самый виртуальный DOM), где видно, какой компонент и с какими пропсами создал разметку.

Все экземпляры одного компонента ссылаются на один и тот же т. н. type, поэтому можно сгруппировать их и собрать реальные примеры прямо из продакшена.

Эти примеры вместе с минифицированным кодом компонента скармливаются LLM, которая восстанавливает чистый React. Дальше идёт проверка: компонент рендерится с теми же пропсами, HTML сравнивается с оригиналом, а расхождения отправляются обратно модели. Компоненты собираются снизу вверх, от простых к составным. Анимации и сложные состояния чуток могут замедлить процесс, но для статичного UI он работает прям хорошо.

Дивный новый мир. А чтобы понимать внутренности Fiber, можно использовать инструмент со странным названием bippy: https://github.com/aidenybai/bippy, когда, что и почему отрендерилось.

#react

#статья дня

Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!

Во втором дне календаря 2025 года речь идёт о теге <plaintext>. Это устаревший элемент, который запрещён стандартами, но до сих пор поддерживается браузерами.

Штука гениальная: как только браузер встречает <plaintext>, он прекращает разбор HTML. Всё, что идёт дальше, воспринимается как обычный текст, независимо от того, что там написано.

<body>
  <h1>Заголовок</h1>
  <plaintext>
  <div>Этот div не станет элементом</div>
  <noscript>alert('xss')</noscript>
</body>

В браузере и <div>, и <noscript> будут выведены как текст. DOM на этом месте обрывается, ошибок в консоли нет, с точки зрения браузера всё произошло корректно.

Существенная часть статьи посвящена тому, как <plaintext> ведёт себя при санитайзинге HTML. Разные санитайзеры обрабатывают его по-разному: кто-то удаляет, кто-то экранирует, кто-то оставляет в форме, которая всё равно влияет на парсинг. В результате один и тот же входной HTML после «очистки» может либо работать нормально, либо полностью ломать страницу.

Например, обнулить CSP.

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

#html #sanitize