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

Экс-глава 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 умеет оба подхода. Каждый подагент живет со своим кэшем — если гоняешь одно и то же, за повторную обработку контекста платить не придется. 👉 Логово Верстальщика

Прошла половина лета Выгореть ещё успеем. А пока лето — отправляемся загорать. И не просто так, а со скидкой 5000 рублей по промокоду NETSIL от Яндекс Путешествий. Забронировать #реклама travel.yandex.ru О рекламодателе

⁣Больше никаких черных ящиков: 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 и уменьшая визуальную регрессию в интерфейсах.

Кешбэк 10% за рекламу в МАКС и Telegram через Директ Инвестируйте в продвижение в Telegram, МАКС или на обеих площадках 100 000 ₽ и больше через Директ — вернём часть бюджета на следующие кампании. Для участия заполните форму: укажите, что продвигаете, на каком логине и куда прислать условия. Акция действует с 1 июня по 31 августа. Получить предложение #реклама yandex.ru О рекламодателе

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.

Как один отказ бизнесу сэкономил компании 10 миллионов рублей За трудовой путь сотрудник несколько раз говорил бизнесу «нет», но один такой отказ оказался самым выгодным решением для компании. Близился конец проекта внедрения нового биллинга, бюджет был распределен, команды готовились к запуску. В этот момент бизнес предложил перенести архивные продукты и исторические данные по ним. Архивные продукты использовались редко, но требовались для разбора спорных ситуаций. Было принято решение не избавляться от legacy биллинга, а использовать его для чтения ретроданных. Оценка объема работ показала, что типового механизма нет, нужно менять архитектуру, разрабатывать новые сценарии миграции, тестировать и поддерживать. Сложенные оценки составили около 10 миллионов рублей. Пересчет финансовой модели показал, что дополнительные инвестиции увеличивают срок окупаемости проекта на один год, при этом функциональность не приносит измеримой бизнес-ценности. Сотрудник принял решение отказать бизнесу и предложил альтернативу — оставить данные в legacy биллинге доступными для чтения. Читать далее на Хабре

Сидеть и работать в корпорации страшно, жизнь-то мимо проходит. Уходить строить бизнес страшно, а вдруг прогорит. Один из вариантов - разрабатывать свой пет-проект по вечерам. Многие успешные компании, например, Twitter, создавались именно так. Это не значит, что ваш проект обязательно заработает миллиарды, но заработать больше, чем в найме, и получить ценный опыт вполне реально. Перед началом разработки появляется множество вопросов, например: – Как выбрать идею для пет-проекта? – Что нужно знать про маркетинг? – Как запуститься и довести до первых продаж не имея бюджета на рекламу? В телеграм-канале Твой пет проект, Михаил Табунов делится своим опытом с разработчиками и менеджерами. Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах. Подписывайтесь на Твой пет проект получайте пользу от практиков рынка!

⁣CSS навигация без JS: psevdokoordinaty i otstupy pod hatkoj Два svojstva - ::target-text i scroll-margin - reshayut problemy yakorej, hash-kollizij i pryachego pod headeron na storone HTML/CSS. Na proizvodstvennykh sajtah s dinamicheskim kontentom ili dizajn-sistemami chasto ignorirujut ony, vyodja JS-koostili i narushayut stabilnost layouta. Podsvetka fragmenta bez ID Psewdoelement ::target-text v Chrome 131+ pozvolyaet podsvetit tekst, na kotoryj ssylayetsya cherez #:~:text=. Eto rabotaet bez ykornej i bez skriptov. Naprimer, sdelat' link: /#:~:text=nuzhnyj+tekst Ili s kontekstom: #:~:text=nachalo-,do,-konec CSS minimalen:

::target-text {
  background-color: yellow;
  color: black;
}

Minus: net podderzhki v Firefox i Safari. No kak progressivnoe uluchshenie dlya Chromium - otlichno. Otstup pod hatkoj s scroll-margin Fixed header pyatatet zagolovok pri perekhode po #id. Ranshe eto trebovalo padding na bloke ili JS-vychisleniya. S scroll-margin yor sam znayet svoj otstup:

.anchor {
  scroll-margin-top: 80px;
}

Rabotaet s lyubymi hosh-ssylkami i scrollIntoView(). Dlya dublikatov ID - ne dublikat. Esli vtoraja vstrechaetsya, navigatsiya lomaetsya. Tipovaya oshibka i trade-off Chertaya sozdavat' mnogo ykorej v HTML, sozdayut kollizii dublikatov ID. Reshenie: ispolzovat ::target-text dlya podsvetki teksta bez privyazki k ID. No uchyot, eto progressivnoe uluchshenie: dlya polzovatelej v Firefox nichego ne podsvetitsya. Zachem? Dlya medijnyh sajtov, e-commerce, gde nado delegirovat' kontekst v URL. Prakticheskij sovet Combo-priem dlya stabilnosti:

.anchor {
  scroll-margin-top: 80px;
}
:target {
  outline: 2px dashed blue;
}
::target-text {
  background: rgba(255, 255, 0, 0.5);
}

scroll-margin i :target mozhno bez straktha v production. ::target-text - kak bonus dlya Chrome, no bez eto ne lomat. Vyvod: S zamenoj JS-ykorej na scroll-margin i ::target-text ty poluchish predskazuemyj layout bez bagov ot paddingov i bez poteri dostupnosti.

Анатомия парного доклада: как мы собирали «PROvoke» на Analyst Days. Часть 2 — выступление и фидбек Привет, Хабр! В первой части я рассказывал, как мы с Татьяной Маркиной готовили доклад «Провоок» на Analyst Days — про споры, студию в Краснодаре, логистический ад и идею с кнутом и пряником. А сегодня — второй части: что произошло на сцене, какие роли мы играли, почему корсет так и не вышел в свет, и как один разговор в кулуарах перевернул моё понимание публичных выступлений. Читать далее

⁣Анимация появления без костылей: CSS @starting-style для display: none Долгое время плавное появление модалок, тултипов или выпадашек с display: none было головной болью. Браузер просто не успевал проиграть анимацию при переключении — элемент уже отображался, а transition не срабатывал. Приходилось городить костыли с setTimeout или requestAnimationFrame. В production это особенно критично для лендингов и кабинетов, где часто встречается всплывашка с плавным появлением. Как это работает В CSS появилось решение — @starting-style. Это директива, которая задаёт начальные стили для момента, когда элемент появляется в DOM или display меняется с none на что-то видимое. Элемент висит с display: none. При смене, скажем, на block, браузер сначала применяет стили из @starting-style, а затем переходит к обычным. Если у элемента прописаны transition или @keyframes — анимация проигрывается. Пример production-кода

.popup {
  display: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@starting-style {
  .popup {
    opacity: 0;
    transform: scale(0.8);
  }
}

.popup.is-open {
  display: block;
  opacity: 1;
  transform: scale(1);
}

После добавления класса .is-open элемент плавно появляется, а при удалении — скрывается. Где пригодится: модальные окна, тултипы, дропдауны, появление элементов при клике или переключении вкладок. Типичная ошибка и trade-offs Если у элемента в обычном состоянии уже прописаны opacity: 0 или transform: scale(0.8), @starting-style может не сработать. Нужно убедиться, что display: none задан явно, иначе браузер проигнорирует директиву. Поддержка: Chrome 117+, Safari 17.2. Firefox пока в разработке. Работает и с transition, и с @keyframes. Можно указывать несколько селекторов внутри @starting-style. Практический совет: тестируй анимацию в Chrome DevTools с ручным переключением display — это помогает отловить сценарии, когда @starting-style не применяется из-за каскада. Вывод: @starting-style — это инженерный шаг к чистому CSS без JS-обвязки для анимации элементов с display: none, устраняющий визуальную регрессию при монтировании.

Как я хакнул рынок труда: пишем свой ИИ-комбайн для автооткликов на HH.ru Всем привет! Если вы хоть раз искали работу в IT за последний год, то знаете, что рынок беспощаден к новичкам. Нужно откликнуться на сотни вакансий, а в итоге получаешь отказы от роботов. Чтобы пробиться через фильтры HR, нужно под каждую вакансию писать уникальное сопроводительное письмо. В этой статье я сделаю полный разбор того, как я написал собственного автономного ИИ-агента, который ищет вакансии, фильтрует мусор с помощью локальной нейросети, пишет персонализированные сопроводительные письма и отчитывается мне в Telegram, пока я спокойно занимаюсь своими делами. Я хотел, чтобы скрипт был бесплатным, автономным и не требовал танцев с бубном вокруг платных API. Читать далее

⁣field-sizing: content — auto-height textarea без scrollHeight хаков Раньше для авто-высоты textarea приходилось писать скрипты: подписываться на input, сбрасывать height в 0, читать scrollHeight, присваивать обратно — и всё это ломалось при ресайзе окна или в SSR. Теперь в CSS появилось свойство field-sizing: content, которое решает проблему на уровне браузера. Как это работает Добавьте одно свойство на textarea или input, и браузер сам подстроит размер под содержимое:

textarea {
  field-sizing: content;
  min-height: 3em;
  max-height: 20em;
}

Для input ширина тоже подгоняется под текст. Никакого JavaScript: scrollHeight и height = 0 больше не нужны. Подводные камни и совместимость Пока поддержка только в Chromium 123+ (Chrome, Edge, Opera). Firefox и Safari ещё в разработке. Главное ограничение: если задать явные width или height в px или rem, свойство не сработает. Для textarea лучше сразу отключать стандартный resize, иначе авто-высота конфликтует с ручным ресайзом. Типичная ошибка: игнорирование фоллбэка Для production-интерфейсов (формы в кабинетах, SaaS, e-commerce) просто положиться на field-sizing нельзя — в Safari высота останется фиксированной. Практический совет: сделайте постепенное улучшение с фоллбэком через CSS и JS:

textarea {
  field-sizing: content;
  overflow-y: hidden;
  resize: none;
}
textarea:not(:focus) {
  height: 3em;
}

Для старых браузеров добавьте полифил на scrollHeight. Так вы получите стабильный layout без визуальной регрессии. Вывод: field-sizing: content — инженерно чистый способ убрать зависимость авто-высоты от JS, но для production в 2024 году обязательно закладывайте фоллбэк, пока Firefox и Safari не догонят Chromium.

⁣CSS box-decoration-break: clone для production-заголовков Многострочный заголовок с градиентным фоном и border-radius часто выглядит как бракованный: на второй строке скругления исчезают, фон обрывается. Это не баг браузера, а дефолтное поведение box-decoration-break: slice. В production — лендинги, блоги, админки — такая ошибка ломает визуальную цельность компонента. Как работает box-decoration-break: clone По умолчанию браузер режет декорации inline-элемента по границам строк. Свойство box-decoration-break: clone заставляет каждую строку отрисовывать padding, background, border-radius и box-shadow как независимый фрагмент. Для Safari нужен префикс -webkit-box-decoration-break: clone. Пример:

.heading {
  display: inline;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  padding: 0.2em 0.5em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Без clone на второй строке фон плоский, паддинги не срабатывают. С clone каждая строка получает полный набор декораций. Где это критично в production Динамические заголовки статей — длина строки плавает, ошибка проявляется непредсказуемо. Градиентные фоны со скруглениями на inline-элементах в UI-библиотеках. Списки с рамкой на каждом пункте-строке. Инлайн-элементы с box-shadow — без clone тень обрезается по краю строки. Поддержка: Chrome, Firefox, Safari, Edge — с префиксом для Safari. IE — нет. Типичная ошибка и совет Ошибка: применять к блочным элементам — эффекта ноль, работает только на display: inline или inline-block. Совет: скрести с background-clip: text — тогда каждая строка текстовой маски получит свой фон, что даёт неожиданно чистый визуальный результат для заголовков с прозрачным текстом. Trade-off: увеличивается сложность отладки визуальной регрессии, особенно для адаптивных сеток с переполнением строки. Вывод: box-decoration-break: clone — обязательное свойство для консистентных inline-декораций в production, предотвращающее визуальные артефакты на многострочных заголовках.