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

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

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

🔴🔴🔴🔴🔴🔴🔴🔴 🔥 СРОЧНО СКАЧАЙТЕ!!! АЛЬФА-БАНК ВЕРНУЛ ОПЛАТУ АЙФОНОМ В НОВОМ ПРИЛОЖЕНИИ 🔥 СКАЧИВАЙТЕ СКОРЕЕ И ПЛАТИТЕ ЗА ВСЁ БЕЗ КАРТЫ. Просто подключайте Alfa Pay — а мы вернём кэшбэк до 50% за первую покупку. ПРЯМО СЕЙЧАС СКАЧИВАЙТЕ на айфон приложение Альфото. Кто не успел, тот опоздал 😉 @alfabank

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

Без лишних слов — рекомендую канал про Германию от практикующего немецкого рекрутера Инессы Тиконов. Это не просто канал, а практическая база знаний с реальными кейсами, советами и инсайтами о том, как устроен найм в Германии и что помогает кандидатам получить оффер. Подойдёт и тем, кто активно ищет работу и тем, кто пока не ищет, но хочет быть готовым к любым изменениям: релокации, увольнению, смене роли или рынка. Кейсы поиска работы и релокации в Германию: → 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 👉 Подписывайтесь на канал “Германия с Инессой” — даже если переезд пока в планах, там вы соберете «чемодан» знаний, который потом сэкономит время, деньги и нервы.

#заметка дня Минутка удивительно полезной информации! Почему 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

#статья дня SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой. ИИ-агент анализирует найденные уязвимости в коде, оценивает степень риска и сразу предлагает исправления. Каждая найденная проблема превращается в карточку с объяснением, насколько она критична и как её можно безопасно устранить. Всё это экономит часы рутинного разбора уведомлений: анализ безопасности теперь занимает минуты, а не полдня. Для наглядности добавили центр контроля уязвимостей — интерактивные дашборды, где можно увидеть типы рисков и затронутые системы. Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки. #ai #code #security

#статья дня Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (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

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