29771
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu № 4850240725
🚀Приглашаем на бесплатный урок «React 19 что нового?» курса React.js Developer 06 февраля 19:00 (мск).
Что будет на вебинаре?
- Обзор новых хуков.
- Посмотрим возможности создания новых пользовательских элементов.
- Передача ref в props и другие минорные изменения.
Кому вебинар будет полезен?
- Junior frontend-разработчикам.
- Опытным разработчикам, желающим быть в курсе последних изменений.
Что узнают участники вебинара?
- Какие фичи появились в React 19.
- Как и где применять в своих проектах новые возможности библиотеки.
- Как отрефакторить уже существующий код.
⏰ Успейте зарегистрироваться на бесплатный вебинар 06 февраля 19:00 (мск). Запись ограничена: https://otus.pw/DsGF/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Кортежи в TS
Большой сборник примеров работы с кортежами с типизацией
https://2ality.com/2025/01/typescript-tuples.html
Твоя карьера в спортивном СМИ ❤
Привет! Наши друзья из Спортса" создают контент, который читают миллионы. Спортс" – это крупное медиа о спорте, в котором не только освещают события, но еще и разрабатывают технологии, которые делают спорт доступнее, понятнее и интереснее.
В своем телеграм-канале @career_sports ребята публикуют вакансии для IT-специалистов, дизайнеров и других экспертов в своей области.
Подписывайтесь и откликайтесь, ребята рады новым знакомствам! 😎
10 backend понятий, о которых желательно знать frontend разработчику
Чтобы быть в теме и понимать, о чем говорят бекендеры на стендапах, вот небольшая обзорная статья, рассказывающая о таких понятиях как шардинг, балансировщик, API Gateway и еще некоторых других.
https://dev.to/thesanjeevsharma/10-backend-terms-every-frontend-developer-should-know-2o2h
Инструменты для проверки доступности
Обзорная статья о том, почему доступность - один из важных аспектов разработки, и какие инструменты можно использовать для тестирования.
https://techhub.iodigital.com/articles/accessibility-tools
Ваша карьера в Frontend-разработке начинается в Авито 😎
Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы.
Профессионально развиваться и расти вам помогут:
• наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях
• комьюнити стажёров — поделятся опытом и поддержат
• доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу.
Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест.
Условия:
• длительность программы — 6 месяцев
• работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость
• зарплата и корпоративный ноутбук
• можно работать из офиса, удалённо или в гибридном формате.
Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.
Избавляемся от any в проектах на TS
any отключает многие проверки типов и снижает безопасность кода. Заметка о том, какие правила линтинга использовать чтобы сделать ваш код более надежным.
https://typescript-eslint.io/blog/avoiding-anys/
CSS text-box-trim
О том, как работает свойство для обрезки лишнего пространства у текста и для каких случаев его удобно применять.
https://developer.chrome.com/blog/css-text-box-trim?hl=ru
Введение в Nginx
Знакомство с базовыми концепциями одного из самых популярных серверов.
https://www.netguru.com/blog/nginx-tutorial-basics-concepts
Офер в Яндекс для опытных фронтендеров за два дня
15–16 февраля приглашаем фронтендеров с опытом работы от пяти лет получить офер в Яндекс через multitrack за 2 дня. Достаточно пройти несколько технических секций 15 февраля, чтобы уже 16-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.
Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.
Узнать подробности и зарегистрироваться.
2024 JavaScript Rising Stars
Тренды и популярные проекты в экосистеме JavaScript за 2024 год.
https://risingstars.js.org/2024/en
Т-Банк открыл набор на новый поток стажировок 💻
Есть много направлений: разработка (на восьми языках программирования!), ML, SRE, QA, аналитика, менеджмент, редактура, маркетинг и юриспруденция. Ждут студентов и начинающих специалистов, готовых посвящать работе от 20 часов в неделю.
Стажировки оплачиваются, а по результатам нескольких месяцев вас могут пригласить на интервью в штат. Вы будете участвовать в реальных проектах и разрабатывать решения с нуля с полным погружением в бизнес-процессы. Стажеры отлично справляются с тем, чтобы совмещать работу и учебу: менторы и руководители относятся к этому с пониманием.
Выберите направление, отправьте заявку и решите экзамены до 30 января
AI ассистент прямо в DevTools
С недавнего времени в Chrome появился свой асистент, который помогает с вопросами по отладке. Вот небольшой обзор и краткое руководство от разработчиков Chrome.
https://developer.chrome.com/docs/devtools/ai-assistance?hl=ru
Онлайн-курс по frontend-разработке от НИУ ВШЭ
Центр непрерывного образования ФКН НИУ ВШЭ открывает набор на новый онлайн-курс «Frontend-разработчик» для начинающих.
Программа подойдет:
〰️〰️〰️〰️
- Новичкам в IT: освоите разработку сайтов
- IT-специалистам, которые хотят освоить разработку интерфейсов: познакомитесь с особенностями и инструментами frontend-разработки
За 4 месяца вы:
〰️〰️〰️〰️
- Узнаете, как устроены сайты
- Научитесь создавать базовые элементы с помощью HTML и таблиц стилей CSS
- Освоите разработку интерактивных страниц (языки JavaScript и TypeScript)
- Научитесь разрабатывать одностраничные и мобильные приложения (библиотека React.js)
- Сделаете итоговый проект
Старт онлайн-курса — 17 февраля.
Погрузиться во frontend-разработку можно на бесплатном онлайн-интенсиве «Frontend с нуля: первый шаг в веб-разработку».
Подробнее о программе
Реклама: НИУ ВШЭ ИНН 7714030726
Erid: 2SDnjcLjzFv
Курс по Еvent-Driven Архитектуре
Создаем production-ready приложение на NextJs, Clerk и Webhook. Настраиваем базу данных с помощью NeonDB and Prisma и реализуем типичные CRUD операции.
https://www.youtube.com/watch?v=TtvytXHLAsc
Nim - темплейт для персонального сайта с использованием Motion-Primitives
Nim создан с помощью Next.js, React, Tailwind CSS и Motion-Primitives. В статье — основные функции, особенности и способы использования этого шаблона для создания современных веб-приложений.
https://tympanus.net/codrops/2025/02/01/nim-nextjs-react-tailwind-motion-template/
Относительно новые вещи, которые будут доступны в HTML в 2025
Группировка details как аккордион, стилизация селектов, чекбоксы как toggle и еще несколько фич.
https://frontendmasters.com/blog/bone-up-html-2025/
Настраиваем SSR с React Router 7
Использование React Router в качестве фреймворка на примере создания приложения книжного трекера.
https://blog.logrocket.com/server-side-rendering-react-router-v7/
Погружение в React Server Components
Рассмотрим, чем RSC отличается от классических CSR и SSR, какие у них преимущества и как интегрировать серверные компоненты в свое приложение на React.
https://tonyalicea.dev/blog/understanding-react-server-components/
Экспериментальное React Transition API
С первого релиза до настоящего времени у React не было своего API для анимации и приходилось использовать библиотеки (например Motion for React или React Spring). Наконец разрабочики решили залатать эту дыру. Теперь можно попробовать ViewTransition. Подробнее — в статье.
https://motion.dev/blog/reacts-experimental-view-transition-api
Перемещение элементов в DOM при помощи moveBefore
moveBefore позволяет перемещать элементы без первоначального удаления их из DOM, что добавляет удобства, т.к. в случае iframe - нет перезагрузки содержимого, активные элементы остаются в фокусе и т.д. Более подробно - по ссылке.
https://www.bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore/
Очередной кейс использования container queries и селектора :has()
Ахмад Шадид рассказывает и показывает, как создавал функционал заглавной картинки для своего блога.
https://ishadeed.com/article/modern-css-feature-image/
6 полезных CSS сниппетов
Использование контейнерных запросов, создание прокрутки с привязкой, избегание position: absolute с помощью CSS Grid, быстрое создание круга, управление вариантами с помощью каскадных слоев и применение логических свойств для упрощения кода.
https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023
Примеры утечек памяти в JavaScript
Разбираем несколько причин утечек памяти и способы их устранения.
https://www.youtube.com/watch?v=HJSnq0z_cOE
RegexpGarden
Игровое обучение регулярным выражениям. 42 задания от просто к сложному раскрывают аспекты работы с регулярками.
👉 Внимание, чтобы перейти к описанию урока нажмите на крестик в сайдбаре (рядом с Select Lesson)
https://regexp-garden.madewith.fun/
Передача переменных и значений между HTML, CSS и JavaScript
Короткая заметка о том, как прокинуть значение в HTML с помощью CSS переменных и DOM API.
https://frontendmasters.com/blog/sharing-a-variable-across-html-css-and-javascript/
Александр Моргунов — Разбираемся в Feature-Sliced Design
Александр из Samokat.tech рассказывает, что из себя представляет архитектурная методология Feature-Sliced Design и ее основные концепты.
https://www.youtube.com/watch?v=H_rJ0zB8rqc
Оmatsuri
Набор инструментов на каждый день: компрессор, декодер, генератор градиентов и много другое.
Это опенсорсный проект, репу можно глянуть тут https://github.com/rtivital/omatsuri
https://omatsuri.app/
Основные ошибки при использовании React Testing Library
Кент Си Доддс описывает распространённые ошибки при использовании RTL и предлагает рекомендации по их предотвращению.
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
Разбиваем тяжелые задачи и улучшаем производительность
Kак улучшить отклик веб-приложений, разбивая длительные задачи на меньшие с помощью методов вроде scheduler.yield и асинхронных циклов for..of.
Это помогает избежать блокировки интерфейса и обеспечивает более плавную работу приложения.
https://calendar.perfplanet.com/2024/breaking-up-with-long-tasks-or-how-i-learned-to-group-loops-and-wield-the-yield/