Forwarded from CSS Боль
This media is not supported in your browser
VIEW IN TELEGRAM
Реактивный CSS всё ближе
Свершилось! В 151 Firefox завезли стилевые контейнерные запросы. Это значит, что сложная клиентская логика на CSS теперь доступна во всех основных браузерах. И доклады про реактивный CSS становятся всё более актуальными
Есть и ещё одна хорошая новость. За флагом добавили range синтаксис для сравнений:
То есть Firefox в вопросах клиентской логики семимильными шагами догоняет Chrome. Для полной картины осталось добавить только
Детали релиза:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/151
Свершилось! В 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❤🔥2 2
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Сегодня в 12:00 (MSK) — эфир с директором Maxis. Команда делает свои продукты на React и AI-решения для среднего бизнеса, и через программу обучения растит к себе фронтендеров — с реальными задачами уже в первые месяцы. На эфире разберём, как джун попадает в команду и почему компания вкладывается в свой поток выпускников.
💯 Регистрация в первой сотне — последний шанс на розыгрыш места на программе. Имя победителя назовём в финале эфира.
https://htmlacademy.ru/events/live-maxis
https://htmlacademy.ru/events/live-maxis
Please open Telegram to view this post
VIEW IN TELEGRAM
Кекс вернулся в Скриптомск.
Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.»
Майский поток профессии «Фронтенд-разработчик» в мини-группе открыт. По случаю задержки — минус 35% от обычной цены. Считайте это извинением за то, что заставили работодателей ждать.
Десять месяцев, группа до десяти человек, наставник дважды в неделю. Путь от вёрстки до React и TypeScript. В программу бонусом включён практический курс по AI-агентам.
Записаться в Телеграме
Записаться через MAX
Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.»
Майский поток профессии «Фронтенд-разработчик» в мини-группе открыт. По случаю задержки — минус 35% от обычной цены. Считайте это извинением за то, что заставили работодателей ждать.
Десять месяцев, группа до десяти человек, наставник дважды в неделю. Путь от вёрстки до React и TypeScript. В программу бонусом включён практический курс по AI-агентам.
Записаться в Телеграме
Записаться через MAX
❤🔥2❤2🔥2 2
HTML Academy
Кекс вернулся в Скриптомск. Дачный сезон официально закрылся 10 мая, и две недели Кекс приходил в форму. Сегодня надел пиджак, открыл дверь в Академию — а там вся створка облеплена стикерами. «Когда поток?» «Нужны десять человек.» «Перезвоните уже.» Майский…
На столе у Кекса с утра — папка с программой майского потока. Просим его пройтись по страницам.
Перелистывает.
Ещё страница.
Закрывает папку, тянется за второй — потоньше.
Каждую неделю в группе — два часовых занятия с наставником, нагрузка в среднем двенадцать часов. Скидка 35% действует до конца воскресенья.
Записаться в Телеграме
Записаться через MAX
«HTML и CSS, профессиональная вёрстка. Два с половиной месяца. Стартовый модуль, без него никуда».
Перелистывает.
«JavaScript. Здесь „Кекстаграм“ — учебный проект, сервис для загрузки и просмотра фотографий. Мой любимый».
Ещё страница.
«Архитектура клиентских приложений: ООП, MVP, REST API. Здесь начинается взрослая разработка».
«Дальше React и TypeScript. Финал».
Закрывает папку, тянется за второй — потоньше.
«Это бонусом — практический курс по AI-агентам. После того, что ИИ устроил с Кексоботом в январе, разбираться в этой теме теперь обязаны все. Тем, кто заходит с майского потока, мы курс просто включили в программу».
Каждую неделю в группе — два часовых занятия с наставником, нагрузка в среднем двенадцать часов. Скидка 35% действует до конца воскресенья.
Записаться в Телеграме
Записаться через MAX
⚡3❤🔥2👍1 1
Forwarded from Как стать мидлом
Добавляете фичу — и ломается то, что вчера работало. Часто причина не в багах, а в архитектуре: каждая типовая задача решается по-новому, поэтому код не складывается в систему.
На курсе «Паттерны проектирования» разбираем 25 паттернов в контексте JavaScript и фронтенда. Каждый — готовое решение для типовой ситуации:
После курса вы начнёте видеть код как систему — и брать готовый паттерн вместо того, чтобы каждый раз изобретать заново. #htmlacademy #levelup
⭐ Записаться на курс
На курсе «Паттерны проектирования» разбираем 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
🔥4 2❤🔥1
HTML Academy
Зачем команде со своими AI-сервисами джун-фронтендер Maxis делает свои продукты для среднего бизнеса, в том числе с AI внутри. Сейчас компания запускает совместную программу обучения, чтобы готовить себе джунов-фронтендеров. В четверг 21 мая в 12:00 (MSK)…
Накануне эфира Максим из Maxis попросил нейросетку сделать iframe-приложение для Битрикс24. Она сделала — и выложила весь бэкенд в открытый интернет.
Без авторизации, без проверки портала. Будущие конфиденциальные данные — по URL, заходи, забирай. Максим заметил, спросил «что это?». Нейросетка ответила: «А вы такой наблюдательный. Вы заметили недоработку моей компоненты».
Эту короткую историю он рассказал на эфире вчера — про то, почему директор IT-компании со своими AI-продуктами всё равно ищет джунов с базой. Без фундаментальных знаний такую дыру не заметишь, и никакой Cursor не поможет, если ты сам не можешь сформулировать проблему.
Час разговора — про найм в эпоху AI-агентов, программу с HTML Academy и пару историй с испытательного срока.
Программа | Смотреть в YT | Смотреть в VK
Без авторизации, без проверки портала. Будущие конфиденциальные данные — по URL, заходи, забирай. Максим заметил, спросил «что это?». Нейросетка ответила: «А вы такой наблюдательный. Вы заметили недоработку моей компоненты».
Эту короткую историю он рассказал на эфире вчера — про то, почему директор IT-компании со своими AI-продуктами всё равно ищет джунов с базой. Без фундаментальных знаний такую дыру не заметишь, и никакой Cursor не поможет, если ты сам не можешь сформулировать проблему.
Час разговора — про найм в эпоху AI-агентов, программу с HTML Academy и пару историй с испытательного срока.
Программа | Смотреть в YT | Смотреть в VK
Media is too big
VIEW IN TELEGRAM
«Опишите работу своей мечты. Что вызывает у вас восторг в вашей нынешней работе?»
Вопросы на сессии у психолога или на собеседовании с проверкой на вайб-чек? Компаниям нужен тот, кто вписывается в культуру. Базовая проверка на culture fit всегда вызывает много споров и недовольств.
По вашему мнению, проверка на совместимость соискателя и работодателя — это определяющий фактор найма?
👍2🤯2🔥1😱1
HTML Academy
На столе у Кекса с утра — папка с программой майского потока. Просим его пройтись по страницам. «HTML и CSS, профессиональная вёрстка. Два с половиной месяца. Стартовый модуль, без него никуда». Перелистывает. «JavaScript. Здесь „Кекстаграм“ — учебный проект…
К субботе телефон в Академии не замолкает. Кекс достаёт папку с партнёрами — 42 компании: продуктовые команды, аутсорс, специализированная разработка. Все недавно справлялись про сроки потока.
Кадровый резерв устроен так: после защиты выпускник попадает в пул, из которого партнёры берут на собеседование. Чтобы попасть в пул, надо пройти грейдирование — финальный проект, который защищается без помощи наставника, по тем же критериям, что использовались на курсе.
Партнёры подписывают с Академией соглашение и ждут конкретных выпускников по графику. Майский поток ждут давно.
Скидка 35% действует до конца воскресенья. У Академии есть рассрочка с первым платежом через месяц.
Записаться в Телеграме
Записаться через MAX
Кадровый резерв устроен так: после защиты выпускник попадает в пул, из которого партнёры берут на собеседование. Чтобы попасть в пул, надо пройти грейдирование — финальный проект, который защищается без помощи наставника, по тем же критериям, что использовались на курсе.
Партнёры подписывают с Академией соглашение и ждут конкретных выпускников по графику. Майский поток ждут давно.
Скидка 35% действует до конца воскресенья. У Академии есть рассрочка с первым платежом через месяц.
Записаться в Телеграме
Записаться через MAX
❤🔥3⚡2 2❤1
Воскресенье. Кекс убирает папки и пьёт кофе.
Один из недавних выпускников рассказывал, как на третьем модуле, на архитектуре клиентских приложений, неделю не мог сдать проект — наставник дважды разворачивал на ревью. На третий заход прошёл, защитился, через два месяца после грейдирования вышел в продуктовую команду в Петербурге. Сейчас работает там фронтендером.
Так выглядит обычная траектория майского потока: мини-группа десять человек, наставник дважды в неделю, после защиты — кадровый резерв и собеседование к одному из партнёров.
Сегодня последний день со скидкой 35%. С полуночи цена возвращается к обычной. Есть рассрочка с первым платежом через месяц.
Если давно собирались — сейчас удобный момент.
Записаться в Телеграме
Записаться через MAX
Один из недавних выпускников рассказывал, как на третьем модуле, на архитектуре клиентских приложений, неделю не мог сдать проект — наставник дважды разворачивал на ревью. На третий заход прошёл, защитился, через два месяца после грейдирования вышел в продуктовую команду в Петербурге. Сейчас работает там фронтендером.
Так выглядит обычная траектория майского потока: мини-группа десять человек, наставник дважды в неделю, после защиты — кадровый резерв и собеседование к одному из партнёров.
Сегодня последний день со скидкой 35%. С полуночи цена возвращается к обычной. Есть рассрочка с первым платежом через месяц.
Если давно собирались — сейчас удобный момент.
Записаться в Телеграме
Записаться через MAX
❤🔥4⚡2 2😱1
ESLint — статический анализатор: разбирает код в AST и проверяет по правилам, ничего не запуская. Поэтому ловит то, что трудно увидеть на ревью — теневое имя в замыкании, забытый
Часть найденного линтер чинит автоматически — с флагом
В новой статье — как поставить ESLint, что делает
🔑 Читать статью
Пресеты для ESLint v10 от HTML Academy → https://github.com/htmlacademy/eslint-config-htmlacademy
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
Регрессия проявилась после обновления, тесты её не ловят, в main за неделю — 40 коммитов от семи разработчиков. Перебирать вручную, делая
Если поведение покрыто тестом — можно вообще ничего не нажимать.
✍ ️ Читать статью
git checkout на каждый, — потерянный день.git bisect сводит это к бинарному поиску по истории. Помечаете один коммит рабочим, второй сломанным. Git сам переключается на середину диапазона и спрашивает: «Здесь работает?» На 40 коммитов хватает 6 шагов, на 800 — 10.Если поведение покрыто тестом — можно вообще ничего не нажимать.
git bisect run npm test проходит весь путь сам и возвращает хеш виноватого коммита. В статье — пошаговый разбор с командами и интерактивная симуляция поиска. #tools #gitPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥8 4🔥2👍1
HTML Academy
Утро вторника. Кекс пришёл в офис первым и сразу обошёл рабочие места. На местах все: миска, разработчики, дедлайны. Можно открывать неделю загадок.
Кастомный шрифт ещё качается, а текст уже должен быть виден. Какое значение font-display сначала покажет текст системным шрифтом, а затем заменит на кастомный — как только тот загрузится?
Anonymous Quiz
6%
block
14%
optional
80%
swap
❤🔥2 2❤1👍1🔥1
Среда. Кекс занял пост на подоконнике и наблюдает: джун подключил кастомный шрифт через
Пояснение⬇️
У swap по спецификации очень короткий блок-период, а в реализации браузеров фолбэк показывается сразу при первой отрисовке. Когда кастомный шрифт прилетает, происходит подмена — это FOUT, flash of unstyled text. Со значением block блок-период по рекомендации около 3 секунд, и всё это время текст невидим. Так получается FOIT, flash of invisible text. Значение optional устроено иначе: короткий блок-период (около 100 мс по рекомендации), а swap-периода нет вовсе. Если шрифт не успел за этот блок, браузер останется на фолбэке до следующего захода на страницу. Полезно для медленных сетей — текст не подменяется после загрузки.
@font-face и хмурится из-за времени загрузки. Сейчас узнаем, что делать.Пояснение
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤🔥1🔥1
На ревью большого PR обсуждение тонет в комментариях про форматирование: переносы строк, висячие запятые, порядок импортов, который у каждого настроен по-своему. До архитектуры и логики дело может не дойти вообще.
Prettier забирает форматирование себе. Один раз настраиваете
В статье — как подружить Prettier с ESLint без конфликтов правил. #js #tools
💥 Читать статью
Пресет для Prettier от HTML Academy → https://github.com/htmlacademy/prettier-config-htmlacademy
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❤🔥2 2
HTML Academy
Кастомный шрифт ещё качается, а текст уже должен быть виден. Какое значение font-display сначала покажет текст системным шрифтом, а затем заменит на кастомный — как только тот загрузится?
Какая команда подойдёт?
Anonymous Poll
8%
git reset --hard HEAD~1
69%
git reset --soft HEAD~1
27%
git revert HEAD
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤🔥2 2❤1
Пояснение ⬇️
сдвигает указатель текущей ветки на один коммит назад, индекс и рабочую директорию не трогает. Все изменения из снятого коммита остаются в индексе и готовы к новому . Этот сценарий безопасен только до пуша — на общей ветке потребует force-push и расстроит коллег. Флаг тоже сдвинет указатель, но заодно приведёт индекс и рабочую директорию в состояние целевого коммита, и текущие изменения будут потеряны. Хотя снятые коммиты ещё около 90 дней доступны через . А решает задачу иначе: создаёт новый коммит, который отменяет последний, оставляя оба в истории. Для уже запушенного коммита — именно этот вариант.
git reset --soft HEAD~1git commit--soft--hardgit refloggit revert HEADPlease open Telegram to view this post
VIEW IN TELEGRAM
⚡2👍2🤯1🤣1
Войти в разработку джуном стало ощутимо сложнее, чем пару лет назад. Команды всё чаще ждут, что разработчик уверенно работает с нейросетями. Для многих это уже базовое требование. Мы это часто слышали от работодателей в наших эфирах.
Но есть нюанс. Нейросети регулярно выдают правдоподобный код с ошибками, и чтобы их поймать, нужно понимать, что происходит под капотом: почему компонент ререндерится лишний раз и за что на самом деле отвечает замыкание. Без этой базы ИИ ускоряет накопление ошибок, которые всплывут на ревью.
В профессии «Нейрофронтендер» фундамент идёт первым: HTML и CSS, JavaScript, архитектура клиентских приложений, React. Отдельный модуль по ИИ-агентам стоит в конце — когда уже есть чем оценивать ответы модели и куда их встраивать.
До 31 мая включительно на профессию действует скидка 67%.
Записаться в Телеграме
Записаться через MAX
Но есть нюанс. Нейросети регулярно выдают правдоподобный код с ошибками, и чтобы их поймать, нужно понимать, что происходит под капотом: почему компонент ререндерится лишний раз и за что на самом деле отвечает замыкание. Без этой базы ИИ ускоряет накопление ошибок, которые всплывут на ревью.
В профессии «Нейрофронтендер» фундамент идёт первым: HTML и CSS, JavaScript, архитектура клиентских приложений, React. Отдельный модуль по ИИ-агентам стоит в конце — когда уже есть чем оценивать ответы модели и куда их встраивать.
До 31 мая включительно на профессию действует скидка 67%.
Записаться в Телеграме
Записаться через MAX
❤🔥4🔥3 3❤2
Frontend Mix × HTML Academy
Сегодня вечером наш Лёша садится за круглый стол — поговорить про ИИ во фронтенде. Зовём смотреть вместе.
Начало в 21:15 по Москве. Тема — как изменились требования к фронтендеру в 2026 году. Вопрос ребром: за что разработчику платят теперь, когда написание кода стало дешёвым, и куда сместилась ценность? И заодно — что массовое использование ИИ за год-два делает с кодовой базой и экспертизой команды.
⌛ Смотреть онлайн и бесплатно → https://events.yoomoney.ru/frontend-mix_2026
Вопросы к круглому столу пишите сюда — Лёша читает и ответит в комментариях. А кто уже на митапе — ловите нас вживую: круглый стол в финале, застать можно и до, и после.
Сегодня вечером наш Лёша садится за круглый стол — поговорить про ИИ во фронтенде. Зовём смотреть вместе.
Начало в 21:15 по Москве. Тема — как изменились требования к фронтендеру в 2026 году. Вопрос ребром: за что разработчику платят теперь, когда написание кода стало дешёвым, и куда сместилась ценность? И заодно — что массовое использование ИИ за год-два делает с кодовой базой и экспертизой команды.
Вопросы к круглому столу пишите сюда — Лёша читает и ответит в комментариях. А кто уже на митапе — ловите нас вживую: круглый стол в финале, застать можно и до, и после.
Please open Telegram to view this post
VIEW IN TELEGRAM
😱5🔥2❤1👍1