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

Работа с useSetState в React Для чего используется хук useSetState в React? Если забыли, то вернитесь к посту от 29.07.2024. 👉 @sWebDev

Downshift Downshift - это библиотека для создания гибких и доступных дропдаунов (выпадающих списков) и автозаполнения. Она предоставляет низкоуровневый API, что позволяет контролировать внешний вид и поведение компонентов. 👉 @sWebDev

Smoke Particles Анимация дыма на Three.js. 👉 @sWebDev

Получение данных с помощью Server Actions в Next.js Статья обсуждает способы получения данных в Next.js с использованием серверных действий (Server Actions) и клиентских компонентов (Client Components). Автор объясняет, как использовать серверные компоненты для получения данных и как клиентские компоненты могут извлекать данные через обработчики маршрутов. Также рассматриваются преимущества и недостатки каждого подхода, и делается вывод о необходимости улучшения методов извлечения данных в будущих версиях Next.js. 👉 @sWebDev

3D Printing Анимация 3D-печати на Three.js. 👉 @sWebDev

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

Lottie-web Lottie-web - это библиотека, разработанная компанией Airbnb для рендеринга анимаций, созданных в Adobe After Effects, в веб-приложениях. Анимации экспортируются из After Effects с использованием плагина Bodymovin и могут быть легко встроены в ваши веб-страницы с помощью Lottie. 👉 @sWebDev

Получите диплом от НИТУ МИСИС в веб-разработке Яндекс Практикум и НИТУ МИСИС приглашают на онлайн-программу «Веб-разработчик» Полноценная учёба в онлайн-формате Зачёты, сессии, лекции и семинары с гибким графиком. На платформе Практикума Гибкая теория, автоматическая проверка заданий и встроенная YandexGPT. Преподаватели НИТУ МИСИС и наставники Яндекс Практикума Они будут проводить занятия и учить вас применять теорию на практике. Студенческий, льготы и диплом гособразца У вас будут все преимущества студента-очника. Доступ к инфраструктуре вуза — кампусам, библиотекам и мероприятиям. Оплатить учёбу можно разными способами: всю сумму сразу, по семестрам или с помощью госкредита — тогда ежемесячный платёж составит от 500 ₽, а государство погасит часть кредита за вас. Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

Часто задумываетесь об удобстве пользователей? ❤️ - Да. 👍 - Нет. 👉 @sWebDev | #юмор

Animated Unsubscribe Page Интерактивная анимация страницы отписки на GSAP. 👉 @sWebDev

Создание контекста с использованием React.createContext Контекст передает данные через компонентное дерево без пропсов. React.createContext создает глобальное состояние. 1. Создаем контекст и компонент-провайдер:

import React, { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

2. Используем контекст в дочернем компоненте:

const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
};

3. Оборачиваем приложение в ThemeProvider:

const App = () => (
  <ThemeProvider>
    <ThemedComponent />
  </ThemeProvider>
);
export default App;

👉 @sWebDev

Никому не говорите, что вы программист. 👉 @sWebDev | #юмор

Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно Все найденные курсы собирают тут — t.me/+Rg23ozD8yGdkYmJi По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов Подписаться #реклама 16+ О рекламодателе

Работа с роутами в React Какой метод в React Router позволяет загружать дополнительные роуты динамически? Забыли? Вернитесь к посту от 22.07.2024. 👉 @sWebDev

Lazy.js Lazy.js — это библиотека JavaScript, предоставляющая инструменты для работы с коллекциями данных (массивы, объекты) , обеспечивающая ленивые вычисления для повышения производительности. 👉 @sWebDev

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

The Raging Sea Настраиваемая анимация воды на Three.js. 👉 @sWebDev

Как создать библиотеку React components ESM+CJS В этой статье рассказывается о создании библиотеки React-компонентов ESM+CJS. Обсуждаются проблемы создания библиотеки, работающей в разных средах. Автор рекомендует использовать Rollup в качестве модульного бандлера, а TypeScript для проверки типов. Другие важные моменты включают использование зависимостей типа "peer" и поддержание чистоты файла package.json. 👉 @sWebDev