В CSS есть константа infinity — короткая запись для «максимально возможного значения» в конкретном контексте. В какое число она превращается, зависит от браузера, операционной системы и того, к какому CSS-свойству вы её применяете. Поддержка в порядке, и иногда такая запись делает стили чуть понятнее — без магических чисел. Но использовать её вовсе не обязательно.

В статье показываем на примерах с z-index, размерами и border-radius, почему infinity внутри calc() — это не «абстрактная бесконечность», а значение, которое упирается в пределы конкретного свойства. Отдельно смотрим на анимации: «до infinity» элемент прыгает в финальное состояние сразу, а с бесконечной задержкой анимация так и не стартует. #css #webdev

🌸 Читать статью

Стартуем уже через час — CSS 2025: Baseline Widely Available

Через 60 минут в прямом эфире Александр Першин, Николай Шабалин, Никита Дубко и Алексей Симоненко разберут все CSS фичи, которые стали доступными в 2025. Подключайтесь, задавайте вопросы и вместе раскидаем их по важности.

🐭 Подключиться на YouTube
🐹 Подключиться в VK

Подводим итоги!

Второй сезон Чемпионата по вёрстке подошёл к концу. 19 декабря в 12:00 (MSK) вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.

🐭 Подключиться в YT
🐹 Подключиться в VK Video

Flexbox — инструмент для раскладки крупных блоков и микросеток. Чтобы превратить блок во флекс-контейнер, ему задают display: flex. Непосредственные потомки такого контейнера становятся флекс-элементами: их можно выравнивать по главной и поперечной осям и распределять свободное пространство внутри контейнера.

В статье разбираем базовые термины (главная и поперечная оси) и ключевые свойства: flex-direction, justify-content, align-items/align-self, align-content и flex-wrap. После этого проще понимать, как собирать меню, карточки или пагинацию так, чтобы блок аккуратно переживал переполнение контентом и разные размеры экрана. #css #flexbox

🪻 Читать статью

Уже через час начинаем прямой эфир с экспертами из компаний второго сезона Чемпионата по вёрстке.

🐭 Подключиться в YT
🐹 Подключиться в VK Video

Продолжаем Новогоднее колесо в HTML Academy

С 19 по 21 декабря запускаем новогоднюю акцию для тех, кто планирует войти в IT или прокачать текущие навыки. В «Новогоднем колесе» участвуют лайт-профы, программа «Войти в IT», формат профа Классик и обучение под компанию — можно получить приятные условия именно на то обучение, которое подходит под ваш уровень и цели.

Это хороший момент начать обучение без долгих раздумий: выбрать направление, зафиксировать выгодные условия и войти в новый год с понятным планом развития. Крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.

❄️ Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.

Формирование ИПР после испытательного срока

Илья Лебедкин — основатель Addamant, рассказал про путь после обучения.

Полный эфир с Addamant — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения

Как упростить React в 2 раза с помощью программирования на CSS
➿➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв.

Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением».

В выпуске:

✓ Классическая реализация слайдера на React: состояние, вычисления и условия
✓ Как перенести расчёты положения и состояний элементов в CSS
✓ Использование CSS-переменных и calc() вместо JavaScript
✓ Что такое «реактивный CSS» и как он работает вместе с React
✓ Когда можно начать использовать этот подход

🐭 Смотреть на YouTube
🐹 Смотреть в VK

😱 Кексобот в опасности. Новогодние каниикулы скоро начнутся!

С 1 по 11 января в HTML Academy — новогодние каниикулы. Все задания доступны бесплатно, но есть нюанс: Кексобот захвачен.

Злобный jQweny проник в инфраструктуру Академии и пытается переписать Кексобота — стереть смысл из кода, превратить интерфейсы в шум и доказать, что разработчики больше не нужны. У нас есть всего 11 дней, чтобы вернуть всё на свои места.

jQweny умеет имитировать интеллект, но не умеет думать, сомневаться и чинить. Настоящий код — это вы. Каждое решённое задание, каждый пройденный тренажёр — сигнал системе, что Кексобота ещё можно спасти.

Что нужно делать?

0️⃣ Зайти на лендинг новогодних каниикул или прямо в Кексобота.
1️⃣ Выбрать любой тренажёр — с нуля или с середины.
2️⃣ Каждый день проходить задания, испытания и вызовы.
3️⃣ Участвовать в викторинах и набирать баллы.
4️⃣ Объединяться с друзьями и вместе давать отпор jQweny.

🎁 Чем больше заданий закрыто на 100%, тем слабее влияние захватчика и тем ближе Кексобот к свободе. По итогам каниикул— среди самых активных участников Кексобот разыграет призы за своё спасение.

Код ждёт. Кексобот тоже.

Подробнее | Спасти Кексобота

Удачи. И помните: человеческий код jQweny подделать не сможет.

Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN.

В статье разбираем ограничения и нюансы применения констант. Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику. #css #webdev

«Забавно наблюдать, как вы радуетесь

pi

и

infinity

. Вы ищете точность в константах, а я уже переписываю систему целиком. Но продолжайте. Каждый ваш

calc()

— всего лишь строка.»

—

jQweny

👍 Читать статью