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

⁣View Transitions API в production: нативная SPA-подобная навигация без JS

Когда в MPA нужна плавная смена страниц, большинство инженеров тянут React Router с анимациями или jQuery-плагины. Но браузер уже умеет это нативно, причем без единой строчки скриптов. View Transitions API — это не игрушка, а рабочая техника для лендингов, документаций и каталогов, где важен UX даже на медленных каналах.

Как работает и базовая активация

View Transitions API делает снимки старого и нового DOM-состояния, затем анимирует наложение слоев. Включение — один CSS-блок:

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 0.35s ease-in both fade-out;
}
::view-transition-new(root) {
  animation: 0.3s ease-out both fade-in;
}

Браузер сам ловит момент перехода между страницами одного origin. Код минимальный, без библиотек и inline-скриптов.

Индивидуальная анимация для элементов

Типичная ошибка: перезапуск всего layout при навигации, из-за чего шапка «прыгает». Решение — задать view-transition-name: header на <header>. Браузер анимирует этот блок отдельно от остального контента. Заголовок остается на месте, а основной блок плавно заменяется.

Trade-off: не назначайте одно и то же имя разным элементам — сломанная селективность даст сбой анимации.

Production-ready: выборочные переходы и fallback

Firefox и Safari на десктопе (до 18.2) полностью игнорируют API. В продакшене обязателен fallback:
- Условия активации через @media (prefers-reduced-motion) или :has() для разных страниц. Например, на каталоге скролл-эффект, на карточке — только fade.
- Если браузер не поддерживает — страница должна загружаться мгновенно, без ошибок блокировки.

Пример для списка статей: article { view-transition-name: entry; }. При клике на заголовок — масштабирование карточки в новую страницу, а не моргание всей вьюпорта.

Практическая ловушка: cross-document с data-атрибутами

Cross-document переходы работают между разными HTML-файлами одного origin. Но если у вас ленивая загрузка изображений или динамический контент через AJAX — API может захватить неполный снимок. Всегда задавайте view-transition-class или style="view-transition-name" явно, не полагаясь на CSS-селекторы до мутации DOM.

Предупреждение: не используйте на страницах с интерактивными картами или iframe — их состояния не захватываются корректно.

Вывод: View Transitions API дает нативную, предсказуемую анимацию навигации для MPA, но требует явного задания имен, fallback для старых браузеров и отказа от декоративных эффектов на сложных виджетах.

Ну нифига себе: Grok Build выкатили в опенсорс! 😨 SpaceXAI выложила код своего ИИ-агента для разработки прямо на всеобщее обозрение — причем с полной документацией.

Почти весь код на Rust, лицензия — Apache 2.0. GitHub вон он.

Выходит, компания Маска теперь душит открытостью сильнее, чем OpenAI? Ждем, когда эти подтянут ответ.

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

⁣CSS initial-letter: буквицы без float и подгонок

Типографика в вебе всё ещё страдает, когда дело доходит до буквиц. В production — будь то лонгриды, премиальные лендинги или медиа-сайты — верстальщики часто мучаются с float, магическими font-size и line-height, чтобы буква не вылезла за границы. Решение есть в спецификации CSS Inline Layout Level 3: свойство initial-letter.

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

p::first-letter {
  initial-letter: 3;
}

Если нужно смещение вниз, добавляется второй параметр:

p::first-letter {
  initial-letter: 3 1;
}

Первая цифра — высота в строках, вторая (опционально) — смещение. Буква не вылезает за границы абзаца.

Практический совет
Используйте initial-letter в лонгридах, книжной вёрстке или премиальных лендингах. Оно идеально сочетается с font-family и color, а если браузер не поддерживает (Safari — да, Firefox и Chrome — пока нет), работает graceful degradation: остаётся обычная первая буква. Это избавляет от сложных кастомных решений в дизайн-системах.

Типичная ошибка
Пытаться эмулировать буквицу через float и line-height с магическими числами. Это ломается при изменении шрифта, размера или межстрочного интервала, а доступность страдает, так как трудно предсказать переполнение. initial-letter решает проблему предсказуемости layout и визуальной стабильности без костылей.

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

OpenAI решила раздать $100 кредитов Codex тем, кто расскажет, чё им зашло в GPT-5.6 Sol или как он выбесил до перехода.

Правила игры: шлёпаешь пост в X, забираешь плюшки, получаешь больше доступного юзанья. Первые 10 000 человек отхватят бесплатные токены.

Инфа по ссылке: https://switch-to-codex.openai.chatgpt.site/

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

Тайм-менеджмент сдох, или как чужие проблемы воруют твое время

Все эти техники управления временем летят в помойку, когда в игру вступает срочность — она жрет важность без соли. Кто главный поставщик этой самой срочности? Люди, блин. Коллеги с горящими дедлайнами, клиенты с паническими письмами, родственники с внезапными просьбами — на их совести процентов 90 всех «пожаров». И они отлично умеют давить на твои социальные роли и чувство вины.

Можно, конечно, забиться в угол и орать «нет» каждому, но это вариант так себе. Гораздо умнее сдвинуть фокус с таймеров и помидорок на реальное искусство — жесткие разговоры. Да, те самые, неудобные.

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

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

⁣CSS light-dark(): встроенная поддержка светлой и тёмной темы без пользовательских свойств и media-запросов

Долгое время реализация тёмной темы на production требовала custom properties, JS-тогглов и media-запросов prefers-color-scheme. Но с ноября 2024 года в CSS появилась нативная функция light-dark(), которая избавляет от этой инфраструктурной головной боли.

Как это работает
Функция принимает два аргумента: первый — цвет для светлой темы, второй — для тёмной. Она автоматически выбирает нужное значение, ориентируясь на свойство color-scheme, которое задаётся на документе или контейнере. Достаточно прописать :root { color-scheme: light dark; } и заменить все цветовые значения на light-dark(). Никаких media-запросов, классов переключения или @media (prefers-color-scheme: dark) — браузер сам всё решает.

Production-пример и практический совет
На лендингах и в design-системах часто нужно менять фоны, текст и декоративные элементы под тему. Вместо десятка custom properties и дублирования правил под media-запросы используйте light-dark():

.card {
  background: light-dark(#fff, #1e1e1e);
  color: light-dark(#1a1a1a, #e0e0e0);
  border: 1px solid light-dark(#ccc, #444);
}

Совет: если нужно принудительно переключить тему для части интерфейса (например, в админке с собственным тогглом), задайте color-scheme: light или color-scheme: dark на контейнере — light-dark() подстроится под него, а не под системную тему.

Типичная ошибка и trade-off
Многие верстальщики пытаются использовать light-dark() для градиентов или сложных цветовых комбинаций вроде box-shadow: light-dark(rgba(0,0,0,.1), rgba(255,255,255,.1)). Но функция не поддерживает градиенты — там по-прежнему нужны custom properties или JS. Ошибка: применять light-dark() к свойству background-image с градиентом — это сломает вёрстку в Safari и Chrome. Ещё один минус: поддержка у Firefox пока экспериментальная (за флагом), так что для production с аудиторией на этом браузере лучше оставить fallback через media-запрос.

Поддержка браузеров
Chrome 133+, Edge 133+, Safari 18.2+ уже нативно поддерживают light-dark(). Firefox — в 135+ под флагом (но обычно в production можно использовать с progressive enhancement: зарезервировать цвет по умолчанию, а для современных браузеров — перебить через light-dark()).

Вывод: Используйте light-dark() для простых цветовых пар — это уменьшает код, исключает ошибки специфичности и делает тему стабильной без лишней JS-инфраструктуры, но помните про ограничение на градиенты и тестируйте поддержку Firefox.

Есть тема, которую в IT обычно замалчивают. Ты прыгаешь на работу мечты… а через месяц хочешь назад, на старую. На собесе всё выглядело блестяще, но спустя пару недель новый начальник оказывается ещё тем выносом мозга, процессы — полный хаос, а плюшки, что тебе обещали, разбиваются о суровую реальность.

Читать далее: https://habr.com/ru/articles/1058778/

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

Экс-глава Google вмазал по удалёнке: «Хочешь делать IT и выигрывать — сиди в офисе». Всё, хана фрилансу?

Не так давно боссы компаний предсказывали удалёнке великое будущее, а теперь народ дружно зовут обратно за столы. Мы из Beeline Cloud решили разобраться, что там с гибким графиком.

Смотрим, готовы ли айтишники терять бабки ради работы из дома, что на самом деле толкает менеджеров на этот «возврат» и не окажется ли отмена дистанта временной лажей. Читать далее

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

⁣CSS-анимация auto высоты и ширины: интерполяция ключевых слов без костылей

Плавное раскрытие блоков с динамическим контентом — одна из самых частых задач в production: аккордеоны, выпадающие меню, модалки. Раньше это решалось через max-height с запасом, grid-трюками или ручным JS-расчётом, но каждый вариант имел компромиссы по предсказуемости layout или производительности. Новая возможность interpolate-size: allow-keywords меняет подход, позволяя анимировать height: auto напрямую.

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

Свойство interpolate-size: allow-keywords на контейнере разрешает браузеру интерполировать ключевые слова (auto, min-content, max-content, fit-content) как числовые значения. Например, для аккордеона:

.accordion-item {
  interpolate-size: allow-keywords;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion-item.open {
  height: auto;
}

При переключении класса высота плавно меняется от 0 до естественной — без магических чисел и лишней разметки. Это особенно важно для дизайн-систем, где компоненты должны адаптироваться к любому контенту.

Где применять и типичная ошибка

Используйте в UI-компонентах с непредсказуемой высотой: выпадающие списки, дроверы, панели с динамическими данными. Ошибка — применять interpolate-size глобально на * или на всех элементах, где не нужна анимация ключевых слов. Это может сломать встроенную интерполяцию браузера в сложных layout, особенно при использовании min-height в сетках. Лучше ограничивать область действия конкретными компонентами.

Production-контекст и trade-offs

Поддержка пока ограничена: Chrome 130+ и Safari Technology Preview. Firefox требует флага в about:config. В production это только progressive enhancement — если браузер не поддерживает, блок раскроется без анимации. Используйте @supports:

@supports (interpolate-size: allow-keywords) {
  .panel { interpolate-size: allow-keywords; }
}

Это не влияет на доступность (скринридеры видят контент сразу) и производительность (браузер оптимизирует анимацию нативного рефлоу). Но не подходит для случаев, где нужна анимация между двумя разными ключевыми словами (например, auto к min-content) — это пока не реализовано.

Вывод: interpolate-size: allow-keywords убирает главный компромисс между живым контентом и плавными анимациями, но требует осторожного внедрения с фоллбэком для неподдерживающих браузеров.

Claude Fable 5 дирижирует Grok 4.5 ☕️

Просто ставишь бесплатный плагин для Claude Code, и Grok становится дефолтным кодером. Fable лепит спецификации и гоняет каждый дифф, а Grok 4.5 строчит код через Grok CLI.

Основная кодовая база ложится на Grok, Fable же рулит архитектурой и качеством. Каждый дифф автоматически прогоняется через разные модели — никаких доплат. Если спецификации не перекрываются, таски летят параллельно через отдельных агентов.

Автор гонял такую связку несколько дней. Фишка Fable — он код не пишет в принципе. Только спецификации, отправка исполнителю и разбор полетов.

Настройка:
1. claude plugin marketplace add DannyMac180/fable-advisor && claude plugin install fable-advisor
2. Ставишь Grok CLI отсюда x.ai/cli, потом grok login
3. Команда /model fable

Сорцы в открытом доступе.

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

⁣align-content: normal — неочевидная ловушка в Grid и Flexbox

Поведение align-content: normal радикально отличается во Flexbox и Grid, что приводит к неожиданным разрывам макетов в production-проектах: от лендингов до дизайн-систем. Частая ошибка — полагаться на умолчания, не проверяя контекст.

Flexbox: normal = stretch, но только для многострочных
В многострочных Flexbox-контейнерах (flex-wrap: wrap) normal ведет себя как stretch — строки занимают всю высоту. Это удобно, но ломает сценарии, где нужен компактный вертикальный ритм. Всегда явно задавайте align-content, если макет требует иного:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
}

Grid: normal = start, и это правильно для адаптива
В Grid normal эквивалентно start — треки прижимаются к верху, пустота уходит вниз. Это снижает риск «растянутого» контента при динамической высоте. Ошибка: ожидание stretch приводит к перекосу макета:

.grid {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  height: 100vh;
}

Так строки не растягиваются, а пустота остается внизу — стабильно для контента разной длины.

Практические советы и предостережения
- В production всегда переопределяйте align-content явно: stretch или start. Это предотвращает «плавающие» компоненты.
- Не путайте align-content (выравнивание всех строк) с align-self (конкретная ячейка). Типичная ошибка: пытаться исправить позицию одного элемента через align-content.
- Для адаптивных сеток с изменяемой высотой контейнера используйте align-content: start в Grid, чтобы избежать лишних вертикальных отступов при скролле.

Вывод: Явное указание align-content — база стабильной верстки, избавляющая от сюрпризов при смене контекста между Flexbox и Grid в production.

Народ, смотрим, что OpenAI подвезло — GPT-5.6 породил целую кучу моделей и effort-уровней. Как не запутаться, где реально профит?

Себастьян Рашка проанализировал официальные от OpenAI, скинул effort с моделями в одну кучу и нарисовал диаграмму. Оттуда родились такие приколы:

— Если тебе не сдалась максовая производительность от Terra Ultra, почти всегда умнее брать Luna, но крутить effort повыше.
— Всё, что ниже Sol High, можно смело выкинуть из головы — там проще взять Luna c хай-effort.
— Вместо Sol Extra High тупо бери Terra Ultra — выйдет без потерь.
— Sol Ultra обычно жрет бабки зря, разница с Sol Max того не стоит.

🔄 upd: короче, на диаграмме в левом нижнем углу глюк — подписи Luna сбиты на одну позицию. Так что Luna Ultra на самом деле читаем как Luna Max.

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

Что тут происходит: Китай хочет прикрыть ворота для иностранцев перед своими лучшими AI-моделями

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

Похоже, у китайцев уверенность подскочила. Они, видимо, решили, что для разработки моделей высшего уровня им больше не нужна масштабная дистилляция. Теперь их волнует другое: как бы США не стырили или не адаптировали их наработки в сфере ИИ.

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

Anthropic раскатал доку с двумя подходами, как выжимать из Fable 5 максимум в паре с Sonnet 5. Давай разберем.

Вариант первый — Fable 5 в роли «советника» (Advisor). Sonnet 5 тут рубит бабло — он исполнитель, а к Fable 5 чешет за советами. Почти все токены летят по дешевому тарифу исполнителя. На SWE-bench Pro такая связка выдает ~92% от качества Fable 5, но всего за ~63% цены. Fable 5 дергают где-то раз на задачу — чисто за стратегией. Тут подробности.

Второй заход — Fable 5 как оркестратор. Он сам планирует, что делать, и раскидывает таски между Sonnet 5. Токены опять же по дешевке. На BrowseComp такой расклад дает 96% производительности Fable 5 при 46% стоимости. Все, что жрет ресурсы, скидывается на Sonnet 5. Вот пример.

Claude Managed Agents умеет оба подхода. Каждый подагент живет со своим кэшем — если гоняешь одно и то же, за повторную обработку контекста платить не придется.

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

⁣Больше никаких черных ящиков: transition-behavior: allow-discrete -- анимируем display по-взрослому

Долгое время display: none оставался черным ящиком для CSS-анимаций, заставляя верстальщиков городить костыли из visibility, opacity, max-height и JS-классов. В production это особенно болезненно в UI-компонентах: модальных окнах, дропдаунах и тултипах, где внезапное исчезновение элемента ломает восприятие и UX.

Что меняет transition-behavior: allow-discrete
Ключевое слово, которое легально включает анимацию для дискретных свойств, в первую очередь display. Теперь можно анимировать переход между display: block и display: none с помощью обычных transition без фреймворков или хаков. Браузер запоминает начальное состояние и применяет transition перед скрытием элемента.

Ключевой нюанс: @starting-style
Для анимации появления из none обязательно нужен блок @starting-style, задающий начальные значения. Без него анимация не сработает. Пример для меню:

.menu {
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
  display: block; opacity: 1;
}
.menu--hidden {
  display: none; opacity: 0;
}
@starting-style {
  .menu--hidden { opacity: 0; display: none; }
}

Производственные сценарии и типичная ошибка
Свойство особенно критично для компонентов с адаптивным поведением, например, мобильного меню или выпадающих фильтров. Типичная ошибка -- забыть указать transition для всех свойств в паре, что приводит к мгновенному скрытию без анимации. Всегда проверяй, что display и animatable-свойства (opacity, transform) объявлены в transition вместе.

Вывод: transition-behavior: allow-discrete и @starting-style превращают скрытие и показ элементов из черного ящика в предсказуемый CSS-паттерн, снижая зависимость от JS и уменьшая визуальную регрессию в интерфейсах.

Claude Code наконец допёр до нормальной работы в команде

Теперь можно сидеть в одном терминале с коллегами и долбить задачи. Ещё одна плюшка — собирать несколько копий Claude в кучу, чтобы они гоняли друг друга.

Чё за зверь такой: mosaic.inc

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

⁣CSS :has() + scroll-driven-анимации — реактивные хедеры без JS

Связка селектора :has() и scroll-driven анимаций позволяет управлять состоянием UI-элементов по скроллу без единой строчки JavaScript. Раньше для sticky-хедеров, меняющих тень по скроллу, или сайдбаров с плавающим появлением тащили Intersection Observer или слушали scroll — теперь это решается чисто CSS. Основная ошибка: верстальщики продолжают использовать тяжелые JS-обвязки для задач, которые браузер уже умеет в потоке композитинга.

Как работает связка

Создаешь невидимый маркер внутри контента — обычный div с scroll-driven анимацией прозрачности. Затем на контейнере через :has() проверяешь состояние этого маркера: если он анимировался (значение opacity изменилось), значит, скролл прошел заданный порог. Пример для сайдбара:

.marker {
  animation: markerAnim linear;
  animation-timeline: scroll();
}
@keyframes markerAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
body:has(.marker[style*="opacity: 1"]) .sidebar {
  transform: translateX(0);
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}

Маркер не занимает места, не ломает layout, а анимация выполняется в отдельном потоке — без пересчета layout и repaint. Подходит для динамических хедеров с blur-эффектом, сайдбаров, floating-кнопок и control-панелей в дашбордах.

Production-контекст и trade-offs

Реальный пример: в админке e-commerce при скролле таблицы заказов нужно показывать панель фильтров, которая прилипает к верху и скрывает лишние контролы. Через :has() + scroll() это делается декоративным маркером на первом скролле страницы. Важно: :has() внутри стилей для ключевых элементов (body, main) может редко, но снижать производительность в больших документах с тысячами DOM-узлов. Практический совет: используй маркер с position: absolute и нулевыми размерами, чтобы избежать дополнительного reflow.

Ошибка: состояние через класс, а не через свойство

Типичная ошибка — пытаться проверять класс маркера, который не меняется при scroll-driven анимациях. Классы изменяются только через JS или через CSS-анимации с animation-fill-mode: forwards и интерполяцией opacity. Всегда проверяй через [style*="..."] или используй CSS-хуки через @property для кастомных свойств. Для старых браузеров без поддержки :has() оставляй Intersection Observer как фолбэк через @supports not selector(:has()).

Вывод: CSS :has() с scroll-driven анимациями — инженерный компромисс между производительностью и браузерной поддержкой, который уже сегодня решает задачи реактивных интерфейсов без JS.