CSS Боль
617 subscribers
30 photos
38 links
Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.
Download Telegram
Накрутчики обрушили доверие к резюме — компании больше не верят ни трудовой, ни GitHub. Как доказать реальный опыт?

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

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

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥4🥰2🤯2🐳1
CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют.

В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций.

— Что такое маскирование и как оно работает.
— Главная «киллер-фича» масок.
— Принцип работы масок.
— 4 свойства, которые закрывают 95% задач.
— Классный пример маски в реальном интерфейсе.

🎁 Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9❤‍🔥3💯1
Статья «Восхитительный Range Syntax в CSS»

Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.

В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил.

В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто).

Читать статью → https://habr.com/ru/articles/1002216/

Попробовать демку → https://htmlacademy.ru/demos/249
🔥20👏3🥰1
Мы сделали пошаговую демку к новому выпуску — попробуйте сами собрать 3D-эффект летающих мышек на CSS-масках. Каждый шаг из ролика можно пройти в браузере и посмотреть код.

В выпуске — анимация mask-position и mask-size, множественные маски в противофазе, mask-composite для пересечений. Нейросеть генерирует @keyframes за минуту — и это наглядный пример того, как ИИ ускоряет разработчика. Но ускоряет именно разработчика, а не заменяет его.

Во второй части — почему нейросети не облегчили вход в разработку, а наоборот создали пропасть на пути в IT.

🎁 Демонстрация: анимация CSS-маски

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🔥15🎉3🤩2
Цифровой профессиональный след

Яркая новинка HR-сезона 2026 — понятие цифрового профессионального следа. Я начал встречать его упоминания в феврале в HR-каналах и в вакансиях. В чём суть явления?

Эйчары не доверяют опыту, описанному в резюме, или записям в трудовой книжке. Но им надо разбирать отклики от кандидатов, надо на что-то полагаться. Поэтому им нужна хоть какая-то опора.

Цифровой профессиональный след и есть эта опора. По сути, это набор внешних, объективных, достоверных подтверждений (пруфов) либо опыта, либо уровня скилов кандидата. Важно, чтобы кандидат не мог повлиять на этот пруф.

Идеальный пример ЦПС — это доклад на конференции. Описание доклада висит на сайте конференции, и кандидат не может его изменить. По докладу можно понять уровень докладчика, сколько у него лет опыта, где он работал.

Вроде бы идея с цифровым следом здравая. Но есть проблема — хороших источников цифрового следа мало. Что ещё можно исползовать как цифровой след? Накидайте вариантов.

И ещё одна проблема. Теперь каждому разработчику с самого начала карьеры надо вести дневничок и собирать портфолио наград и грамот, как в школе? Вы готовы к этому, дети? Да, капитан!
💯6😁4❤‍🔥2
Накрутчики опыта в IT, у вас проблемы. HeadHunter зарелизил систему, после которой фейковые резюме исчезнут из выдачи. Совсем.

Рекрутеры получили инструменты, чтобы отделить реальный опыт от накрученного прямо в списке с откликами. Врал годами? Станешь невидимкой. Честные наконец попадут в поле зрения.

А ещё рекрутёрам дали лёгкий способ банить накрутчиков навсегда. HR-сообщество вычистит платформу за считаные месяцы. Эйчары ждали этого годами.

Как это работает, кто пострадает первым и почему не все платформы могут себе это позволить. Разбираем в новом выпуске CSS Боли.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥8🔥7🤩5💯2🦄2
От резюме к доказательному найму

Рынок найма сломан двумя кризисами: экономическим и кризисом доверия. Они наложились друг на друга и бьют даже по сильным специалистам.

Новый дефолт рынка — нулевое доверие к кандидатам. И это надолго.

Резко выросла ценность цифрового профессионального следа — пруфов, которые подтверждают опыт и уровень навыков. Рынок движется к доказательному найму.

У большинства разработчиков таких доказательств нет. А нарабатывать их долго и дорого.

Поэтому появляются форматы, которые дают достоверное подтверждение уровня, сопоставимое по силе с докладом на технической конференции.

Один из таких форматов — чемпионат по вёрстке для мидлов от @htmlacademy. Он изначально строился как доказательный формат и включает:

– сложное задание с высоким потолком скила;
– двухнедельный формат, в котором можно показать свой максимум;
– ручную проверку работ;
– сильных проверяющих — синьоров из бигтеха и крупных продуктовых компаний;
– публикацию результатов в публичном рейтинге качества фронтенд-разработки.

Старт — 30 марта. Если у вас есть коммерческий опыт в разработке, это способ получить публичный пруф своего уровня.

Записаться на чемпионат
🔥6❤‍🔥4😁3🥰2
Когнитивная пропасть и нейросети

Многие уверены: нейросети облегчили вход в айти. Но в жизни всё ровно наоборот. ИИ не облегчил вход в айти, а серьёзно его усложнил. На пути новичка появилась настоящая когнитивная пропасть.

Без упоминания «поверхностных вайбкодеров» рассказ не выйдет. Это ребята, которые не разбираются в разработке, но умело пользуются нейросетями и даже ваяют какие-то IT-продукты. Казалось бы, отличный пример легчайшего входа в айти через владение ИИ. Но малину портят два но:

1. Низкий (почти отсутствующий) порог входа в вайбкодинг

Если ИИ осваивается за пару недель, то сколько вайбкодеров наплодится за полгода? Сотни тысяч, миллионы? Низкий порог входа всегда приводит к гигантской конкуренции и отрицательной рентабельности в каждой сфере.

Короче, на вайбкодинге очень скоро будет не заработать.

2. Пропасть в эффективности между разработчиками и вайбкодерами

Сильный разработчик, который отлично владеет ИИ, заменяет сотни поверхностных вайбкодеров. Он выдаёт результат быстрее, качественнее, дешевле. А ещё он решает задачи, которые вайбкодеру не поддались, потому что разработчик видит решение задачи до того, как начинает писать промт.

А теперь задайте себе вопрос. Кто нужен серьёзному бизнесу, в котором можно построить профессиональную карьеру? Поверхностные вайбкодеры или сильные разработчики, хорошо владеющие ИИ.

Теперь для входа в айти (и для последующего роста) критически важны:
– глубокие технические навыки (шире и глубже, чем требовались раньше);
– навыки проектирования систем, декомпозиции и постановки задач (которые вообще-то у разработчиков развиваются годами по мере набора опыта);
– умение работать с нейросетями.

Требования для входа в айти из-за ИИ не упали, а выросли в разы.

Это и есть когнитивная пропасть.

Для подготовки кадров это означает, что надо давать глубокую базу и после неё обучать владению ИИ. Мы в Академии уже перестроили под это свои программы. Посмотрите, как это устроено, на примере «Нейрофронтендера».

📲 Резервный канал в MAX
🔥12❤‍🔥4🥰3
Круговой прогресс-бар на CSS — после первого выпуска казалось, что тема закрыта. Два градиента, пара переменных, готово.

А потом пришёл запрос: «Сделай концы шкалы круглыми». Одно «маленькое» требование — и в реализации появилась тригонометрия, формулы позиционирования по окружности, синхронизация четырёх градиентов.

Как из двух градиентов вырос прогресс-бар с CSS-тригонометрией — в новом выпуске.

Попробуйте демонстрацию — покрутите параметры и посмотрите, как всё работает вживую.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9😍3❤‍🔥2🎉2
Больше знаешь — крепче спишь (девиз ордена Хранителей)

Новая истина для айтишников. Причём именно в такой формулировке.

Бизнес с удовольствием заменил бы всех разработчиков на оркестры агентов, но мешает одно «но» — автобусное число.

Кто-то должен знать, как устроена система, как устроены эти оркестры, и нести за это ответственность. Короче, каждой системе нужен Хранитель, а лучше — несколько. Хранителей не уволят, хранителей будут беречь: они ценны, а выращивать новых очень дорого.

Когда орден Хранителей для каждого продукта будет создан и угроза автобусному числу исчезнет, бизнес начнёт избавляться от рядовых разработчиков, которые занимаются рутиной. Задачи уволенных будут передаваться в оркестры.

Кого же выберут в Хранители? Тех, кто лучше, полнее и глубже знает свой продукт, свою систему, свой оркестр.

Так что больше знаешь — крепче спишь.

Резервный канал в MAX
🔥8❤‍🔥2🥰2
Прощай, квадратный веб

Chrome радует скоростью релиза новых фич. Совсем недавно, в начале февраля, мы обсуждали новости про экспериментальную фичу — свойство border-shape. А спустя два месяца, 7 апреля 2026, фича уже в релизе в Chrome 147.

Напомню, чем так мил border-shape. Свойство позволяет задавать произвольную форму блока с помощью функции shape(), которая уже используется в clip-path, и с которой многие уже знакомы.

Но главное, что эту форму понимают все остальные декоративные свойства — рамки, тени, аутлайны. Эту форму видит и внутренний контент. Так что выход border-shape можно смело называть революцией.

И ещё один приятный момент. Сама функция shape() находится в интеропе 2026. А значит, что и border-shape во всех браузерах может появиться быстро.

В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.
🔥17💯4🥰2❤‍🔥1