#игра дня

GameShell — это консольная игра-тренажёр, вдохновлённая классическими текстовыми адвенчурами, где весь мир существует в виде текста, а действия — это команды. Только здесь команды настоящие Unix. Игра учит работать с терминалом через задания и миссии, превращая обучение в квест.

Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки.

GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса.

Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами.

Очень круто, однозначно рекомендация.

#bash #game #console

#заметка дня

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://t.me/htmlshit/3922

Среда

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

Четверг

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


Воскресенье

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

Понедельник

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

Вторник

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

Среда

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

Пятница

CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://t.me/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 по умолчанию намеренно жёсткий. Удаляются <script>, <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://t.me/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 #бородач

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

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