HTML Academy
9.75K subscribers
5.52K photos
189 videos
4 files
3.47K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Forwarded from CSS Боль
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
🔥4❤‍🔥22
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Сегодня в 12:00 (MSK) — эфир с директором Maxis. Команда делает свои продукты на React и AI-решения для среднего бизнеса, и через программу обучения растит к себе фронтендеров — с реальными задачами уже в первые месяцы. На эфире разберём, как джун попадает в команду и почему компания вкладывается в свой поток выпускников.

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

https://htmlacademy.ru/events/live-maxis
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥2👏2
Кекс вернулся в Скриптомск.

Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.»

Майский поток профессии «Фронтенд-разработчик» в мини-группе открыт. По случаю задержки — минус 35% от обычной цены. Считайте это извинением за то, что заставили работодателей ждать.

Десять месяцев, группа до десяти человек, наставник дважды в неделю. Путь от вёрстки до React и TypeScript. В программу бонусом включён практический курс по AI-агентам.

Записаться в Телеграме
Записаться через MAX
❤‍🔥22🔥22
HTML Academy
Кекс вернулся в Скриптомск. Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.» Майский…
На столе у Кекса с утра — папка с программой майского потока. Просим его пройтись по страницам.
«HTML и CSS, профессиональная вёрстка. Два с половиной месяца. Стартовый модуль, без него никуда».

Перелистывает.
«JavaScript. Здесь „Кекстаграм“ — учебный проект, сервис для загрузки и просмотра фотографий. Мой любимый».

Ещё страница.
«Архитектура клиентских приложений: ООП, MVP, REST API. Здесь начинается взрослая разработка».

«Дальше React и TypeScript. Финал».

Закрывает папку, тянется за второй — потоньше.
«Это бонусом — практический курс по AI-агентам. После того, что ИИ устроил с Кексоботом в январе, разбираться в этой теме теперь обязаны все. Тем, кто заходит с майского потока, мы курс просто включили в программу».

Каждую неделю в группе — два часовых занятия с наставником, нагрузка в среднем двенадцать часов. Скидка 35% действует до конца воскресенья.

Записаться в Телеграме
Записаться через MAX
3❤‍🔥2👍11
Добавляете фичу — и ломается то, что вчера работало. Часто причина не в багах, а в архитектуре: каждая типовая задача решается по-новому, поэтому код не складывается в систему.

На курсе «Паттерны проектирования» разбираем 25 паттернов в контексте JavaScript и фронтенда. Каждый — готовое решение для типовой ситуации: Adapter помогает работать с «кривым» API, Observer убирает ручную синхронизацию между компонентами, State приводит в порядок логику интерфейса.

После курса вы начнёте видеть код как систему — и брать готовый паттерн вместо того, чтобы каждый раз изобретать заново. #htmlacademy #levelup

Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42❤‍🔥1
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Накануне эфира Максим из Maxis попросил нейросетку сделать iframe-приложение для Битрикс24. Она сделала — и выложила весь бэкенд в открытый интернет.

Без авторизации, без проверки портала. Будущие конфиденциальные данные — по URL, заходи, забирай. Максим заметил, спросил «что это?». Нейросетка ответила: «А вы такой наблюдательный. Вы заметили недоработку моей компоненты».

Эту короткую историю он рассказал на эфире вчера — про то, почему директор IT-компании со своими AI-продуктами всё равно ищет джунов с базой. Без фундаментальных знаний такую дыру не заметишь, и никакой Cursor не поможет, если ты сам не можешь сформулировать проблему.

Час разговора — про найм в эпоху AI-агентов, программу с HTML Academy и пару историй с испытательного срока.

Программа | Смотреть в YT | Смотреть в VK
3❤‍🔥2🔥2
Media is too big
VIEW IN TELEGRAM
«Опишите работу своей мечты. Что вызывает у вас восторг в вашей нынешней работе?»


Вопросы на сессии у психолога или на собеседовании с проверкой на вайб-чек? Компаниям нужен тот, кто вписывается в культуру. Базовая проверка на culture fit всегда вызывает много споров и недовольств.

По вашему мнению, проверка на совместимость соискателя и работодателя — это определяющий фактор найма?
👍2🤯2🔥1😱1
HTML Academy
На столе у Кекса с утра — папка с программой майского потока. Просим его пройтись по страницам. «HTML и CSS, профессиональная вёрстка. Два с половиной месяца. Стартовый модуль, без него никуда». Перелистывает. «JavaScript. Здесь „Кекстаграм“ — учебный проект…
К субботе телефон в Академии не замолкает. Кекс достаёт папку с партнёрами — 42 компании: продуктовые команды, аутсорс, специализированная разработка. Все недавно справлялись про сроки потока.

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

Партнёры подписывают с Академией соглашение и ждут конкретных выпускников по графику. Майский поток ждут давно.

Скидка 35% действует до конца воскресенья. У Академии есть рассрочка с первым платежом через месяц.

Записаться в Телеграме
Записаться через MAX
❤‍🔥3221
Воскресенье. Кекс убирает папки и пьёт кофе.

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

Так выглядит обычная траектория майского потока: мини-группа десять человек, наставник дважды в неделю, после защиты — кадровый резерв и собеседование к одному из партнёров.

Сегодня последний день со скидкой 35%. С полуночи цена возвращается к обычной. Есть рассрочка с первым платежом через месяц.

Если давно собирались — сейчас удобный момент.

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

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

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

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

Пресеты для ESLint v10 от HTML Academy → https://github.com/htmlacademy/eslint-config-htmlacademy
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤‍🔥3🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥3❤‍🔥2👍1😱1
Регрессия проявилась после обновления, тесты её не ловят, в main за неделю — 40 коммитов от семи разработчиков. Перебирать вручную, делая git checkout на каждый, — потерянный день.

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

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥84🔥2👍1
HTML Academy
Утро вторника. Кекс пришёл в офис первым и сразу обошёл рабочие места. На местах все: миска, разработчики, дедлайны. Можно открывать неделю загадок.
Кастомный шрифт ещё качается, а текст уже должен быть виден. Какое значение font-display сначала покажет текст системным шрифтом, а затем заменит на кастомный — как только тот загрузится?
Anonymous Quiz
6%
block
14%
optional
80%
swap
❤‍🔥221👍1🔥1
Среда. Кекс занял пост на подоконнике и наблюдает: джун подключил кастомный шрифт через @font-face и хмурится из-за времени загрузки. Сейчас узнаем, что делать.

Пояснение ⬇️

У swap по спецификации очень короткий блок-период, а в реализации браузеров фолбэк показывается сразу при первой отрисовке. Когда кастомный шрифт прилетает, происходит подмена — это FOUT, flash of unstyled text. Со значением block блок-период по рекомендации около 3 секунд, и всё это время текст невидим. Так получается FOIT, flash of invisible text. Значение optional устроено иначе: короткий блок-период (около 100 мс по рекомендации), а swap-периода нет вовсе. Если шрифт не успел за этот блок, браузер останется на фолбэке до следующего захода на страницу. Полезно для медленных сетей — текст не подменяется после загрузки.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤‍🔥1🔥1
На ревью большого PR обсуждение тонет в комментариях про форматирование: переносы строк, висячие запятые, порядок импортов, который у каждого настроен по-своему. До архитектуры и логики дело может не дойти вообще.

Prettier забирает форматирование себе. Один раз настраиваете .prettierrc — он переписывает код по единым правилам при каждом запуске. npx prettier --write . приводит весь проект в порядок одной командой. В VS Code включается формат при сохранении, и вопрос снимается на уровне редактора. А --check в CI блокирует PR с неотформатированным кодом.

В статье — как подружить Prettier с ESLint без конфликтов правил. #js #tools

💥 Читать статью

Пресет для Prettier от HTML Academy → https://github.com/htmlacademy/prettier-config-htmlacademy
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤‍🔥22
Пояснение ⬇️

git reset --soft HEAD~1 сдвигает указатель текущей ветки на один коммит назад, индекс и рабочую директорию не трогает. Все изменения из снятого коммита остаются в индексе и готовы к новому git commit. Этот сценарий безопасен только до пуша — на общей ветке --soft потребует force-push и расстроит коллег. Флаг --hard тоже сдвинет указатель, но заодно приведёт индекс и рабочую директорию в состояние целевого коммита, и текущие изменения будут потеряны. Хотя снятые коммиты ещё около 90 дней доступны через git reflog. А git revert HEAD решает задачу иначе: создаёт новый коммит, который отменяет последний, оставляя оба в истории. Для уже запушенного коммита — именно этот вариант.
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2🤯1🤣1
Войти в разработку джуном стало ощутимо сложнее, чем пару лет назад. Команды всё чаще ждут, что разработчик уверенно работает с нейросетями. Для многих это уже базовое требование. Мы это часто слышали от работодателей в наших эфирах.

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

В профессии «Нейрофронтендер» фундамент идёт первым: HTML и CSS, JavaScript, архитектура клиентских приложений, React. Отдельный модуль по ИИ-агентам стоит в конце — когда уже есть чем оценивать ответы модели и куда их встраивать.

До 31 мая включительно на профессию действует скидка 67%.

Записаться в Телеграме
Записаться через MAX
❤‍🔥4🔥332
Frontend Mix × HTML Academy

Сегодня вечером наш Лёша садится за круглый стол — поговорить про ИИ во фронтенде. Зовём смотреть вместе.

Начало в 21:15 по Москве. Тема — как изменились требования к фронтендеру в 2026 году. Вопрос ребром: за что разработчику платят теперь, когда написание кода стало дешёвым, и куда сместилась ценность? И заодно — что массовое использование ИИ за год-два делает с кодовой базой и экспертизой команды.

Смотреть онлайн и бесплатно → https://events.yoomoney.ru/frontend-mix_2026

Вопросы к круглому столу пишите сюда — Лёша читает и ответит в комментариях. А кто уже на митапе — ловите нас вживую: круглый стол в финале, застать можно и до, и после.
Please open Telegram to view this post
VIEW IN TELEGRAM
😱5🔥21👍1