14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.
Зачем писать код, если можно украсть? Особенно, когда сам в руки идёт. Ведь если даже генерировать что-то, нужно, как минимум, учитывать требования по работе, дизайну... никто не отменял понимание сути задачи.
Так вот, сегодня на поветске дня — как украсть любой 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
#статья дня
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.
Так вот, к чему это я.
Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.
Как вам такое: отрисовка дерева с помощью... списков!
Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL
Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.
Начало тут: https://fractaledmind.com/2018/03/05/css-tree/
Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?
#css #html #tree #list
#ссылка дня
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process #бородач
#фишка дня
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
&::after {
mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
}
Разверните свою облачную среду за несколько минут: виртуальные машины, S3-совместимое хранилище, Managed Kubernetes, базы данных.
▪️Быстрый старт, прозрачный биллинг, российские дата-центры.
▪️Удобные интерфейсы управления: веб-консоль, CLI, API, Terraform.
▪️Собственная разработка: развиваем облако так, как нужно пользователям, а не ждём решений от вендоров.
Развивайте свои IT-продукты. Об инфраструктуре позаботится облако.
Попробуйте MWS Cloud Platform бесплатно с грантом для новых пользователей.
#заметка дня
Вам всем наверняка знакома раскладка 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
#статья дня, даже две
Похоже, команды браузеров всё-таки пришли к общему пониманию, как должен выглядеть безопасный способ вставки 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
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило 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 #бородач
#заметка дня
Минутка удивительно полезной информации!
Почему 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
#статья дня
Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (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
#ссылка дня
CSS Wrapped 2025 от разработчиков Google Chrome!
Это отличный способ наверстать всё, что произошло в CSS за год, даже если ты вообще ничего не читал и не следил. Google собрали самое важное в одну компактную, приятную страницу.
Пластилиновую!
В этом году в CSS сильно прокачали готовые элементы: диалоги стали умнее, поповеры — гибче, а <select> наконец можно нормально стилизовать. Появились и новые мелочи вроде скролл-кнопок и скролл-маркеров, которые позволяют делать аккуратные нативные галереи без лишнего JS.
Но не всё — в Safari :(
Состояние скролла теперь можно ловить прямо в CSS, появились функции для подсчёта соседей в DOM, а анимации и переходы стали куда более контролируемыми и предсказуемыми.
Отдельная тема — сахар. Это всё, что делает код чище: новые функции вроде if() и shape(), более понятные размеры, формы и условия.
Всё очень приятно оформлено, заходите хотя бы просто посмотреть: https://chrome.dev/css-wrapped-2025/
#css #google #chrome
#такое дня
Отлично провёл вечер в компании шестигранных ключей. Засор чистил-с.
#игра дня
GameShell — это консольная игра-тренажёр, вдохновлённая классическими текстовыми адвенчурами, где весь мир существует в виде текста, а действия — это команды. Только здесь команды настоящие Unix. Игра учит работать с терминалом через задания и миссии, превращая обучение в квест.
Проект родился как университетская учебная разработка: автор сделал GameShell для студентов, которым нужно было быстро освоить базовые Linux-команды. Идея сработала — вместо скучных лекций студенты начали проходить практические миссии, используя реальные инструменты командной строки.
GameShell полностью open-source, работает на Linux, macOS, есть образ Docker. Установка минимальна: скачал скрипт, запустил — и получил тренировочное окружение с сохранением прогресса.
Каждая задача — маленькая текстовая «комната» из старых приключенческих игр, только с реальными командами.
Очень круто, однозначно рекомендация.
#bash #game #console
#молния дня
В 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
#статья дня
Google в очередной раз доказал всем, что дизайн — это не про них.
Если вы, как и я, понимаете, что на этой иллюстрации не так — обнимемся.
Если же нет, или хотите понять больше — есть всё ещё пока лучшая в русскоязычном сегменте интернета статья Оптическое выравнивание и пользовательские интерфейсы.
— Почему при обычном центрировании слоёв и фигур иконки всё равно могут выглядеть «смещёнными» и невыровненными?
— Почему важно не просто «на глаз» выравнивать иконки, а знать, где у фигуры настоящий центр — её геометрический «центр тяжести» (барицентр)?
— Почему автоматизация поиска центра фигуры и её выравнивание — более надёжный путь, чем ручная корректировка, особенно при большом количестве иконок в интерфейсе?
Всё там :) Очень рекомендую.
Кстати, раз уж снова подняли эту тему, маленький лайфхак для дизайнеров: размойте иконку и сразу станет понятно, сбалансирована она, или нет. Вот как тут.
#design #alignment #icons
#новый год дня
С Новым годом, котаны! Пусть всё… дополняйте!
Общий искусственный интеллект появится в новом году: миф или реальность? 🤔
Представьте искусственный интеллект, способный решать любые задачи как человек. Пока такого не существует — это лишь концепция под названием AGI.
Илон Маск утверждает, что его компания xAI может достичь уровня AGI, равного или превосходящего человеческий интеллект, уже в ближайшие годы. Возможно даже, в 2026 году.
Так насколько реальны эти прогнозы и стоит ли ожидать появления AGI в ближайшее время?
🙂 Дмитрий Григоров, директор по искусственному интеллекту и данным, старший вице-президент Альфа-Банка:
Прогнозы появления AGI в 2026 году выглядят чересчур оптимистично, это миф. Сегодня мы видим значительные успехи в развитии AI для широкого спектра задач — модели уже умеют генерировать профессиональные подсказки для юристов и врачей, писать код, анализировать данные и многое другое. Для перехода на уровень AGI искусственному интеллекту всё ещё не хватает универсального понимания мира, ему нужно научиться оперировать логикой, выходящей за пределы статистики.
Безусловно, движение в этом направлении стремительно. Показателен недавний результат модели GPT 5.2 в тесте на «человечность» ARC-AGI-2: модель набрала 52,9%, приблизившись к человеческому показателю в 66%.
Однако ключевой вызов сохраняется: даже при бурном росте вычислительных мощностей, улучшении архитектур нейросетей и обучении на масштабных данных AI-системы остаются ограниченными символическими проекциями мира в виде текста, картинок, звуков, видео. Они изолированы от физической реальности и работают только с ограниченной частью человеческого опыта.
Этот разрыв пытаются закрыть на практике: интегрируют искусственный интеллект в «мозги» гуманоидных роботов для обучения через сенсорный опыт, создают целые AI-симуляций мира. Всё это требует многих лет научно-инженерной работы.
Хотя прорыв к AGI может произойти раньше, чем предполагают скептики, заявления о его достижении в ближайшие пару лет стоит воспринимать скорее как яркую маркетинговую кампанию. Ключевые инвестиции и ожидания лучше сосредоточить на практических и измеримых достижениях искусственного интеллекта.
#инструмент дня
На связи Глеб, который принес немножечко странного.
Думали ли вы когда-нибудь о том, что алгоритмы сжатия строк потребуются для передачи состояния приложения?
Всё когда-нибудь случается впервые, вот и мне потребовалось передавать в ссылке текущее состояние редактора кода (в нашем продукте это один из основных иструментов).
Так как в нашем редакторе есть владки, то у каждой свои параметры рабочего пространства, которые составляют композицию объектов.
Передавать необходимо как раз такую компиляцию состояний в одном объекте, который должен передаваться в генерируемой ссылке.
Но как, ведь длина адресной строки очень ограничена и не вместит даже небольшой сериализованный объект в параметре адресной строки.
Оказывается не так уж это сложно если вспомнить про алгоритмы сжатия.
Сериализуем объект, сжимаем его с помощью библиотеки lz-string и генерируем ссылку с параметрами состояния редактора в одном из параметров.
Попробовать можно в codepen.
Да, можно использовать более эффективный алгоритм LZMA (один из примеров), однако он существенно медленнее. Тем не менее, производительность LZMA в контексте ограниченного числа символов, позволяет вообще не думать о каком-либо существенном влиянии на результат.
В CedrusData (компания, в которой работаю) много интересных задач, в том числе связанных с производительностью. Ждите новых заметок😎
#compression #performance
#фишка дня
Итак, верстаешь ты страницу с кучей врезок, аккордеонов, вкладок и прочих интерактивных элементов, требующих действия пользователя.
Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.
Так вот, 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 #бородач
#фишка дня
Не так давно я выкладывал статью и пример, как вывести коллег в вашем любимом командном мессенджере, будь то слак, тимс, маттермост и прочие поделки от разных остальных компаний.
Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: /channel/htmlshit/3594
И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.
Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:
dynamic-range-limit: standard;
filter: brightness(1);.
🔴🔴🔴🔴🔴🔴🔴🔴
🔥 СРОЧНО СКАЧАЙТЕ!!! АЛЬФА-БАНК ВЕРНУЛ ОПЛАТУ АЙФОНОМ В НОВОМ ПРИЛОЖЕНИИ 🔥
СКАЧИВАЙТЕ СКОРЕЕ И ПЛАТИТЕ ЗА ВСЁ БЕЗ КАРТЫ. Просто подключайте Alfa Pay — а мы вернём кэшбэк до 50% за первую покупку.
ПРЯМО СЕЙЧАС СКАЧИВАЙТЕ на айфон приложение Альфото. Кто не успел, тот опоздал 😉
@alfabank
Без лишних слов — рекомендую канал про Германию от практикующего немецкого рекрутера Инессы Тиконов. Это не просто канал, а практическая база знаний с реальными кейсами, советами и инсайтами о том, как устроен найм в Германии и что помогает кандидатам получить оффер.
Подойдёт и тем, кто активно ищет работу и тем, кто пока не ищет, но хочет быть готовым к любым изменениям: релокации, увольнению, смене роли или рынка.
Кейсы поиска работы и релокации в Германию:
→ Senior Cloud Infrastructure Engineer из Армении — пришёл по Карте шансов, получил оффер от немецкой компании за 2,5 месяца и оформил Blue Card
→ Senior SAP Consultant из Грузии — за 2 месяца получил два оффера и выбрал предложение с зарплатой выше рынка
→ Data-специалист из Батуми — получил оффер на сложную стратегическую роль
→ Engineering Manager из Google (США) — после детального анализа рынка выбрал Transparent Hiring и сейчас проходит интервью в немецких компаниях
→ Senior Backend Engineer — оффер в Берлине с зарплатой выше рынка
Про поиск работы в Германии:
→ Резюме, которое реально выделяется среди других: неочевидные советы
→ Почему немецкие компании могут отозвать оффер
→ Как объяснить перерыв в работе рекрутеру и не завалить интервью
→ 10 шагов, чтобы профиль в LinkedIn начал притягивать рекрутеров
Про жизнь и адаптацию в Германии:
→ Work-life balance и один из самых быстрых путей к европейскому паспорту: 12 причин переезда в Германию
→ Где в Германии жить хорошо (спойлер: не Берлин и не Мюнхен 😉)
→ Почему в Германии так сложно снять квартиру и как проходит отбор «кандидатов в жильцы»
→ Как вернуть налоги в Германии — в том числе за услуги Transparent Hiring
👉 Подписывайтесь на канал “Германия с Инессой” — даже если переезд пока в планах, там вы соберете «чемодан» знаний, который потом сэкономит время, деньги и нервы.
#статья дня
SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.
ИИ-агент анализирует найденные уязвимости в коде, оценивает степень риска и сразу предлагает исправления. Каждая найденная проблема превращается в карточку с объяснением, насколько она критична и как её можно безопасно устранить.
Всё это экономит часы рутинного разбора уведомлений: анализ безопасности теперь занимает минуты, а не полдня.
Для наглядности добавили центр контроля уязвимостей — интерактивные дашборды, где можно увидеть типы рисков и затронутые системы.
Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.
#ai #code #security
#дайджест недели, а точнее, двух
Понедельник
Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
/channel/htmlshit/3922
Среда
Обсуждение адвент-календарей по разработке и статьям.
/channel/htmlshit/3923
Четверг
Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
/channel/htmlshit/3925
Воскресенье
Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
/channel/htmlshit/3927
Понедельник
GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
/channel/htmlshit/3928
Вторник
Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
/channel/htmlshit/3930
Среда
Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
/channel/htmlshit/3932
Пятница
CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
/channel/htmlshit/3933
#фишка дня
Не совсем про разработку, но достаточно интересно.
Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг 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 #бородач
#заметка дня
Cloudflare стал так часто падать, блокируя доступ ко всему и вся, что хочешь-не хочешь приходится извлекать из этого хоть какую-то полезную информацию.
Ну, помимо того, что Rust не настолько и крут в руках посвеместно проникших вайб-кодеров, если верить соцсетям.
Но нас тут заинтересовало, зачем Cloudflare добивает стандартную страницу ошибки комментариями?
<!-- a padding to disable MSIE and Chrome friendly error page -->
#ссылка дня
Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.
Кстати, в X прямо сейчас очередной напоминающий жабогадюкинг срач как раз на эту тему.
Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.
Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.
Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?
Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.
И так с любым проектом. Думать надо.
Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/
Мифы о доступности на разных языках. Всем читать, котаны.
#a11y #бородач
#поделись дня
Я в этом году просрал все сроки поиска интересных адвент-календарей по коду и разным статьям.
Поэтому, делитесь, котаны. Кто что читает в этом декабре?
Я вот только календарь от HTMHell сходу вспомнил: https://htmhell.dev/adventcalendar/, одна статья в день.
Ну и, пожалуй, ещё https://adventjs.dev/en, возможно, я даже в него ещё запрыгну и буду с вами делиться.
Показывайте ваши!
#advent
#дайджест недели
Понедельник
Jhey показал эффект с подсветкой краёв карточек по движению мыши — координаты курсора, CSS и SVG-фильтры. Аккуратная демка, чистая реализация.
/channel/htmlshit/3914
Вторник
virtua — библиотека для виртуализации списков с динамическими размерами, бесконечным скроллом и поддержкой популярных фреймворков. Быстрая и универсальная.
/channel/htmlshit/3916
Среда
ESLint Plugin De Morgan переписывает отрицания по законам де Моргана. Два правила, автофикс, без зависимостей — мелочь, но делает логику чище.
/channel/htmlshit/3917
Пятница
Хороший буст к скорости тестов: заменить ts-jest на @swc/jest. SWC работает быстрее за счёт native-кода и отсутствия проверки типов — проекты ощутимо ускоряются.
/channel/htmlshit/3919