Реализация React Query в веб-приложении

В этой статье рассматривается интеграция библиотеки React Query в базовое веб-приложение. React Query - это библиотека для управления, кэширования и синхронизации состояния сервера в приложениях React. В статье создается простое приложение, которое извлекает данные из открытого API, а для стилизации используется Bootstrap.

👉 @sWebDev

Spooky - ThreeJS

Пример реализации трехмерной диорамы на Three.js.

👉 @sWebDev

Resizable.js

Resizable.js - это JavaScript-библиотека, позволяющая сделать элементы HTML-страницы изменяемыми по размеру.

👉 @sWebDev

Внимание, разработчики!
@TopSelectionWeb3

💼Хотите прокачать свой LinkedIn-профиль и привлечь внимание рекрутеров?

🚀Команда TopSel приглашает вас на еженедельный бесплатный Разбор профилей LinkedIn в прямом эфире, который состоится в это воскресенье, 7 апреля, в 14:00 по мск!

💻На этот раз мы сфокусируемся на профилях разработчиков: Frontend, Backend, Fullstack, iOS/Android.

Не упустите возможность улучшить свой LinkedIn профиль и увеличить шансы на трудоустройство!

Делитесь вашими профилями в комментариях под последним постом на канале @TopSelectionWeb3

Определяем завершение Async Transitions

Как узнать, что Async Transitions завершена?

👉 @sWebDev

React против Angular: компонентная архитектура

Данная статья представляет собой сравнительный анализ подходов к компонентной архитектуре в React и Angular. В ней рассматриваются такие аспекты, как: создание компонентов, взаимосвязь компонентов, обнаружение изменений и т.д.

👉 @sWebDev

Реагирование на изменения входных данных в Angular

ɵNgOnChangesFeature - это функция Angular, которая позволяет компоненту реагировать на изменения входных данных. Она используется во внутреннем API Angular, но может быть полезна и разработчикам.

Как работает:
1. Когда компонент инициализируется, ɵNgOnChangesFeature создает объект SimpleChange, который содержит текущее и предыдущее значения каждого входного
2. При изменении входного ɵNgOnChangesFeature:
- Сравнивает новое значение со старым.
- Если значения не совпадают, ɵNgOnChangesFeature вызывает метод ngOnChanges компонента.
- ngOnChanges получает объект SimpleChange с информацией о том, какие входные данные изменились.

Пример использования:

export class MyComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    if (changes['input1']) {
      // Обработать изменение input1
    }
    if (changes['input2']) {
      // Обработать изменение input2
    }
  }
}

👉 @sWebDev

Responsive Slider with Scrollbar | Swiper JS

Адаптивный слайдер в стиле глассморфизма с полосой прокрутки на Swiper JS.

👉 @sWebDev

Немного магии за пределами бэкенда.

👉 @sWebDev | #юмор

WinterJS

WinterJS — это новая среда выполнения JavaScript, которая позиционируется как самая быстрая на сегодняшний день. Она разработана компанией Wasmer, известной своим проектом Wasmer Edge, который позволяет запускать WebAssembly на сервере.

👉 @sWebDev

Hack

Настраиваемый пиксельный фон на GSAP.

👉 @sWebDev

Как в Node.js контролировать потребление памяти при обработке сетевых запросов

Статья рассказывает об использовании Node.js Streams и механизма Back Pressure протокола TCP для реализации пакетной обработки больших объемов данных на машинах с жестким лимитом памяти.

👉 @sWebDev

Book Writing Animation

Пример реализации эффекта динамичного набора текста реализованный с помощью библиотеки typewriter-effect.

👉 @sWebDev

TanStack Query

TanStack Query – это библиотека для управления состоянием, которая значительно упрощает получение, кэширование и связывание данных при работе с API. Она также обладает отличной поддержкой TypeScript, что позволяет создавать полностью типизированные хуки для запросов данных.

👉 @sWebDev

Работа хука useSWR

Какие свойства возвращает useSWR при вызове?

👉 @sWebDev

CSS, такой CSS.

👉 @sWebDev | #юмор

Синхронная вставка элементов в DOM

useInsertionEffect - это хук, который позволяет синхронно вставлять элементы в DOM перед срабатыванием эффектов layout.

Чем он отличается от других хуков:

useEffect: срабатывает после layout и paint, что может привести к мерцанию при динамическом изменении стилей.

useLayoutEffect: срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга.


Пример использования:

const useDynamicStyles = () => {
  const [style, setStyle] = useState('');

  useInsertionEffect(() => {
    const styleElement = document.createElement('style');
    styleElement.textContent = style;
    document.head.appendChild(styleElement);

    return () => {
      document.head.removeChild(styleElement);
    };
  }, [style]);

  return style;
};

👉 @sWebDev

React Smooth Section Navigator

Интерактивное приложение React, обеспечивающее плавную навигацию между разделами контента с помощью колеса или сенсорных жестов. Он использует анимацию GSAP для обеспечения плавных переходов и поведения ScrollTrigger.

👉 @sWebDev

Было подобное?

👍 - Да.

🤔 - У меня все работает.

👉 @sWebDev | #юмор