Frontender Libs - обзор библиотек JS / CSS

Как использовать forwardRef с generic компонентами Статья рассказывает о том, как использовать forwardRef с обобщенными компонентами в React и TypeScript. Объясняется, почему стандартная реализация forwardRef приводит к потере вывода типов для обобщенных компонентов, и предлагается решение, которое позволяет восстановить вывод типов с помощью переопределения forwardRef с другим типом 👉 @sWebDev

Mysterious text Анимация текста на GSAP.js. 👉 @sWebDev

Packery Библиотека Packery - это JavaScript-библиотека и jQuery-плагин, который позволяет создавать бесшовные и перетаскиваемые макеты. Она использует алгоритм bin-packing для заполнения пустых пробелов. Макеты Packery могут быть упорядочены интеллектуально или хаотично. 👉 @sWebDev

Мем смешной, а ситуация страшная. Лайк, если работая программистом, следишь за внешним видом и здоровьем. 👉 @sWebDev | #юмор

Бесплатное обучение для тех, кто продаёт в интернете 11 марта стартует ecom-интенсив от Яндекс Рекламы. За 3 недели расскажем, как получать больше трафика и продаж тем, кто продаёт товары онлайн. Кому будет полезно: - Если вы развиваете свой интернет-магазин, узнаете, как с помощью рекламных инструментов Яндекса масштабировать бизнес. А ещё разберётесь, как улучшить свой сайт, и научитесь работать с аналитикой. - Если вы только задумываетесь о своём сайте, поймёте, когда бизнесу нужно вкладываться в развитие новых каналов продаж, и узнаете о возможностях рекламы в Яндексе, в том числе бесплатных. В программе разбор кейсов и рекомендации по улучшению рекламных кампаний от экспертов интенсива. А ещё будет много подарков: промокоды Плюса и Букмейта, Яндекс Станция и Умный телевизор. Узнать больше #реклама yandex.ru О рекламодателе

Refokus 22 Пример анимации страницы на Three.js. 👉 @sWebDev

⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы? Знакомая история? Тогда давай к нам! 🚀 PREAX — онлайн-стажировка для frontend-разработчиков. Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам. ЧТО ВНУТРИ? 🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами. 🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки. 🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг. 🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше. 🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь. 🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий. 🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой. В итоге получишь реальный опыт работы в команде! Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО! Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755

Оптимизация жизненного цикла компонентов afterRender и afterNextRender - это два новых хука жизненного цикла, которые были добавлены в Angular 17. afterRender вызывается один раз после завершения рендеринга компонента. Подходит для: 1) Доступа к DOM-элементам. 2) Инициализации сторонних библиотек. 3) Выполнения кода, который должен быть выполнен после рендеринга. afterNextRender вызывается после каждого цикла обнаружения изменений. Подходит для: 1) Синхронизации состояния компонента с DOM. 2) Обновления отображения в ответ на изменения данных. 3) Реагирования на изменения размеров окна. afterRender и afterNextRender не вызываются при SSR (Server-Side Rendering). afterNextRender не гарантирует, что DOM будет стабильным. Пример:

export class MyComponent {
  constructor() {}

  ngAfterRender() {
    console.log('Component has been rendered');
  }

  ngAfterNextRender() {
    console.log('Component has been rendered and change detection has run');
  }
}

👉 @sWebDev

Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик». ⏰ Когда: уже 14 марта в 19:00 по мск. Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS. Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? 🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».

Веб-скрапинг с Bright Data, Node.js и Puppeteer Статья рассказывает о том, как использовать Bright Data для эффективного сбора данных с веб-сайтов с помощью Node.js. В статье рассматриваются следующие темы: Введение в веб-скрапинг, преимущества Bright Data, настройка Node.js и сбор данных с помощью Bright Data и Puppeteer. 👉 @sWebDev

Назначение action в хуке useFormState Для чего используется атрибут action в хуке useFormState? 👉 @sWebDev

Million.js Million.js - это минималистичный фреймворк на JavaScript, который эффективно работает с элементами DOM. В отличие от традиционных фреймворков, которые обновляют весь DOM при каждом изменении состояния. Библиотека использует более детальный подход, обновляя только необходимые части DOM. Million.js также имеет свой компилятор, который автоматически оптимизирует компоненты React на сервере. 👉 @sWebDev

Loadig003 Пример анимации загрузки на Three.js. 👉 @sWebDev

Промышленные весы для бизнеса! Группа компаний «Невские весы» с 1999 года разрабатывает и производит весоизмерительное оборудование. Собственная производственная база компании, полный цикл производства, соединение традиций и новаторства в технологических и конструкторских решениях, высококачественные датчики производства мировых лидеров – вот составляющие, позволяющие компании производить весы для грузов от 100 мг до 400 тонн различного класса точности для компаний различных отраслей и обеспечивать высокие метрологические характеристики оборудования. Узнать больше #реклама vesservice.com О рекламодателе

Создание навигационной панели с помощью Angular 17 и Tailwind CSS Гайд по созданию навигационной панели с помощью Angular 17 и Tailwind CSS. 👉 @sWebDev

‼️Всем кодерам посвящается‼️ Code Ready — полезные ресурсы, шпаргалки, проекты на GitHub, разработка веб-приложений, и многое другое для твоих проектов, сразу с готовым кодом, и примером их использования. 🪩Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

When Animators Become Web Designers Пример анимации загрузки страницы на GSAP.js. 👉 @sWebDev

Хватит играть в танчики, пора создавать что-то новое. Новую игру, которая принесет тебе миллионы (и мы не только о поклонниках, но и о деньгах) Геймдизайнер — это режиссёр игры. Его задача собрать из сюжета, игровых механик и графики захватывающий мир и придумать правила, по которым он будет жить. Опытные геймдизайнеры могут зарабатывать около 200 000 рублей, по данным hh.ru. Попробуйте прямо сейчас, не ждите, пока мест не останется! ❕ Запрыгнуть в последний вагон, несущий вас к деньгам, славе и успеху можно тут. Причем БЕСПЛАТНО!

Reatom Reatom - это библиотека управления состоянием для React, которая является альтернативой RTK, Zustand и React Query. Бибилиотека позволяет создавать глобальное состояние, которое можно легко использовать и изменять в любых компонентах с помощью хуков или декораторов. Также поддерживаются асинхронные действия, селекторы, подписки, отладки и другие возможности. 👉 @sWebDev