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

A?.Frontend Community Meetup #6 Митап для тех, кто развивается во frontend-разработке. 📍Поговорим про TypeScript, сравним его с JS, определим плюсы и минусы его использования. Когда: 21 марта 18:30 Где: онлайн Вас ожидают доклады спикеров: 🎤Александр Чернов, Frontend Developer в Альфа-Банке, сделает введение в мир надёжного программирования. 🎤 Рустам Султанбеков, Middle Frontend Developer в Авито, расскажет про переход на TypeScript: плавные перемены и непредвиденные сложности. 🎤 Александр Серов, Senior Frontend Developer в UULA, расскажет о продвинутых возможностях TypeScript. 🎤 Тёма Сенюков, старший разработчик интерфейсов в Яндексе, разберёт что такое Generics и как эффективно использовать этот инструмент. Регистрируйтесь 👉🏼 https://clck.ru/39Q6Lm Больше полезного в комьюнити 👉🏼 https://clck.ru/39Q74e Реклама: erid LjN8JtvEk ИП Чернов ИНН 732816175800

Async Transitions: обновление без блокировки Transition API в React позволяет плавно обновлять состояние без блокировки UI. Как использовать: 1. Импортируйте useTransition. 2. Создайте хук useTransition. 3. Оберните изменение состояния в startTransition. Что происходит: 1. startTransition вызывает функцию асинхронно, позволяя отменить изменение. 2. Пока функция выполняется, isPending = true. 3. Когда функция завершается, isPending = false. Пример:

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <p>Current tab: {tab}</p>
      <button onClick={() => selectTab('home')}>Home</button>
      <button onClick={() => selectTab('about')}>About</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

👉 @sWebDev

Сканирование и генерация QR-кода с помощью ZXing и Angular Статья рассказывает о том, как использовать QR-коды в приложениях на Angular с помощью библиотеки ZXing. 👉 @sWebDev

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Передача контекста в шаблоны Как получить доступ к контексту, переданному в шаблон с помощью директивы ngTemplateOutletContext? 👉 @sWebDev

FP.ts FP.ts – это библиотека для функционального программирования (FP) на TypeScript. Она позволяет использовать популярные паттерны и абстракции, доступные в большинстве функциональных языков. 👉 @sWebDev

Станьте Аналитиком данных с нуля за 5 месяцев! Получите новую профессию и постройте успешную карьеру в IT-сфере с нашим курсом Узнать больше #реклама 16+ karpov.courses О рекламодателе

AnimeJS Player Пример реализации плеера на Anime.js. 👉 @sWebDev

Как прототипное наследование в JavaScript может помочь разработчику? 💻 Расскажет опытный эксперт на бесплатном практическом уроке от OTUS, в результате которого вы: - поймете объектную модель Javascript; - сможете писать ООП код с экономией памяти; - получите ответы на все вопросы по этой теме. 🕐 Встречаемся 20 марта в 20:00 мск в рамках курса «Специализация Fullstack developer». Доступна рассрочка на обучение! 👉 Регистрируйтесь прямо сейчас, чтобы посетить бесплатный урок и получить запись: https://otus.pw/eNSY/?erid=LjN8KSte4 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как использовать 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