FrontEndDev

Отложенные и мгновенные подсказки на чистом HTML + CSS Вместо setTimeout и сложного шаринга состояния в JS можно сделать UX-тайминг tooltip’ов через popover="hint" и CSS: подсказка сначала появляется с задержкой для случайных проходов курсора, а затем — мгновенно при повторном наведении. https://master.dev/blog/delayed-then-instant-tooltips-with-html-css-alone/

Где прокачать фронтенд в магистратуре В ИТМО завершается набор на онлайн-магистратуру «Фронтенд-, бэкенд-разработка и ИИ-решения», созданную совместно с Яндекс Практикумом. Программа рассчитана на два года и подойдет и тем, кто только начинает путь в разработке, и действующим специалистам. В программе: - 9 треков под разный уровень и стек: от JavaScript, Python, Java и C++ до продвинутых направлений с асинхронностью, микросервисами, высокими нагрузками, Kafka, Spring Boot, NestJS и C++/Boost; - Нейросети как рабочий инструмент: на всех треках изучают промпт-инжиниринг и применение ИИ для генерации кода, тестов и документации, дебаггинга и других задач; - Отдельный трек по ИИ в разработке – проектирование LLM-систем, RAG-пайплайны, мультиагентные сети и внедрение AI-компонентов в продакшен; - Практика на реальных задачах партнеров программы и сервисов Яндекса. Соберете 10+ кейсов в портфолио и сможете работать над собственным проектом; Обучение проводиться онлайн и в вечернее время – так можно совмещать учебу с работой. Также сохраняются студенческие льготы и возможность отсрочки от армии. Выпускники получат диплом магистра ИТМО и диплом о профессиональной переподготовке от Яндекс Практикума. Посмотреть программу и условия поступления

µJS — лёгкая библиотека AJAX-навигации µJS ускоряет сайт без фреймворков: перехватывает клики по ссылкам и отправку форм, подгружает новую HTML-страницу в фоне и заменяет только изменившийся контент, без полной перезагрузки. Библиотека весит около 5KB gzipped, не требует сборки и работает с любым бэкендом — достаточно подключить один скрипт и вызвать mu.init(). https://mujs.org/

React Router v8: ленивые страницы и вложенные маршруты В React Router v8 пакеты объединены: react-router-dom больше нет, а ключевые API импортируются напрямую из react-router. Используйте lazy + Suspense для code-splitting по страницам, Routes/Route для матчинга ветки с ранжированием, HashRouter для удобной статики и wildcard-роут * для нормального 404. https://reactdevelopment.substack.com/p/react-router-v8-in-action-lazy-loading

Анимируем CSS border-image: градиентная рамка, которая рисуется при наведении Свойство border-image позволяет использовать картинку или градиент как рамку вместо обычных линий. Можно также анимировать border-image-slice и управлять повторением через border-image-repeat: round. https://css-tricks.com/animating-css-border-image/

3 хорошие привычки начинающего фронтендера Начните думать о пользователе: увеличивайте кликабельные области. Правильно подбирайте type и inputmode для форм, чтобы браузер показывал ожидаемую виртуальную клавиатуру. Относитесь к alt осознанно: для декоративных изображений оставляйте alt="", чтобы скринридеры не озвучивали лишний шум. https://habr.com/ru/companies/ruvds/articles/1066724/

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

Монолит больше не приговор: строим быстрые и гибкие микрофронтенды на ES-модулях Монолитное фронтенд-приложение можно разрезать на микрофронты, собирая их как нативные ES-модули: меньше конфликтов зависимостей, быстрее загрузка и естественный lazy loading через import(). Для интеграции нужен чёткий контракт между хостом и микрофронтом (и единый механизм монтирования в Shadow DOM с обработкой ошибок/состояний. https://habr.com/ru/companies/sberbank/articles/1067496

5 CSS-свойств, которые прокачают дизайн текста Показывайте фон внутри букв через background-clip: text, управляйте вертикальным выравниванием инлайновых элементов через vertical-align, добавляйте выразительность letter-spacing и еще несколько свойств и кейсов их применения — по ссылке. https://master.dev/blog/typographic-css-tricks/

Фронтенд не умер — просто AI уже копает за нас лопатой AI уже берёт на себя рутину: помогает делать черновики, тесты и фикстуры, ускоряет миграции и онбординг, а также может расследовать инциденты и собирать десятки связанных PR. Главный риск не в плохом коде, а в скорости: растут объём ревью, число переделок и вероятность уверенно закрепить неверное решение, поэтому нужны планы, этапная проверка и ответственность инженера за результат. https://habr.com/ru/companies/avito/articles/1066228/

Переходы View Transitions: важно не сделать интерфейс некликабельным Если не настроить View Transitions, псевдоэлемент ::view-transition может перекрыть весь вьюпорт на время анимации и блокировать клики по интерактивным элементам. Решение — отключить участие :root в снапшоте и убрать перехват событий у ::view-transition. Подробнее — в статье https://master.dev/blog/view-transitions-careful-not-to-make-stuff-unclickable/

Конец адаптивных изображений. Атрибут sizes для <img> раньше был самым сложным: его синтаксис приходилось постоянно держать в актуальном состоянии вместе с CSS. Идея в том, чтобы перейти к Client Hints: браузер подсказывает серверу нужный размер, сервер присылает подходящее изображение, а разметка сводится к простому <img src="" alt=""> (плюс не забыть про lazy loading). https://master.dev/blog/ending-responsive-images/

Опенсорсная Весёлая Ферма: поднимаем preview‑окружения без боли. Пример построения системы сборок. Preview‑окружения для каждого пул‑реквеста перестают быть ручной магией: код из ветки собирается, запускается изолированный инстанс и ему выдаётся уникальный URL, а проксирование трафика берёт на себя nginx/Ingress. https://habr.com/ru/companies/yandex/articles/1064394/

🔴 Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг 6 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Алексею Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Обфускация JavaScript в эпоху ИИ: всё ещё имеет смысл? Обфускация не делает фронтенд секретным: браузерный код всё равно можно извлечь, но становится заметно сложнее читать, копировать и безопасно модифицировать. ИИ ускоряет понимание и может собирать правдоподобную чистую версию. Используйте обфускацию только как часть защиты, а реальные ключи, авторизацию и валидацию критичных правил держите на сервере. https://www.jstools.space/blog/javascript-obfuscation-ai/

Как верстали 15 лет назад Вырезки из книги по верстке 2004 года: забавные техники, которые были актуальны в то время. https://habr.com/ru/companies/ruvds/articles/1060630/

Лучшие состояния загрузки — это когда их нет. Вместо спиннеров и скелетонов прокачивайте стратегию preloading: заранее подгружайте данные и готовьте переходы между маршрутами, чтобы страница ощущалась как загруженная сразу. Route transitions не убирают загрузку полностью, но помогают перенести её на уровень приложения, делая UX стабильнее и предсказуемее в SPA. https://master.dev/blog/the-best-loading-states-are-no-loading-states/

Анимация In-N-Out с sibling-index() Фишка в CSS-функции sibling-index(): при добавлении/удалении элементов индекс пересчитывается, а значит меняются значения translate, и включённый transition автоматически превращает перестроение DOM в плавную анимацию. Отлично подходит для аватаров, списков и сеток. https://master.dev/blog/in-n-out-animation-using-sibling-index/

Masonry с анимацией в CSS display: grid уже умеет раскладку в стиле masonry через grid-lanes. Чтобы получить плавную перестановку без JS-логики, анимируют не сами карточки, а их внутренний слой: он привязывается якорями и двигается за счёт inset: anchor(inside) с transition. https://master.dev/blog/masonry-with-animation-in-css/

«Вы не знаете CSS»: вопросы о CSS с ответами, версия 2026 года Проверка знаний CSS в формате вопросов: разбор специфичности с :has(), логики :focus-within, работы rem, inline-grid и нюансов применения margin при разных display и многое другое. https://habr.com/ru/companies/ruvds/articles/1057086/