FrontEndDev

Cоздатем реалистичную пушистую траву с использованием Three.js Техники работы с геометрией, шейдерами и анимацией для достижения эффекта объемной и динамичной травы, не убивая перфоманс. Демо | Github https://tympanus.net/codrops/2025/02/04/how-to-make-the-fluffiest-grass-with-three-js/

Веб-стандарты — Выпуск 459 Lightpanda Browser, CSS sheet, мощный attr, Temporal приходит в JS, Bun 1.2 https://web-standards.ru/podcast/459/

JavaScript Temporal приближается В скором времени в браузерах появится экспериментальная поддержка JavaScript Temporal API, который позволит упростить работу со временем в нативном JS. https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/

Как применять CSS3-трансформации для работы с фоновыми изображениями В статье объясняется, как применять свойства transform для масштабирования, поворота и других изменений фоновых изображений, а также рассматриваются ограничения и возможные обходные пути. https://www.sitepoint.com/css3-transform-background-image/?utm_source=rss

🚀Приглашаем на бесплатный урок «React 19 что нового?» курса React.js Developer 06 февраля 19:00 (мск). Что будет на вебинаре? - Обзор новых хуков. - Посмотрим возможности создания новых пользовательских элементов. - Передача ref в props и другие минорные изменения. Кому вебинар будет полезен? - Junior frontend-разработчикам. - Опытным разработчикам, желающим быть в курсе последних изменений. Что узнают участники вебинара? - Какие фичи появились в React 19. - Как и где применять в своих проектах новые возможности библиотеки. - Как отрефакторить уже существующий код. ⏰ Успейте зарегистрироваться на бесплатный вебинар 06 февраля 19:00 (мск). Запись ограничена: https://otus.pw/DsGF/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Nim - темплейт для персонального сайта с использованием Motion-Primitives Nim создан с помощью Next.js, React, Tailwind CSS и Motion-Primitives. В статье — основные функции, особенности и способы использования этого шаблона для создания современных веб-приложений. https://tympanus.net/codrops/2025/02/01/nim-nextjs-react-tailwind-motion-template/

Кортежи в TS Большой сборник примеров работы с кортежами. https://2ality.com/2025/01/typescript-tuples.html

Относительно новые вещи, которые будут доступны в HTML в 2025 Группировка details как аккордион, стилизация селектов, чекбоксы как toggle и еще несколько фич. https://frontendmasters.com/blog/bone-up-html-2025/

Твоя карьера в спортивном СМИ ❤ Привет! Наши друзья из Спортса" создают контент, который читают миллионы. Спортс" – это крупное медиа о спорте, в котором не только освещают события, но еще и разрабатывают технологии, которые делают спорт доступнее, понятнее и интереснее. В своем телеграм-канале @career_sports ребята публикуют вакансии для IT-специалистов, дизайнеров и других экспертов в своей области. Подписывайтесь и откликайтесь, ребята рады новым знакомствам! 😎

Настраиваем SSR с React Router 7 Использование React Router в качестве фреймворка на примере создания приложения книжного трекера. https://blog.logrocket.com/server-side-rendering-react-router-v7/

10 backend понятий, о которых желательно знать frontend разработчику Чтобы быть в теме и понимать, о чем говорят бекендеры на стендапах, вот небольшая обзорная статья, рассказывающая о таких понятиях как шардинг, балансировщик, API Gateway и еще некоторых других. https://dev.to/thesanjeevsharma/10-backend-terms-every-frontend-developer-should-know-2o2h

Погружение в React Server Components Рассмотрим, чем RSC отличается от классических CSR и SSR, какие у них преимущества и как интегрировать серверные компоненты в свое приложение на React. https://tonyalicea.dev/blog/understanding-react-server-components/

Инструменты для проверки доступности Обзорная статья о том, почему доступность - один из важных аспектов разработки, и какие инструменты можно использовать для тестирования. https://techhub.iodigital.com/articles/accessibility-tools

Экспериментальный React Transition API С первого релиза до настоящего времени у React не было своего API для анимации, и приходилось использовать библиотеки (например, Motion for React или React Spring). Наконец разрабочики решили залатать эту дыру. Теперь можно попробовать ViewTransition. Подробнее — в статье. https://motion.dev/blog/reacts-experimental-view-transition-api

Ваша карьера в Frontend-разработке начинается в Авито 😎 Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы. Профессионально развиваться и расти вам помогут: • наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях • комьюнити стажёров — поделятся опытом и поддержат • доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу. Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест. Условия: • длительность программы — 6 месяцев • работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость • зарплата и корпоративный ноутбук • можно работать из офиса, удалённо или в гибридном формате. Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.

Перемещение элементов в DOM при помощи moveBefore moveBefore позволяет перемещать элементы без первоначального удаления их из DOM, что добавляет удобства, т.к. в случае iframe - нет перезагрузки содержимого, активные элементы остаются в фокусе и т.д. Более подробно - по ссылке. https://www.bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore/

Избавляемся от any в проектах на TS any отключает многие проверки типов и снижает безопасность кода. Заметка о том, какие правила линтинга использовать, чтобы сделать ваш код более надежным. https://typescript-eslint.io/blog/avoiding-anys/

Очередной кейс использования container queries и селектора :has() Ахмад Шадид рассказывает и показывает, как создавал функционал заглавной картинки для своего блога. https://ishadeed.com/article/modern-css-feature-image/

CSS text-box-trim О том, как работает свойство для обрезки лишнего пространства у текста, и для каких случаев его удобно применять. https://developer.chrome.com/blog/css-text-box-trim?hl=ru

6 полезных CSS сниппетов ▫️использование контейнерных запросов; ▫️создание прокрутки с привязкой; ▫️избегание position: absolute с помощью CSS Grid; ▫️быстрое создание круга; ▫️использование каскадных слоев; ▫️применение логических свойств для упрощения кода. https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023