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

⁣CSS anchor-positioning: теперь тултипы и попапы без единой строчки JS-координат Тултипы, дропдауны и контекстные меню в production-интерфейсах (кабинеты, дизайн-системы, e-commerce) часто страдают от ручных расчётов координат через getBoundingClientRect. Типичная ошибка: забыли обновить позицию при скролле или ресайзе, и на мобильном устройстве компонент улетает за край экрана. CSS anchor-positioning решает это системно. Как это работает Якорному элементу задаёшь CSS-свойство anchor-name: --anchor-id (или атрибут anchor). Прикреплённому элементу — position-anchor: --anchor-id и inset-area: top center для привязки по стороне. Координаты рассчитывает браузер, без JS. .button { anchor-name: --anchor-btn; } .tooltip { position: absolute; position-anchor: --anchor-btn; inset-area: top center; margin-top: 8px; } <button class="button">Наведи</button> <div class="tooltip">Я тултип!</div> Production-пример с попапом В связке с popover можно открывать меню вообще без JS. Атрибут popovertarget на кнопке + popover на блоке. Браузер сам приклеивает попап к якорю и двигает его при переполнении окна. Это снижает визуальную регрессию и упрощает поддержку в компонентных библиотеках. Типичная ошибка и trade-off Не путай inset-area с anchor(). Первое — это готовое правило для одной из 12 сторон (top center, left middle и тд). Второе — функция для гибкой привязки к конкретной стороне якоря, если нужна нестандартная позиция. Ошибка: пишут inset-area, потом переопределяют его через транслейты в position-try-fallbacks. Лучше сразу использовать anchor() для сложных вариантов. .tooltip { position: absolute; position-anchor: --anchor-btn; bottom: anchor(top); left: anchor(center); transform: translateX(-50%); } Предупреждение о поддержке и fallback Chrome 125+ и Edge 125+ работают стабильно. Firefox и Safari — за флагами. Всегда оборачивай новое поведение в @supports (anchor-name: --x). Если условие не сработало — оставляй старый JS-подход с useEffect или ResizeObserver. Не обещай pixel-perfect в старых браузерах. Вывод: CSS anchor-positioning убирает ручные расчёты координат и делает позиционирование предсказуемым при скролле и ресайзе — это шаг к стабильным интерфейсам без координатного спагетти.

⁣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 для старых браузеров и отказа от декоративных эффектов на сложных виджетах.

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? Кто-то без всякой драмы проходит собесы и уходит в Яндекс, VK или на валютную удалёнку. В сильные и амбициозные команды. А у кого-то зарплата не растёт, который год, задачи одни и те же неделя за неделей, календарь забит созвонами, от которых ничего не меняется. Отклики на вакансии, а в ответ — тишина или очередная noname контора. На собесах вообще нигде не встречающаяся техничка(( 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. Из своих учеников собрал комьюнити, в котором уже больше 220 frontend-разработчиков 🫂 В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде. У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ База по микрофронтам ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме А ещё у меня куча успешных кейсов и отзывов — все они в канале. Подписывайся: https://t.me/+HRLOZlVJnww1NTJi Реклама, erid: 2W5zFJGewzh ИП Галактионов Тихон Витальевич, ИНН 771618975809

Ну нифига себе: 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 решили разобраться, что там с гибким графиком. Смотрим, готовы ли айтишники терять бабки ради работы из дома, что на самом деле толкает менеджеров на этот «возврат» и не окажется ли отмена дистанта временной лажей. Читать далее 👉 Логово Верстальщика