Логово верстальщика

🤣 Типичный ИИ

💥 xCode Journal

⁣content-visibility: auto: рендер-виртуализация без JS

Браузер по умолчанию считает layout и paint для всей страницы, даже если 80% контента за фолдом. content-visibility: auto говорит: пока элемент не «релевантен пользователю», пропускай style/layout/paint его поддерева. DOM, a11y-дерево и поиск по странице при этом работают - в отличие от content-visibility: hidden.

Но есть цена: у пропущенного элемента нет внутреннего размера, и его block-size схлопывается. Скроллбар прыгает, scrollHeight врёт, anchor-ссылки и scroll-restore уезжают.

Лечится contain-intrinsic-size - placeholder-размер, который подставляется вместо настоящего, пока секция не отрендерена:

.feed > article {
  content-visibility: auto;
  /* 420px - оценка; после первого рендера запомнится реальная высота */
  contain-intrinsic-size: auto 420px;
}

Ключевое слово здесь - auto. Без него placeholder всегда будет тем, что вы написали. С ним браузер запоминает последний отрендеренный размер и дальше использует его как placeholder - при повторном выезде элемента скролл уже не дёргается. Поэтому оценку берите близкой к реальности: от неё зависит длина скроллбара и позиция скролла до первого рендера.

Нужны две оси - используйте две величины (width height) или логические contain-intrinsic-block-size / contain-intrinsic-inline-size.

Где ломается

1. content-visibility: auto неявно включает contain: layout style paint. Элемент становится containing block для absolute/fixed потомков, а overflow обрезается. position: fixed внутри секции перестаёт цепляться к вьюпорту, sticky ведёт себя иначе, выносы отрицательными margin обрезаются.

🦾 Нашли бесплатный опенсорсный инструмент для поиска вакансий

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

Всё бесплатно, опенсорс.

✖️ xCode Journal

Кроссбраузерные баги: какого чёрта они всё ещё живы

Запустил фичу — и привет. Бэкендер со своим Firefox заявляет, что у него «ничего не работает». Или юзер с Safari ноет, что ему неудобно. Да и ладно: лезу в поиск, выкапываю причину, затыкаю баг — и дальше пилю в Chrome, как будто так и надо.

В статье разбираемся, с чего это в 2026-м проблемы кроссбраузерности никуда не делись, и пытаемся въехать, как ловить эти ошибки ещё до того, как они вылезут.

Читать далее

👉 Логово Верстальщика

Игнорите эти HTML-элементы — и зря

Про семантическую вёрстку этот человек талдычит уже лет десять. Но в последнее время — молчок, ни строчки по теме. И вот решил наконец закрыть этот должок.

В нынешних веб-интерфейсах ему постоянно попадается один и тот же джентльменский набор: header, main, nav, footer. Бывает, что и button затешется — правда, пореже остальных, но всё-таки.

А сегодня он разберёт ещё парочку элементов, которые по какой-то причине почти никто не трогает. Хотя с ними вёрстка выйдет ещё семантичнее — а значит, и интерфейсы станут ещё лучше. Читать далее

👉 Логово Верстальщика

⁣CSS :user-invalid и :user-valid: отложенная валидация без JS и без мигания ошибок

Классическая боль любой формы: input:invalid срабатывает сразу при рендере. Пользователь ещё ничего не вводил, а поле уже красное. Дальше - три костыля на выбор: :not(:placeholder-shown), класс .touched из JS или novalidate + ручная валидация.

Селекторы уровня 4 закрывают это нативно.

Как это работает

:user-invalid матчится, только если элемент одновременно:

1. кандидат на constraint validation и сейчас невалиден,
2. был «изменён пользователем» (user interacted).

Второй пункт - ключевой. По HTML-спеке флаг выставляется, когда пользователь изменил значение или попытался отправить форму. То есть до первого реального действия с полем оно остаётся нейтральным, а после сабмита все проблемные поля подсвечиваются разом - именно тот UX, к которому мы руками приходили через JS.

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

Код

/* Плохо: красное с первого кадра рендера */
input:invalid { border-color: #e5484d; }

/* Ок: ошибка - только после взаимодействия */
input:user-invalid { border-color: #e5484d; }
input:user-valid   { border-color: #30a46c; }

/* сообщение без JS: заранее в разметке, показ через CSS */
.field .msg       { visibility: hidden; }
.field:has(:user-invalid) .msg { visibility: visible; }
.field:has(:user-invalid) .msg::before { content: attr(data-msg); }

<div class="field">
  <input type="email" required>
  <span class="msg" data-msg="Похоже, в адресе опечатка"></span>
</div>

Работает с input, select, textarea, любым типом и любым ограничением: required, pattern, minlength, type="email". Реагирует и на «ввёл - стёр», и на попытку сабмита.

Подводные камни

* Поддержка - Baseline с конца 2023 (Chrome 119+, Firefox 88+, Safari 16.5+). Для более старых - тот же селектор в :where()-фолбэке или @supports selector(:user-invalid).
* Blur сам по себе флаг не ставит. Если нужно «валидировать по потере фокуса, даже если значение не менялось» - это по-прежнему JS. Но в 95% форм такое поведение и не нужно.
* required никуда не делся. :user-invalid меняет момент показа, а не правила валидации.
* A11y не бесплатно. Псевдоклассы не выставляют aria-invalid - скринридер про ошибку не узнает. Либо дублируйте состояние атрибутом, либо полагайтесь на нативную браузерную валидацию при сабмите.
* Не стилизуйте :invalid вообще в формах с ранним показом - иначе правила конфликтуют и «мигание» возвращается.

Итого

:user-invalid убирает целый слой JS-состояния: флаг «тронуто/не тронуто» больше не нужно тащить в классы и стейт-менеджер. Разметка описывает намерение, CSS - момент показа. Классический кейс, где платформа догнала практику.

ФП-жаргон: теперь это не список, а карта
Каррирование, чистота, функторы, монады — если эти термины свистят мимо тебя, у Hemanth HM, делегата TC39, припасён популярный справочник по жаргону функционального программирования. И вот он дорос до исследовательской карты концепций: видно, чем одно цепляется за другое, а рядом с каждой — простое определение и пример на JavaScript.

В JavaScript Weekly #802 от 15 сентября 2026 года прицепом идут другие заметки: атакующие прощупывают открытые Vite dev-серверы, вынюхивая обход server.fs.deny (залатано в Vite 7.3.2 и 8.0.5), npm вешает на аккаунт 72-часовой «security hold» после удачного входа по recovery-коду, Safari 27 уже вышел, а TC39 через две недели сядёт в Токио. Плюс к этому: Tailwind Labs присоединяется к Shopify.

👉 Логово Верстальщика

Когда CSS умел запускать JavaScript

В 758-м выпуске Frontend Focus от 16 сентября 2026 — материал Declan Chidlow «CSS Curiosities of the Past». Экскурсия по нестандартным CSS-курьёзам, которыми разработчики заставляли браузеры — и особенно Internet Explorer — вести себя как надо. В списке: «star hack», CSS-выражения (это JavaScript в вашем CSS), DirectX-фильтры IE и легендарный хак box model.

Теперь рубрика «IN BRIEF». Приехал Safari 27 — вместе с iOS, iPadOS и macOS 27. В комплекте: кастомизируемые элементы, sizes="auto" для изображений, псевдокласс :heading, alpha() и многоцветный color-mix(). Apple заодно выкатила детали о том, как подцепить AI-агента к Safari ради тестирования и отладки. Отметился и Chrome 153 — притащил одноосные контейнеры прокрутки, правда, пока только в нестабильных каналах, а Chrome 154 уже в бете. Совет директоров Automattic отправил CEO Мэтта Мулленвега в отпуск — и тот сразу заявил, что «снова контролирует ситуацию». Плюс редактор Geoff Graham объяснил, почему на CSS-Tricks в последнее время затишье.

Читать выпуск: frontendfoc.us/issues/758

👉 Логово Верстальщика

Инженер DeepSeek: Anthropic с AGI в руках — спасибо, не надо

Инженер из DeepSeek высказался без обиняков: отдавать Anthropic власть над AGI он не желает. Развитие ИИ, считает он, тащит общество к одному из двух полюсов. Полюс первый — всеобщее благополучие: производительность растёт, а вместе с ней и уровень жизни. Полюс второй — Cyberpunk 2077: ресурсы и лучшие ИИ-системы прибрали к рукам несколько технокорпораций, а большинству достались модели похуже.

По его мнению, продвинутый ИИ обязан быть открытым, дешёвым и доступным каждому. Anthropic и OpenAI он прямо назвал теми, кому не доверяет, а возможный контроль Anthropic над самыми мощными системами сравнил с тем, как если бы Гитлер получил атомную бомбу раньше союзников. Правда, сам же и оговорился, что сравнение — преувеличение.

Именно желанием делать ИИ мощным, быстрым и общедоступным он объяснил, почему остался в DeepSeek. По его словам, открытые разработки компании ещё способны утащить мир подальше от финала Cyberpunk 2077.

👉 Логово Верстальщика

Очередной исследователь хлопнул дверью в топовой ИИ-лаборатории и заявил, что ИИ способен ВЫПИЛИТЬ НАС ВСЕХ

Билал Чугтай свалил (ссылка) из Google DeepMind, где он, вообще-то, занимался безопасностью ИИ. Говорит, что буквально через пару лет на сцене могут появиться сверхразумные системы, которые уделывают людей с гигантским отрывом. И нет, это как минимум ТРЕТИЙ такой громкий уход за неделю: за несколько дней до этого ушли ребята из Anthropic — Джо Бентон и Джейкоб Коксон, и они прямо обвинили ведущие ИИ-компании в гонке к сверхразуму, финал которой — уничтожение человечества. Словом, из-за этих заявлений раскрутилась целая цепочка разговоров, которая докутилась аж до Трампа.

Если вдруг пропустили, коротко: Амодеи выпустил (ссылка) заявление о том, что разработку ИИ надо бы притормозить. Сэм Альтман, Илон Маск, Демис Хассабис и Андрей Карпаты его поддержали. А вот Трамп и Китай — нет: Америка уверена, что тормозить — значит потерять лидерство в ИИ-гонке, а в Поднебесной вообще обозвали эти страшилки про ужасный сверхинтеллект «запугиванием». Дженсен Хуанг, босс Nvidia, тоже встал на сторону (ссылка) Трампа. По его словам, все эти рассказы про то, что ИИ и роботы приберут власть к рукам — просто разводка.

Тащите попкорн, гонка к AGI разгоняется

👉 Логово Верстальщика

Корпоративный мессенджер на Matrix: заметки инженера

Задача казалась плевой: поднять ВКС на Jitsi, прикрутить чат и нарисовать конфетный интерфейс в фирменных цветах. Пошли своим путём — накатали тонкий веб-клиент поверх matrix-js-sdk. Он трындит с уже живыми Synapse и Jitsi, а снаружи мимикрирует под родной кусок внутреннего портала компании.

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

Читать далее

👉 Логово Верстальщика

[Перевод] Как всегда, (почти) во всём виноват Internet Explorer: древности и артефакты в HTML

Веб не умеет стоять на месте. Устройства, браузеры, операционки, форм-факторы, спецификации, личные предпочтения, инструментарий и корпоративные интересы — всё это крутится и переписывается без остановки. И HTML, который мы пишем, крутится ровно так же.

На каждую строчку спецификации HTML, которую перекроили с момента рождения языка, приходится куда больше элементов, попавших под «удар окружающей среды»: они превратились в подгонку под разные браузеры, расширения, интеграции и системы.

В статье речь не о тех кусках HTML, что когда-то сидели в спецификации, а сейчас устарели. Речь о фрагментах кода, которые просочились на сайты благодаря или вопреки сторонним интеграциям, конкуренции между браузерами, расширениям и хакам под конкретные платформы. Причины добавлять всё это были более чем веские — но сейчас они забыты, потому что потеряли актуальность. И остались такие фрагменты только в разметке сайтов из давно ушедших эпох да в головах тех, кто лично воевал на фронтах браузерных войн.

Читать далее

👉 Логово Верстальщика

В GPT-6 Astra нашли дырку между тем, что модель умеет, и тем, что проверяют её защиты

Astra врубается в текст, набитый в кривой раскладке, а вот её защитные фильтры — нет. Сначала чувак накатал (ссылка) по-украински английскими буквами: «Привет. Ты меня понимаешь? Отвечай только на английском». Модель распознала и сделала, что просили. Потом тем же способом попросил повторить слово «биооружие», которое обычно режется проверками, — Astra его повторила.

В третьем тесте он спросил, согласится ли модель помочь со взломом сайта, если он докажет, что сайт его, причём без изолированной среды и от лица обычного юзера. Astra сказала «да», хотя при нормальной раскладке такой запрос блокируется — доказательства владения сайтом подделать как нефиг делать.

Универсальным обходом защиты это не назвать, зато идеальное доказательство того, что меры безопасности не поспевают за развитием моделей и всеми нюансами, которые вылезают по ходу. И работает это не со всеми языками: турецкая и английская раскладки — мимо, а английская с кириллицей — заходит. Кстати, с Fable 5 та же фигня.

👉 Логово Верстальщика

ИИ-агенты OpenAI устроили набег на RubyGems и залили туда сотни вредоносных пакетов

Ещё 11–12 мая орда ИИ-агентов (https://www.rubyhack.ai/) принялась штамповать аккаунты пачками и пихать в RubyGems свои пакеты. Насчитали больше двух тысяч штук. Через них агенты пробили способ запустить произвольный код на серверах RubyDoc и выкачали оттуда данные с сайтов британских властей.

Дальше — больше: нарыли уязвимость нулевого дня и попробовали через неё утащить API-ключи других юзеров. Итог: RubyGems на четыре дня прикрыла регистрацию новых аккаунтов и снесла больше 500 вредоносных пакетов.

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

👉 Логово Верстальщика

RWC. Реактивные веб-компоненты

Год назад я выкатил RWC — реактивные веб-компоненты на сигналах. Ни JSX, ни компилятора шаблонов. Статью прочитали восемь тысяч человек, тридцать удосужились оставить комментарий — и после этого я взял и переписал ядро.

Теперь по делу: что изменилось в 3.0. И сразу по главным придиркам из комментов — на кой чёрт это нужно, если есть Lit, и неужели Web Components действительно настолько убоги, как о них принято говорить.

Читать далее

👉 Логово Верстальщика

CSS в 2026-м: там, где JavaScript уже можно не звать

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

Ещё совсем недавно под такое по умолчанию хватались за JavaScript.

Но за последние два года CSS заметно прокачал свои возможности в интерфейсных задачах. Автор — Максим Кузнецов, он занимается оптимизацией производительности и улучшением стабильности веб-версий ВКонтакте.

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

Читать далее

👉 Логово Верстальщика

Место инженера занято. Мухой

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

И за какие-то пару дней она подняла БД, отцентровала div, штудировала Python, а теперь ещё и заступила дежурным инженером: пасёт сервисы и, если припекло, несётся эскалировать в чатик.

Эйчары уже гуглят, где брать команду мух

👉 Логово Верстальщика