🙃 2025 год, а тултипы всё ещё живут своей жизнью

Сделал подсказку для кнопки — работает идеально, пока не появится футер, скролл или resize. И вот тултип уже уехал за экран.

Нашли статью, где сравнивают три подхода:

🈂️ от «сделать быстро» до «сделать правильно»
🈂️ с готовыми примерами, live demo
🈂️ и CSS Anchor Positioning — пока экспериментальное API (только Chromium)

🔗 Ссылка на статью

💬 А вы как решаете позиционирование тултипов?

🐸 Библиотека фронтендера

#read_watch

🎯 CSS научился считать

В Chrome 142 появилась мощная фича — range syntax для container style queries и функции if(). Теперь CSS может сравнивать числа и принимать решения на лету.

Что это значит на практике:

Раньше мы могли проверять только конкретные значения. Теперь — сравнивать: больше, меньше, равно.

ℹ️ Умная тема

Контейнер с кастомной яркостью. CSS сам решает, какой цвет текста использовать:

#container {
  --lightness: 10%;
  
  color: if(
    style(--lightness < 50%): white;
    style(--lightness >= 50%): black
  );
}

Если фон темный (< 50%) — текст белый. Светлый — чёрный. Автоматически!

ℹ️ Умный бейдж уведомлений (см. на картинке)

ℹ️ Адаптивная типографика

CSS проверяет размер шрифта и подбирает оптимальную жирность:

font-weight: if(
  style(1em < 32px): 100;
  style(1em > 32px): 900
);

Маленький текст — тонкий шрифт. Большой — жирный. Для читаемости.

Главное:

✅ Работает с custom properties
✅ Работает с attr() из HTML
✅ Сравнивает разные единицы (px, em, 😵
✅ Поддерживает все числовые типы CSS

Поддержка: Chrome 142+

📎 Читать подробнее

🐸 Библиотека фронтендера

#read_watch

🔗 Что почитать

🎥 Список уровней производительности веб-анимаций

Какие веб-анимации быстрые, какие тормозят браузер, и почему безопаснее всего анимировать transform и opacity. Помогает быстро выбирать плавные анимации без лишней нагрузки.

🎥 Не используйте useTransition повсюду

Когда useTransition реально улучшает плавность интерфейса, а когда только усложняет код.

🎥 Что произошло за последнии пару лет с GC в V8

Какие идеи позволили сделать сборку мусора быстрее и менее заметной для пользователя.

🐸 Библиотека фронтендера

#read_watch

🤔 Нужен ли CSS псевдо-класс, которого не существует

У нас есть :open для элементов вроде <details> в открытом состоянии. Логично, что должен быть и :closed для закрытого, правда?
Но вот незадача: можно же просто написать :not(:open). Зачем плодить сущности?

С другой стороны — что проще прочитать: :closed или :not(:open)? Думаете в отрицаниях — это нормально?
CSS Working Group три года спорила об этом вопросе, и финал вас удивит.

😮 Спойлер: консенсус развалился, и :closed отправили в небытие... пока что.

История о том, как простое решение может стать философской дилеммой. Читайте, если хотите узнать, почему иногда меньше — это действительно больше 🔜

🔗 Ссылка на статью

🐸 Библиотека фронтендера

#read_watch

👨‍💻 Где читаете про новые фичи и лучшие практики

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

Интересно узнать:

📌 Какие телеграм-каналы или блоги вы читаете регулярно?
📌 Есть ли YouTube-каналы, которые реально помогли разобраться в сложных темах?
📌 В каких комьюнити задаёте вопросы, когда застряли?
📌 Кто из авторов объясняет так, что всё сразу становится понятно?

🎈 Может быть, вы сами ведёте блог или делитесь опытом — расскажите об этом тоже, пришло ваше время!

Соберём список реально полезных мест для фронтендеров. Пишите в комментариях ⬇️

🐸 Библиотека фронтендера

#read_watch

📱 Apple случайно раскрыла код веб-версии App Store

В начале ноября Apple запустила обновлённый веб-интерфейс App Store на фреймворке Svelte, но случайно оставила в продакшене активные source maps. Это позволило разработчику извлечь полную структуру фронтенда прямо из браузера.

Код включал UI-компоненты на Svelte/TypeScript, логику управления состояниями, интеграции с API и конфигурацию роутинга. Разработчик выложил всё на GitHub «в образовательных целях».

8 ноября репозиторий и его форки были удалены по запросу Apple через DMCA. Однако код по-прежнему доступен через зеркало в архиве Software Heritage 🔗

🙃 Отключение source maps в продакшене считается базовым шагом в современной веб-разработке, поэтому такая ошибка от Apple выглядит особенно необычно.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#read_watch

👀 Перестаньте таскать 50 КБ JS для модалок

Каждый раз одно и то же: нужна модалка → гуглите библиотеку → тащите зависимости → настраиваете accessibility → фиксите баги с фокусом → плачете над z-index.

А что если браузер уже умеет всё это нативно?

🔢 CChrome DevRel запустили серию «Baseline in action» — показывают, как решать реальные задачи без костылей.

Галерея с модалкой на чистом <dialog>: ноль библиотек, ноль кастомного JS для accessibility.

<dialog>
  <form method="dialog">
    <!-- Браузер сам управляет фокусом, Esc, backdrop -->
  </form>
</dialog>

Из коробки:

✅ Фокус автоматом заходит внутрь и не выходи
✅ Esc закрывает
✅ Контент под модалкой заблокирован
✅ Backdrop с blur одной строкой CSS
✅ Плавные анимации появления (даже из `display: none`)

📎 Читать статью с живыми примерами

🐸 Библиотека фронтендера

#read_watch