Зачем команде со своими AI-сервисами джун-фронтендер

Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK) — эфир с директором.

Спросим:
❤️ Какие задачи получает джун в первый месяц в команде
❤️ Как фронтендер растёт до фулстека внутри компании
❤️ Что меняется в работе, когда AI-агенты пишут часть кода
❤️ Почему компания вкладывается в свой поток джунов

Среди первых 100 регистраций разыграем место на программе обучения. Имя победителя — на эфире.

https://htmlacademy.ru/events/live-maxis

Три карточки в сетке. У каждой — заголовок, описание и кнопка. Заголовки разной длины, и кнопки разъезжаются по разной высоте. Сетка выглядит рваной.

Что с этим делали раньше? Считали высоту заголовков через JavaScript и проставляли min-height. Или мирились. Теперь хватает одной строки CSS — grid-template-rows: subgrid на каждой карточке. Карточки наследуют строки родительской сетки, и одинаковые блоки соседних карточек выстраиваются по общим линиям.

Внутри статьи — рабочая демка, разбор синтаксиса для строк и столбцов и сравнение с обычным Grid. Firefox с 2019-го, Chrome 117+, Safari 16+ — уже в baseline. #css #subgrid

🔔 Читать статью

Представьте карточку товара. На широком экране она вытягивается горизонтально: слева фото, справа текст. На узком — становится вертикальной: фото сверху, текст снизу. Кажется, медиавыражения справятся.

А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий — @media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.

Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.

В статье — пример с резиновой карточкой кроссовок и разбор container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdev

📎 Читать статью

Завтра спросим у Maxis: зачем им джун, если код пишет Codex

Завтра в 12:00 (MSK) — эфир с директором Maxis. AI-агенты пишут джуновский код, и компании всё равно держат свои программы обучения. Спросим, как разработчик заходит в команду в этой реальности.

❤️ На каких задачах AI-агенты ускоряют команду, а где ломают качество
❤️ Как джуну расти, если рутинный код всё чаще пишет агент
❤️ На что смотрит работодатель, чтобы отделить разработчика с навыком от автора промптов

В программу обучения уже включён модуль «Фронтенд на автопилоте: AI-агенты на практике» — выпускники приходят к работодателю, умея работать с AI-кодингом.

💯 Среди первых 100 регистраций разыграем место на программе. Имя победителя — на эфире.

https://htmlacademy.ru/events/live-maxis

Сегодня в 12:00 (MSK) — эфир с директором Maxis. Команда делает свои продукты на React и AI-решения для среднего бизнеса, и через программу обучения растит к себе фронтендеров — с реальными задачами уже в первые месяцы. На эфире разберём, как джун попадает в команду и почему компания вкладывается в свой поток выпускников.

💯 Регистрация в первой сотне — последний шанс на розыгрыш места на программе. Имя победителя назовём в финале эфира.

https://htmlacademy.ru/events/live-maxis

ESLint — статический анализатор: разбирает код в AST и проверяет по правилам, ничего не запуская. Поэтому ловит то, что трудно увидеть на ревью — теневое имя в замыкании, забытый await внутри .map(), недостижимую ветку switch, мутацию параметра.

Часть найденного линтер чинит автоматически — с флагом --fix. Остальное оставляет на ваш суд: не каждое нарушение правила означает баг.

В новой статье — как поставить ESLint, что делает --fix, как настраивать правила под конкретный проект и команду. Плюс интерактивный пример прямо на странице: вводите код — ESLint показывает проблемы. #js #tools

🔑 Читать статью

Пресеты для ESLint v10 от HTML Academy → https://github.com/htmlacademy/eslint-config-htmlacademy

Регрессия проявилась после обновления, тесты её не ловят, в main за неделю — 40 коммитов от семи разработчиков. Перебирать вручную, делая git checkout на каждый, — потерянный день.

git bisect сводит это к бинарному поиску по истории. Помечаете один коммит рабочим, второй сломанным. Git сам переключается на середину диапазона и спрашивает: «Здесь работает?» На 40 коммитов хватает 6 шагов, на 800 — 10.

Если поведение покрыто тестом — можно вообще ничего не нажимать. git bisect run npm test проходит весь путь сам и возвращает хеш виноватого коммита. В статье — пошаговый разбор с командами и интерактивная симуляция поиска. #tools #git

✍️ Читать статью

Среда. Кекс занял пост на подоконнике и наблюдает: джун подключил кастомный шрифт через @font-face и хмурится из-за времени загрузки. Сейчас узнаем, что делать.

Пояснение ⬇️

У swap по спецификации очень короткий блок-период, а в реализации браузеров фолбэк показывается сразу при первой отрисовке. Когда кастомный шрифт прилетает, происходит подмена — это FOUT, flash of unstyled text. Со значением block блок-период по рекомендации около 3 секунд, и всё это время текст невидим. Так получается FOIT, flash of invisible text. Значение optional устроено иначе: короткий блок-период (около 100 мс по рекомендации), а swap-периода нет вовсе. Если шрифт не успел за этот блок, браузер останется на фолбэке до следующего захода на страницу. Полезно для медленных сетей — текст не подменяется после загрузки.