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

#дайджест недели, а точнее, двух Понедельник Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки. 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

#ссылка дня CSS Wrapped 2025 от разработчиков Google Chrome! Это отличный способ наверстать всё, что произошло в CSS за год, даже если ты вообще ничего не читал и не следил. Google собрали самое важное в одну компактную, приятную страницу. Пластилиновую! В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS. Но не всё — в Safari :( Состояние скролла теперь можно ловить прямо в CSS, появились функции для подсчёта соседей в DOM, а анимации и переходы стали куда более контролируемыми и предсказуемыми. Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия. Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/ #css #google #chrome

#фишка дня Не совсем про разработку, но достаточно интересно. Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг 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 #бородач

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

#игра дня GameShell — это консольная игра-тренажёр, вдохновлённая классическими текстовыми адвенчурами, где весь мир существует в виде текста, а действия — это команды. Только здесь команды настоящие Unix. Игра учит работать с терминалом через задания и миссии, превращая обучение в квест. Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки. GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса. Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами. Очень круто, однозначно рекомендация. #bash #game #console

Реальная история: Дизайнерское агентство разработало интерфейс приложения в сервисе Figma, но из-за того, что карты Visa и Mastercard оказались заблокированы, не смогли выгрузить проект. Потому что день самовыпиления платежек в России совпал с днём оплаты подписки. Осложнялось всё тем, что они могли олатить сервис только с корпоративной карты. Читпей организовали оплату в течение 10 минут. Ребята оплатили подписку, и выгрузили проект. Интерфейс приложения был спасён! Что делает CheatPay: Помогает оплатить зарубежные сервисы российскими картами, в том числе Visa и Mastercard. Например: Потеряли доступ к Zoom, Airtable, Atlassian, Canva и другим программам для управления IT-проектами? Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects? Другие сервисы? Помогут. Обращаться в https://t.me/cheatpay_ru

#заметка дня 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

#ссылка дня Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы. Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему. Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений. Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия. Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил? Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия. И так с любым проектом. Думать надо. Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/ Мифы о доступности на разных языках. Всем читать, котаны. #a11y #бородач

Ищем новичков во frontend-разработке и вёрстке сайтов. Айтилогия запускает бесплатное обучение, где будет: 1. Практика на реальном заказе ценой до 10 000₽. 2. Разбор работ куратором. 3. Задачи от Fullstack-разработчика с 12-летним опытом. 4. Именной сертификат. И главное — ты почувствуешь уверенность. Потому что увидишь, что выполнить заказ на frontend-проект тебе по силам. 👉 Приходи на бесплатное обучение и зови с собой друзей 🔥 С 2019 Айтилогия стабильно помогает с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.

#молния дня В 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