Container Queries в действии

Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра

HTML, используемый в этом примере:

<button class='responsive-button'>
  <img src='cart.png' alt='...'>
  <span class='text'>ADD TO CART</span>
</button>

Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт

➡️ @FrontendPortal | #CSS

Неопределенный чекбокс

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

Просто сделайте это, установив свойство indeterminate чекбокса в true:

checkboxEle.indeterminate = true;

Мы можем изменить стиль неопределенного чекбокса с помощью псевдокласса :indeterminate

➡️ @FrontendPortal | #tip by Shripal Soni

Когда на собеседовании смог притвориться синьором, и теперь в компании будет работать нейронка за 400к

➡️ @FrontendPortal

Этот календарный компонент выглядит очень стильно

Гибкая и функционально насыщенная библиотека календаря от "Juncai Li", которая работает с React, Vue, Angular и Svelte.

→ несколько режимов отображения (день, неделя, месяц, год)
→ поддержка drag-and-drop
→ архитектура на основе плагинов
→ высокая степень кастомизации

Отлично подходит для разработки приложений с расписанием или бронированием без необходимости писать всё с нуля

GitHub: calendar

➡️ @FrontendPortal

Визуализация основных методов массивов в JavaScript

➡️ @FrontendPortal

Функция minmax в CSS гридах

В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.

Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem

➡️ @FrontendPortal | #CSS

Альтернатива Firebase и Supabase

Называется PocketBase. Бесплатный и с открытым исходным кодом.

✓ Аутентификация и загрузка файлов
✓ Реалтайм-база данных
✓ Встроенная админ-панель

Есть SDK для JavaScript. Хостите где угодно!
→ http://pocketbase.io

➡️ @FrontendPortal

Наткнулся на полезный инструмент: визуальный редактор разметки на гридах и флексах

Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам

Забираем в закладки 👍

➡️ @FrontendPortal | #resourse

«ИИ тебя заменит»

Я, который уже заменил себя с помощью Claude:

➡️ @FrontendPortal

Совет по CSS: Единица измерения turn

Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg)

➡️ @FrontendPortal | #tip by Shripal Soni

Создавайте видео с помощью HTML, CSS и JS. Как?
Просто установив один Agent Skill.

Он называется HyperFrames, это опенсорс проект, и он работает с любым ИИ. Результат впечатляющий.

→ http://github.com/heygen-com/hyperframes

➡️ @FrontendPortal

🏄‍♂️ Приближаем лето всем фронтенд-сообществом

23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴

♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.

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

🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.

Сегодня исторический день для JavaScript!
API Temporal API теперь доступен в Node.js.

Наконец-то нормальный API для работы с датами.

Прощай new Date("2026-04-28")
Здравствуй Temporal.PlainDate.from("2026-04-28")

✓ Даты без странных таймзон
✓ Можно нормально прибавлять дни, месяцы и годы без багов
✓ Прощай, куча проблем с Date

➡️ @FrontendPortal

Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс.

Поддержка около 85%, в Firefox пока за флагом

https://www.joshwcomeau.com/animation/scroll-driven-animations/

➡️ @FrontendPortal

Яндекс Вертикали дарят IT-спецам 10 и 20 тыс. рублей на 🌍Путешествиях

Переходите в телеграм-канал команды, смотрите подробности и участвуйте!

Анимации, запускаемые при прокрутке, на чистом CSS!
Никакого JavaScript. Никаких библиотек. Никаких странных костылей.

Самое приятное: работает во всех современных браузерах.
И реализуется это очень просто, примерно так 👆

➡️ @FrontendPortal

Митапы — это, конечно, круто и полезно. Но что может быть лучше открытой дискуссии с коллегами о наболевшем? ☑️

AvitoTech тут зовёт на классный ивент для фронтендеров. Обещают полтора часа дискуссий на самые разные темы: от роста фронтенд-инженера в тимлида до ванильного JS. И вишенка на торте — афтерпати на веранде ☄️

Всё пройдёт вечером 19 мая, так что погода не должна подкачать. Регистрация, кстати, по ссылке.