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

Быстро о главном: визуализация с D3.js Мы уже рассматривали D3.js. В этой статье познакомимся с библиотекой на конкретных примерах. Пройдем по следующим этапам: загрузка данных  —  выборка элементов  —  привязка данных  —  создание/изменение/ удаление элементов. 👉 @sWebDev

React: слушаем события прокрутки элемента useScroll используется для прослушивания события прокрутки элемента и перерисовки при прокрутке. Не требует ручного добавления слушателей событий JavaScript. Например:

     import {useScroll} from 'react-use';
      const Demo = () => {
        const scrollRef = React.useRef(null);
        const {x, y} = useScroll(scrollRef);
      return (
          <div ref={scrollRef}>
            <div>x: {x}</div>
            <div>y: {y}</div>
          </div>
        );
      };

👉 @sWebDev

Хотите стабильно зарабатывать во фрилансе или найти новую профессию в 2023г.? Чтоб работа зажигала, а не высасывала время. И вас постоянно спрашивали: как вы к этому пришли? 📌 БЕСПЛАТНО освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника и расскажем, как заработать на дизайне. Что вы получите? — Доступ к личному кабинету с уроками — Личный разбор каждого ДЗ от куратора — Портфолио из 4+ работ и сертификат — Мастер-класс "Как заработать на дизайне в 2023 г." — 12000+ единомышленников в чате Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов. 👉 Начать обучение бесплатно Программа бесплатного курса: — Обучение по Figma с нуля и 4+ дз с личным разбором — Изучение основ дизайна (контент, сетки, композиция т.д.) — Создание анимации интерфейса — Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать) 👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы

В ритмах React'a: руководство по созданию аудиоплеера Будь вы новичок или опытный разработчик, это исчерпывающее руководство шаг за шагом проведет вас через процесс создания собственного аудиоплеера с помощью популярной JavaScript-библиотеки React. 👉 @sWebDev

Framer motion hamburger Проект с кнопкой меню-бургера, выполненный на CSS и React.js. 👉 @sWebDev

Удаление пробелов на Vue.js Вам нужно автоматически удалять пробелы в начале и конце строки, каким модификатором для этого нужно воспользоваться ? 👉 @sWebDev

Подборка материалов для погружения в Angular: выбор сотрудников Selectel При построении веб-сервисов фронтенд-разработчики Selectel используют Angular — один из топ-фреймворков с высокой скоростью разработки и низким порогом вхождения. Но несмотря на последнее, во время изучения могут возникнуть трудности с потоками, отписками и другими абстракциями. В статье разработчики делятся полезными ресурсами, которые помогут в освоении Angular. 👉 @sWebDev

Vue Toastification Библиотека для Vue.js, позволяющая настроить красивые уведомления на сайте. Поддержка RTL, смахивание для закрытия, определение поведения и другие функции. Узнать подробнее можно по ссылке. 👉 @sWebDev

Цветовая палитра Цветовая палитра, выполненная на HTML,CSS и React.js. 👉 @sWebDev

Goodshare.js Библиотека, которая позволяет настроить гибкий функционал обмена ссылками в социальных сетях и мессенджерах. Подробный обзор по ссылке. 👉 @sWebDev

Нестандартный подход в разработке: как мы интегрировали React с «Битрикс» Опыт разработчиков INDEXIS, которые применили нестандартный подход в разработке - интеграцию "Битрикс" и React. В статье рассмотрим процесс интеграции и его особенности. 👉 @sWebDev

🔥Тест по JavaScript от OTUS 🔥 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТ https://otus.pw/mbLX/ 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Анимированный фон Three.js Анимированный фон, выполненный с применением библиотеки Three.js. 👉 @sWebDev

Лучший источник макетов для практики верстки Макеты для верстки — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку

Отслеживаем находится ли пользователь в режиме ожидания в React Благодаря хуку useIdle можно отслеживать, находится ли пользователь на странице в режиме ожидания. В него передаются два параметра: ms – время ожидания и initialState, позволяющие изначально установить режим ожидания для пользователя. Например:

 import {useIdle} from 'react-use';
    const Demo = () => {
    const isIdle = useIdle(3e3);
    return (
            <div>
                <div>User is idle: {isIdle ? 'Yes' : 'Nope'}</div>
           </div>
        );
    };

👉 @sWebDev

Stepper Iteration with Anime JS Анимированный счетчик, выполненный с использованием библиотеки Anime.js. 👉 @sWebDev

React, всплывающие подсказки (tooltips), для самых маленьких По ссылке руководство, в котором мы пошагово рассмотрим как написать универсальный компонент для всплывающих подсказок на React и TypeScript. 👉 @sWebDev

🟡Хардкорный тест по JS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay. 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Modal Библиотека для Vue.js, которая добавляет в ваше приложение гибкое использование модальных окон. Подробный обзор доступен по ссылке 👉 @sWebDev