FrontEndDev

Ховер близости в CSS для сетки без JavaScript Показываем эффект hover proximity: при наведении на элемент в CSS grid, элемент масштабируется и также стили применяются к соседним ячейкам с учетом их координат. Реализация опирается на современные возможности CSS, включая view-timeline, кастомные свойства и условное применение стилей, сохраняя отзывчивость сетки. https://blog.master.dev/hover-proximity-using-modern-css/

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 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: 2W5zFG1gAnM ИП Галактионов Тихон Витальевич, ИНН 771618975809

⚡️⚡️HolyjS снова собирает JS-разработчиков. Уже 10-ый год подряд! Уже десять лет мы вместе с JS-сообществом следим за тем, как меняется экосистема, разбираемся в новых технологиях и собираем инженеров, которым интересно копать глубже и смотреть на разработку с разных ракурсов. 🎇В программе нового сезона — глубокие технические доклады про язык и его экосистему, производительность, архитектуру, Node.js, фреймворки и инструменты разработки. И, конечно, не будем делать вид, что ИИ не существует: поговорим о том, как его уже сегодня применяют во фронтенде и какие инженерные задачи он помогает решать на практике. Лучший способ отметить десятилетие HolyJS — сделать еще одну сильную техническую конференцию. Поэтому главное, как всегда, — программа. Но без юбилейных сюрпризов тоже не обойдется: готовим несколько ностальгических активностей, чтобы вместе вспомнить самые яркие моменты HolyJS за эти годы. 🗓 23–24 октября HolyJS пройдет в Санкт-Петербурге и онлайн. Программа постепенно пополняется новыми докладами. Билеты уже в продаже: можно купить индивидуальный или оформить корпоративное участие для команды. Все подробности — на сайте. 🚀 А у подписчиков FrontEndDev есть уникальная возможность выиграть онлайн билет! Заполняйте простую форму — итоги подведем 30 августа! Всем удачи! ✌️

Как реализовать JWT-аутентификацию в NestJS Собираем базовый флоу: регистрация с хешированием пароля bcrypt, логин — через LocalStrategy и выдачу access_token, а защищённые роуты — через JwtStrategy и guard с проверкой Bearer-токена. https://blog.logrocket.com/how-to-implement-jwt-authentication-nestjs/

Отложенные и мгновенные подсказки на чистом 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/