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

Управление состоянием с сохранением в LocalStorage В React хук useLocalStorage сохраняет состояние в localStorage. При инициализации берёт данные из него (если есть), при обновлении — синхронно записывает. Удобно для темы, языка и других настроек, сохраняемых между сессиями.

import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue ? JSON.parse(storedValue) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // Игнорируем ошибки (например, если storage переполнен)
    }
  }, [key, value]);

  return [value, setValue] as const;
}

Теперь можно использовать его, как обычный useState, но с автоматическим сохранением. 👉 @sWebDev

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

Давайте посмотрим на реальность. Какая у вас зарплата в месяц (тыс. ₽)? 👎 – до 100. ❤️ – 100-150. 🔥 – 150-200. 🤔 – 200-250. 👍 – 250+ (неприлично много) 👉 @sWebDev | #юмор

Жизненный цикл В какой момент жизненного цикла компонента флаг в хуке useIsMounted устанавливается в значение false? Забыли? Вернитесь к посту от 01.09.2025. 👉 @sWebDev

LeaderLine Библиотека предназначена для отрисовки SVG-линий между произвольными DOM-элементами. Инструмент автоматически рассчитывает путь и положение линии, обновляя их при прокрутке или изменении размеров страницы. Подойдет для создания визуальных связей, аннотаций или простых диаграмм в интерфейсе. 👉 @sWebDev

Ищу желающих выполнять задачи с помощью ИИ! Работа полностью на удаленке с зп до 150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ ganstaagency.com О рекламодателе

Draggable & Flip Sortable Grid Сортируемая сетка с перетаскиванием элементов на GSAP. 👉 @sWebDev

Как зарабатывать удаленно с нейросетями? Присоединяйся! Подпишись прямо сейчас, чтобы не потерять: Свежие обзоры нейросетей, которые реально работают — без лишнего хайпа и воды, только проверенная информация, которую можно использовать для заработка. Пошаговые видео-уроки, после которых всё станет понятно — научитесь быстро осваивать новые профессии и автоматизировать рутинные задачи. Как находить клиентов, готовых платить дорого — секреты эффективного поиска заказов и построения стабильного потока заказов. Автоматизация работы — научитесь выполнять 2-часовую работу за 20 минут без выгорания, автоматизируя рутину с помощью нейросетей. Дополнительный доход — узнаете, как зарабатывать в свободное время, не уходя с основной работы или учебы. Подписаться #реклама 16+ О рекламодателе

Создание сложных форм на Vue Разметка для больших форм с десятками полей быстро становится громоздкой и трудной в поддержке. Статья показывает, как решить эту проблему в Vue с помощью компонентного подхода. Разбирается паттерн, где структура формы определяется в JSON, а поля генерируются динамически через v-for и переиспользуемый компонент ввода. 👉 @sWebDev

Light and shadow 3D-сцена с анимированной гирляндой и динамическими тенями на GSAP. 👉 @sWebDev

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🏎 Ищете выгодный пригон автомобиля из Европы? Компания European Car Hub предлагает автомобили с ценами на 20-30% ниже рыночных!

🔴 Audi A8 (3.0 гибрид, автомат, полный привод) 🔴 Kia Sportage (1.6 бензин, механика, передний привод) 🔵 Volkswagen Tiguan (2.0 бензин, автомат, полный привод) 🔵 Volkswagen Golf (1.5 бензин, механика, передний привод)

🧐 Все машины проходят тщательную проверку: Большинство из них — почти новые. Растаможка с Европы составляет всего 30%. Всю работу с документами мы берём на себя. European Car Hub – насладись покупкой авто без лишних хлопот!

Curtains.js Библиотека использует WebGL для превращения DOM-элементов, таких как изображения и видео, в интерактивные 3D-плоскости. Она значительно упрощает работу с шейдерами для добавления к обычным HTML-элементам сложных визуальных эффектов. 👉 @sWebDev

Вебинар для техспециалистов, IT-директоров и CTO • Как грамотно оборудовать переговорные комнаты для онлайн-встреч и ВКС? • Какое ПО и аппаратуру выбрать для эффективного онлайн и гибридного обучения сотрудников? • Как минимизировать ошибки при замене иностранного ПО на российское в уже оборудованных переговорных комнатах? ✅ Узнайте ответы на вебинаре МТС Линк для техспециалистов, ИТ-директоров и СТО За 30 минут разберём: - какие решения подходят под ваши задачи и бюджет; - базовую комплектацию переговорных комнат и аудиторий от МТС Линк; - схемы подключения для переговорных комнат от 2 до 20+ мест; - кейсы компаний, которые уже оснастили переговорки с МТС Линк. 👍 Бонус: дарим всем участникам ПО МТС Линк для переговорок на 1 год при покупке оборудования. Регистрируйтесь на вебинар по ссылке Зарегистрироваться #реклама 16+ mts-link.ru О рекламодателе

Делали так? 👍 – Пару раз прокатило. ❤️ – Я даже джуном прикинуться не могу. 👉 @sWebDev | #юмор

Infinite Canvas Интерактивный бесконечный холст с drag-and-drop на Canvas API и JavaScript. 👉 @sWebDev

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

Декларативная условная стилизация Для условного применения inline-стилей в React часто создают объект стилей с помощью if или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...) и логического оператора &&. Механизм основан на том, что выражение условие && { стиль: 'значение' } вернет либо объект стилей, если условие истинно, либо false, если ложно. React при разворачивании (spread) falsy-значений (таких как false, null или undefined) внутри объекта просто игнорирует их, не добавляя никаких свойств.

import React from 'react';

function AlertMessage({ text, isActive, isUrgent }) {
  const baseStyles = {
    margin: '10px 0',
    padding: '15px',
    borderRadius: '4px',
    transition: 'all 0.2s ease-in-out',
  };

  const finalStyles = {
    ...baseStyles,
    ...(isActive && { background: '#f0f0f0' }),
    ...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
  };

  return <div style={finalStyles}>{text}</div>;
}

👉 @sWebDev

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе