Frontend Головного Мозга

🔍 Убрал повтор в скринридере и сломал кнопку Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку. VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет. JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной. Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button». Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт. В статье есть и вариант, где имя и сочетание клавиш разведены по разным span. 👉 @seniorFront @frontend_mind

🌈 Свечение внутри элемента, но из любого фона Подсветить элемент изнутри проще всего через box-shadow с inset. Но такое свечение одноцветное. А если хочется радужный conic-gradient() или картинку? Решение из статьи: накрыть элемент псевдоэлементом ::after с нужным фоном и маской оставить видимыми только края. Середина прозрачна, и сам элемент под ней виден. Маска для левого и правого краёв (black в маске значит «видно»): --inset: 30px; mask-image: linear-gradient( to right, black 0%, transparent var(--inset), transparent calc(100% - var(--inset)), black 100% ); Вторая такая же маска с to bottom берёт верх и низ, а mask-composite: add объединяет обе полосы в рамку. Накладка стоит на position: absolute и inset: 0, поэтому самому элементу нужен position: relative. В статье есть демо, где оба вида свечения вспыхивают на случайных элементах. 👉 @seniorFront @frontend_mind

🚀 Два атрибута у картинки, и страница перестаёт прыгать Пока картинка грузится, тег img занимает на странице нулевой размер. Когда файл приходит, блок раздвигается, и текст под ним резко уезжает вниз. Браузер заново пересчитывает раскладку, а читатель теряет строку. Лечится это атрибутами width и height у img, например width=800 height=600. Браузер ещё до загрузки файла знает пропорции и сразу оставляет под картинку место. В замере автора это сэкономило около 12% процессорного времени. Одна тонкость: в CSS картинке нужно задать width: 100% и height: auto. Тогда ширина подстроится под контейнер, а высота посчитается по пропорциям. Без height: auto изображения растянутся. А ещё в статье объяснено, почему padding-bottom и aspect-ratio автор считает худшими вариантами и как самому замерить разницу в профайлере. 👉 @seniorFront @frontend_mind

Если вы занимаетесь ручным тестированием и хотите перейти к автоматизации, отдельных уроков по JavaScript и Playwright может быть недостаточно. Чтобы уверенно писать автотесты, важно понимать, как устроен весь процесс: от проверки API и интерфейса до запуска тестов в CI/CD. Курс «Автоматизатор тестирования на JavaScript» поможет выстроить эту систему на практике. Вы научитесь писать автотесты для API и UI, работать с Jest и Playwright, проектировать тестовый фреймворк и запускать проверки с помощью Docker и GitHub CI. Обучение включает живые занятия, домашние задания и обратную связь от преподавателей-практиков. В итоговом проекте вы создадите собственный тестовый фреймворк, разработаете не менее 10 функциональных автотестов и настроите отчёты о результатах. Старт курса — 30 сентября. Пройдите вступительное тестирование и узнайте условия обучения: https://vk.cc/d2bLJo Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

📏 Высота блока в строках, а не в пикселях В CSS есть единица lh: 1lh равен вычисленному line-height, то есть высоте одной строки текста. Она давно существует, но о её применении рассказывают редко. Пример: список надо обрезать по пяти строкам и плавно растворить низ. С max-height: 120px стоит увеличить шрифт, и всё ломается: строки растут, а пиксели нет. С lh размер считается в строках: .list { max-height: 5lh; mask-image: linear-gradient( to bottom, #000, #000 calc(100% - 1lh), transparent 100% ); } Теперь при любом шрифте видно пять строк, а последняя плавно тает. Оговорка: lh берётся от line-height самого элемента. Чтобы расчёт на родителе совпал со строками детей, задайте шрифт на родителе, а детям оставьте наследование. В статье ещё отступы между абзацами, «тетрадные» линейки, картинки с float точно по строкам и иконки по размеру текста. 👉 @seniorFront @frontend_mind

🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы. Эксперты Podlodka Frontend Crew собралионлайн-конференцию «Фронтенд с AI» (https://podlodka.io/fecrew?utm_campaign=early_bird_frontend_crew_6&utm_source=telegram&utm_medium=paid&utm_content=seniorFront), чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни. 💬 Какие темы ждут участников сезона с 5 по 9 октября: 🔴 AI Coding и подготовка репозитория к работе с AI 🔴 Spec Kit для разработки интерфейсов 🔴 Агентная разработка в закрытом контуре 🔴 WebMCP как дополнительный harness 🔴 AI-дизайн и его место в процессе разработки. Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами. Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону. Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников. 👉 Билеты на сезон (https://podlodka.io/fecrew?utm_campaign=early_bird_frontend_crew_6&utm_source=telegram&utm_medium=paid&utm_content=seniorFront) @frontend_mind

🎚 «Больше или равно» в CSS без единого if Новая CSS-функция progress(значение, от, до) показывает, где значение лежит в диапазоне: дробь от 0 до 1. Всё, что за границами, по умолчанию обрезается до 0 или 1. Отсюда трюк. В диапазоне от 0 до порога ровно 1 выйдет, только когда значение достигло порога. Это готовый флаг. Например, бейджи за фильмы: пороги 3, 6 и 9 в --badgeLevel, число фильмов в --movieCount: .badge { --isLevelUnlocked: progress(var(--movieCount), 0, var(--badgeLevel)); } При 2 фильмах из 6 получится 0.33, при 6 или 10 будет 1. Container style query (проверка значения переменной у родителя) показывает бейдж при style(--isLevelUnlocked: 1). Перебирать уровни в JS не нужно. Учтите, что флаг регистрируют через @property с типом , чтобы style query могла проверить его значение. Приём годится для любого сравнения с порогом, не только для бейджей. 👉 @seniorFront @frontend_mind

🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00 ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться. Как это будет: 📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу; 📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы; 📂 В конце можно будет задать любой вопрос Александру. Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

eBPF: рентгеновское зрение для production Сервис замедлился, соединения обрываются, а привычные показатели указывают только на симптом. Чтобы найти настоящую причину, иногда нужно увидеть, что происходит глубже — на уровне ядра Linux. 23 сентября в 20:00 на открытом уроке курса «DevOps практики и инструменты» познакомитесь с eBPF — технологией, которая помогает исследовать сетевые события, производительность и безопасность работающей системы. На демонстрации вы увидите, как Cilium Hubble показывает сетевые взаимодействия и помогает находить проблемы с трафиком. С помощью Tetragon разберёте обнаружение подозрительной активности на уровне ядра. Также рассмотрите диагностику узких мест без остановки сервисов. Преподаватель объяснит архитектуру eBPF простыми словами — как программы безопасно запускаются в ядре, какие данные можно получать и почему этот подход расширяет возможности традиционного мониторинга. Вы поймёте, для каких задач eBPF действительно полезен, где он дополняет существующие средства наблюдаемости и когда его внедрение будет избыточным. 👉 Зарегистрируйтесь: https://vk.cc/d1KWSE Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!  [+ разбор 50 сложных вопросов в подарок ] 17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика! Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер, Как это будет: 📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе 📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью 📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы И ты можешь посмотреть его бесплатно 🔥 Только завтра, в прямом эфире! 🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥 Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot Реклама. О рекламодателе.

Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в американскую компанию 👆Это недавние результаты участников нашего комьюнити.

Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум!

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Как я прохожу собесы: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFHi2vpq ИП Галактионов Тихон Витальевич, ИНН 771618975809

Почему AI всё ещё плохо верстает? Потому что «сверстай по этой картинке» и «работай в рамках существующего проекта» — две совершенно разные задачи.  О том, как решать вторую, расскажет Эмиль Янгиров из Одноклассников на VK Frontend Meetup SPB 30 сентября в Санкт-Петербурге. На встрече разберут ещё две задачи: • как МАХ пришёл к собственной архитектуре для веб-анимации стикеров и почему Lottie оказалось недостаточно; • как в Почте Mail автоматизировали запуск 300 промо в год. Митап бесплатный и полностью офлайн. 📅 19:00, 30 сентября Регистрация

Как убрать «висячие» строки во Flexbox: flex-wrap: balance и flex-line-count Каждый фронтендер сталкивался с проблемой: настраиваешь flex-wrap: wrap, но при сужении экрана на последнюю строку перескакивает ровно один элемент. Раньше это костылили через медиазапросы. Теперь в Chrome есть нативные свойства flex-wrap: balance и flex-line-count. Автобалансировка: flex-wrap: balance Свойство распределяет элементы по строкам равномерно, убирая одиноких «сирот» в конце: CSS .channels { display: flex; flex-wrap: balance; justify-content: center; gap: 1rem; } Никаких сложных вычислений или JS — браузер всё делает сам. Контроль строк через flex-line-count Оно задает минимальное количество строк. Даже если места хватает для одного ряда, элементы принудительно распределятся по заданному числу: CSS .nav-list { display: flex; flex-wrap: balance; flex-line-count: 2; /* Минимум 2 строки */ gap: 0.5rem; } Подробнее в статье👇 👉 @frontend_mind

Настройка GitLab Runners Сборка занимает всё больше времени, задания ждут свободного исполнителя, а Docker-образы загружаются при каждом запуске. Часто проблема не в GitLab CI, а в настройке Runner, кэширования и самого конвейера. 10 сентября в 20:00 на открытом уроке курса «DevOps практики и инструменты» разберёте, как настроить собственный GitLab Runner и ускорить сборку проекта. На практическом примере вы пройдёте путь от установки Runner и подключения проекта до настройки файла .gitlab-ci.yml. Узнаете, как использовать кэш и артефакты, сократить время загрузки Docker-образов и повторно использовать уже загруженные слои. Отдельно рассмотрите исполнители shell, docker и docker-machine — поймёте, чем они отличаются и как выбрать подходящий вариант под инфраструктуру и нагрузку. Также разберёте ошибки, из-за которых задания выполняются медленно, нестабильно или потребляют больше ресурсов, чем требуется. После урока у вас будет понятный набор приёмов для настройки и проверки GitLab Runner, который можно применить в собственном проекте. 👉 Записаться: https://vk.cc/d13f03 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Вайбкодим «Полный путь разработки AI-агентов: от MCP до Agentic RAG» (https://stepik.org/a/297687/pay?promo=58afc2d2b3129c9f) Образовательная программа на Stepik по разработке современных AI-агентов. Начинаем с Model Context Protocol: создаём MCP-серверы, подключаем инструменты и внешние API, а затем переходим к разработке Agentic RAG-систем с памятью, рассуждением, поиском знаний и оценкой качества. • Model Context Protocol и MCP-серверы • LangChain, LangGraph, LlamaIndex • API, инструменты, ресурсы и промпты • Классический RAG → Agentic RAG • ReAct, память и планирование • Графы знаний и свои инструменты • Трассировка и подготовка к production Успей, скидка 20% действует 48 часов ↗️ Начать обучение на Stepik (https://stepik.org/a/297687/pay?promo=58afc2d2b3129c9f) @frontend_mind

Почему Frontend-разработчики уходят в курьеры? В последнее время всё чаще вижу одну и ту же картину: Frontend-разработчик отправляет сотню откликов. Потом ещё сотню. А в ответ пара отписок «мы с вами свяжемся», отказы и тишина Раньше я думал, что проблема почти всегда в резюме или скиллах. Но чем глубже копаюсь в рынке, тем сильнее понимаю, что рынок жёстко перегрет и даже сильным ребятам приходится бороться за каждую вакансию При этом многие продолжают долбиться в одну и ту же стену. Хотя рядом есть направления, где их опыт уже ценится, а конкуренция в разы ниже И нет, речь не про «забудь всё и учись заново». Наоборот, знания JavaScript и опыт разработки там становятся сильным преимуществом Записал бесплатный видеоразбор, где показываю, на какие направления имеет смысл смотреть Frontend-разработчику, сколько обычно занимает переход, на какие деньги реально выйти и почему там банально проще найти работу Забирай видео по ссылке👇 [▶️ Смотреть видеоразбор] Реклама. О рекламодателе.

🔴В 2025 году Россияне заработали 5,3 млрд рублей на арбитраже криптовалют (https://t.me/+xOV8UHLivrsxYjM6) По данным Минфин 32% граждан покинули своё место работы, поскольку в среднем уже в первый месяц тут можно зарабатывать от 140 000 рублей, а через 2-3 месяца с легкостью выйти на семизначные числа. Самое смешное, что лишь 8% россиян что-то слышали об этой профессии, хотя все инструкции бесплатно лежат на канале Арбитраж Криптовалют (https://t.me/+xOV8UHLivrsxYjM6) Там объясняют, как имея телефон и доступ в интернет, заработать свои первые $2000. Причём разжёвывают так доступно, что поймёт даже ребенок. Кстати, на канале сегодня вышла новая рабочая связка! Быстрее вступайте, пока это бесплатно — https://t.me/+xOV8UHLivrsxYjM6 @frontend_mind

В нашем канале много ценного для разработчиков по подготовке к собесам👇

Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!

Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 https://t.me/frontend_punks Реклама, erid: 2W5zFJa1J9X ИП Галактионов Тихон Витальевич, ИНН 771618975809

Уже очевидно, что ВАЙБКОДИНГ — главный навык ближайших лет Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами. И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную. Начать с нуля поможет канал Вайб-кодинг (https://t.me/+HShZrZXwQss2Zjgy). Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы. Подписывайтесь, нас уже 50 тысяч: @vibecoding_tg @frontend_mind