CSS Боль
572 subscribers
35 photos
1 video
42 links
Канал @htmlacademy про сложные места CSS без магии и суеверий https://tml.io/cssbol. В каждом выпуске разбираем механику движков, показываем живые демо и даём проверяемые решения — чтобы непонятное становилось повторяемым.
Download Telegram
Накрутчики опыта в 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
🔥10❤‍🔥3😍3🎉2
Больше знаешь — крепче спишь (девиз ордена Хранителей)

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

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

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

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

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

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

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

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

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

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

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

В общем, всех поздравляю с обновкой! А я пошёл думать над интерактивным курсом по border-shape.
🔥18💯4❤‍🔥3🥰2
This media is not supported in your browser
VIEW IN TELEGRAM
Реактивный CSS всё ближе

Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными

Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:

@container style() range syntax queries: layout.css.attr.enabled


То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только if().

Детали релиза:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151
🔥10🎉5❤‍🔥4💯3
Мини-игра по CSS-фильтрам

Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.

Можно играть даже на мобильном.

Играть здесь
❤‍🔥9💯2🔥1👏1🎉1
Продолжение мини-игры по CSS-фильтрам

Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!

Можно играть даже на мобильном.

👉🏻 Играть здесь
❤‍🔥8
Лего-гриды

Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.

Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.

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

Играть в новый уровень про гриды
🔥6❤‍🔥3