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

Работа с resolveForwardRef() Что делает resolveForwardRef() при передаче ему объекта? Забыли? Вернитесь к посту от 10.03.2025. 👉 @sWebDev

ScrollSpy.js ScrollSpy.js — это легковесная библиотека для отслеживания появления элементов в области просмотра. Она позволяет удобно активировать анимации, загружать контент или изменять состояние элементов при прокрутке страницы. 👉 @sWebDev

CPChallenge: Bugs Анимация бабочек на Three.js. 👉 @sWebDev

API captureOwnerStack В React появился экспериментальный API captureOwnerStack, который помогает разрабатывать более удобные ошибки. Он позволяет получить стек владельцев (Owner Stack) — список компонентов, через которые передаётся проп. Это полезно, если нужно быстро понять, какой компонент несёт ответственность за данные в сложной структуре. Работает только в режиме разработки и может измениться в будущих версиях. Если ваш код ломается, а виновника не найти, этот API поможет разобраться. 👉 @sWebDev

Portal to elriel Интерактивная анимация с порталом на Three.js. 👉 @sWebDev

Window-Engine Window-Engine — библиотека для создания перетаскиваемых окон без зависимостей. Позволяет реализовать многозадачный интерфейс в веб-приложениях, сохраняя взаимодействие адаптивным, включая поддержку сенсорных экранов. 👉 @sWebDev

Когда на собеседовании спрашивают, ты фронт или бек, а ты до сих пор гуглишь, как центрировать div. 👍 – Издержки универсальности! ❤️ – Я думал, это они мне скажут кто я. 👉 @sWebDev | #юмор

Traffic Run Game Игра на на Three.js. 👉 @sWebDev

Управление асинхронным рендерингом Метод flushSync() позволяет немедленно обновить состояние и выполнить ререндер, обходя пакетную обработку обновлений. Это полезно, когда требуется мгновенно обновить интерфейс перед выполнением других операций, например, чтением размеров DOM. Например, кнопка изменяет текст элемента, и нам нужно получить его новую ширину до следующего рендера:

import { useState } from "react";
import { flushSync } from "react-dom";

function Example() {
  const [text, setText] = useState("Нажми меня");
  const spanRef = useRef(null);

  function handleClick() {
    flushSync(() => {
      setText("Текст изменился!");
    });
    
    console.log("Ширина:", spanRef.current.offsetWidth);
  }

  return (
    <div>
      <button onClick={handleClick}>Изменить</button>
      <span ref={spanRef}>{text}</span>
    </div>
  );
}

flushSync() гарантирует, что offsetWidth обновится после изменения текста, а не после следующего рендера. 👉 @sWebDev

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

Если джун — это нейросеть, то его база данных... 👍 – Stack Overflow. ❤️ – Код с курсов по веб-разработке. 👉 @sWebDev | #юмор

Какой первый аргумент передаётся в FormControl? Что передаётся в FormControl первым аргументом? Забыли? Вернитесь к посту от 03.03.2025. 👉 @sWebDev

Vanilla-tilt.js Vanilla-tilt.js — это легковесная библиотека, позволяющая добавлять эффект 3D-наклона к элементам на странице. Она реагирует на движения мыши, создавая плавные анимации без лишних зависимостей. 👉 @sWebDev

Anime.js hover effect Анимация при наведении на Anime.js. 👉 @sWebDev

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

Сохранение данных формы в React: современный подход с Nuqs В веб-разработке часто требуется сохранять состояние форм, чтобы предотвратить потерю данных при обновлении страницы или поделиться заполненной формой с другими. Традиционные методы, такие как localStorage, имеют ограничения, включая невозможность совместного использования данных и отсутствие встроенной валидации. Nuqs предлагает современное решение, позволяя сохранять состояние формы в URL с поддержкой типизации и валидации. Это упрощает обмен данными и устраняет необходимость в серверной инфраструктуре. Если вы хотите улучшить управление состоянием форм в своих React-приложениях, ознакомьтесь с возможностями Nuqs. 👉 @sWebDev

Loader Анимация загрузки на Anime.js. 👉 @sWebDev

Glider.js Glider.js — это компактный и гибкий карусельный слайдер, который не требует jQuery и работает плавно даже на мобильных устройствах. В отличие от тяжелых аналогов, он предлагает нативную поддержку перелистывания, кастомизацию через CSS и API для управления поведением. 👉 @sWebDev