Реактивный CSS уже близко!
➿➿➿➿➿➿➿➿➿➿
CSS теперь умеет реагировать на состояние и управлять интерфейсом самостоятельно. В новом выпуске «CSS Боль» показываем, как построить реактивный слайдер.

Внутри выпуска:

✓ Что такое Reactive CSS и как он меняет подход к разработке.
✓ Как заменить десятки JS-классов одной CSS-переменной --current.
✓ Используем @property, sign(), abs() и sibling-index() для вычислений прямо в стилях.
✓ Контейнерные запросы, которые понимают, какой элемент активен.
✓ Реактивные эффекты: слайды двигаются, кнопки подсвечиваются, логика живёт в CSS.

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

Можно ли построить школьные графики на чистом CSS?
➿➿➿➿➿➿➿➿➿
Оказывается, можно. В новом выпуске «CSS Боль» строим функции прямо в браузере — от простых прямых до синусоид.

CSS умеет работать с линейными функциями, параболами через pow(), логарифмами и тригонометрией. Всё это можно использовать для параллакса, анимаций по траекториям и необычных меню.

Внутри — интерактивная демка, где можно поэкспериментировать с формулами и увидеть, как CSS справляется со школьной математикой.

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

Как понять :nth-child() так, чтобы он перестал пугать?
➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боль» делаем сложный селектор :nth-child() понятным буквально каждому, раскрывая его внутренние секреты и механики с помощью интерактивной визуализации и простых наглядных примеров.

В выпуске:

✓ Как работает переменная n и почему она начинается с нуля
✓ Что делают формулы 2n, 2n+1, n+3 и -n+4
✓ Как выбирать «до» и «от» определённого элемента
✓ Как составлять и понимать сложные последовательности
✓ Пересечения и объединения выборок
✓ Почему odd и even — это всего лишь сокращения формул

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

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

CSS теперь умеет сравнивать значения прямо в стилях: запись вроде 10 <= --x <= 12 — это рабочий код, а не псевдоязык.
➿➿➿➿➿➿➿➿➿➿
В свежем выпуске «CSS Боль» разбираем range syntax в стилевых запросах и смотрим, как с его помощью подсветить диапазон дат в календаре на чистом CSS. По пути становится понятно, почему :nth-child(of S) в этой задаче быстро упирается в свои ограничения, а реактивный CSS с переменными и range syntax даёт более прямое и прозрачное решение.

В выпуске:

✓ Как работает range syntax и откуда берётся запись 10 <= --x <= 12 в стилях
✓ Почему :nth-child(of S) не подходит для подсветки диапазона дат в календаре
✓ Как связать custom properties, CSS-математику и условия в стилевых запросах
✓ Пример полностью рабочей подсветки диапазона на чистом CSS, без JavaScript

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

Сфера IT за 10 лет изменилась до неузнаваемости. В 2016 достаточно было пройти базовый курс по вёрстке — и через месяц ты уже работал, получая зарплату выше средней по стране.

В 2026 всё наоборот: требования выросли, зарплаты стоят на месте, а путь джуна легко растягивается до года. В свежем выпуске «CSS Боль» сравниваем рынок 2016 и 2026 и разбираемся, почему вход в профессию стал в разы сложнее — и что это означает для тех, кто только собирается учиться.
➿➿➿➿➿➿➿➿➿➿

В выпуске:
✓ Как работал вход в IT в 2016-м и почему он был таким быстрым
✓ Почему стартовые 40–60 тысяч в 2026-м — уже не «прыжок вверх», а просадка по доходу
✓ Насколько выросли требования к джуну: вёрстка, чистый JS, SPA, фреймворк и работа с ИИ
✓ Почему процесс выхода на первое собеседование теперь занимает 6–12 месяцев
✓ Что показывают данные Росстата и статистика HTML Academy о реальном состоянии рынка
✓ И к чему приведёт эта тенденция: прогноз кадрового кризиса в ближайшие 2–3 года
✓ Кому будет легко входить в IT в 2026

Если вы планируете вход в IT — этот выпуск поможет понять текущие реалии без иллюзий и хайпа.

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

CSS-анимации можно описывать не только через десятки @keyframes. В CSS есть функция, которая позволяет задать всю форму движения одной строкой — с ускорениями, паузами, рывками и перелётами.

В свежем выпуске «CSS Боль» разбираем функцию linear() в animation-timing-function и показываем, как с её помощью управлять прогрессом анимации точнее, чем привычными ease и cubic-bezier().
➿➿➿➿➿➿➿➿➿➿
В выпуске:

✓ Как работает linear() и почему это не просто «линейная» анимация
✓ Что такое точки прогресса и как они выходят за диапазон 0–1
✓ Как делать паузы, отскоки и overshoot без сложных @keyframes
✓ Почему отрицательные значения — это часть спецификации, а не баг
✓ Как одной тайминг-функцией синхронизировать несколько анимаций
✓ Разбор спецификации CSS Easing Functions Level 2 и практические примеры

Меньше кода, больше контроля над движением — и анимации, которые наконец перестают быть болью.

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

CSS 2025: Baseline Widely Available

Завтра в 20:00 (17 декабря) проведём стрим и соберём CSS-тирлист: что в S-тир, а что пока «ну, прикольно». Container queries. oklch(). Тригонометрия в calc(). Анимация гридов. Range syntax в медиазапросах. И ещё куча возможностей, которые стали доступны в 2025 году.

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

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

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

В выпуске:

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

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

Раньше круговые прогрессбары делали на SVG: считали углы, контролировали атрибуты, страдали. До сих пор больно открывать инспектор на старых проектах.

Сегодня — один div, одно CSS-свойство. А на выходе прогрессбар, который сам меняет цвет и анимируется без единой строчки JavaScript. Приём работает во всех современных браузерах уже сейчас. Можно забирать в продакшен сегодня.

Новый выпуск CSS Боль:
🐭 Смотреть на YouTube
🐹 Смотреть в VK

Рамки в форме вырезов — без SVG, картинок и костылей
➿➿➿➿➿➿➿➿➿➿
Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?»

В новом выпуске «CSS Боль» рассказываем, почему привычные border и box-shadow внезапно перестают работать, и как современный CSS позволяет решить задачу аккуратно, надёжно и с отличной поддержкой.

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

В начале 2025-го казалось, что всё кончено: ИИ нас заменит, разработчиков уволят, стартапы будут делать в одиночку люди без опыта, а один джун с агентами закроет работу целой команды.
К концу года паника прошла — наступило нейроотрезвление.
➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боли» спокойно разбираемся, что на самом деле происходит. Почему ИИ стал удобным прикрытием для увольнений, а не их причиной. Сколько денег сожгли на вайб-кодинге. И главное — ставим эксперимент: даём ChatGPT реальную задачу и смотрим, как он с ней справляется. Спойлер: после долгих препирательств нейросеть призналась — «Я соврал концептуально».

Ролик для всех, не только для программистов: код будет, но понимать его не нужно — всё и так видно. Если тревожно за будущее профессии, самое время посмотреть и выдохнуть.

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

CSS scroll-driven animations позволяют привязать любую анимацию к состоянию прокрутки — без JavaScript, без вычислений offset, без боли.

Раньше для анимаций по скроллу приходилось вспоминать, как работают все эти offsetTop, scrollY, getBoundingClientRect. Потом — математика, потом — кроссбраузерность. Теперь достаточно одного CSS-свойства: animation-timeline: scroll(). Попробуйте в демке.

В новом выпуске CSS Боли разбираем, как это работает. Функция scroll() с параметрами scroller и axis, тонкости с containing block и позиционированием, почему nearest ведёт себя не так очевидно.

Это первая часть серии — знакомство с анонимной временной шкалой прокрутки. В следующих выпусках — ещё больше.

Демонстрации:
🔜 Прогрессбар со scroll-анимацией
🔜 Абсолютное позиционирование

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

Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.
➿➿➿➿➿➿➿➿➿➿➿➿
Связка counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения.

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

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