Isotope

Isotope – это JavaScript-библиотека, которая позволяет фильтровать и сортировать элементы на странице. Она работает с элементами DOM, поэтому ее можно использовать с любой библиотекой или фреймворком JavaScript.

👉 @sWebDev

Условия для вызова хука afterNextRender

Когда вызывается хук afterNextRender?

👉 @sWebDev

Изучение четырех ключевых примитивов из Solid

Статья рассматривает четыре ключевых примитива, используемых в фреймворке Solid для создания веб-приложений.

👉 @sWebDev

Синхронизация с внешним хранилищем

useSyncExternalStore - это хук, позволяющий синхронизировать состояние компонента с внешним хранилищем данных.

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

const store = createStore();

function MyComponent() {
  const data = useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
  );

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.text}</p>
      ))}
    </div>
  );
}

В этом примере:
1) store - это наше внешнее хранилище данных.
2) useSyncExternalStore принимает два аргумента:
- store.subscribe: функция, которая подписывается на обновления хранилища.
- store.getSnapshot: функция, которая возвращает текущее состояние хранилища.
3) data - это переменная, которая содержит текущее состояние хранилища.
4) Компонент MyComponent будет обновляться
каждый раз, когда состояние хранилища меняется.

👉 @sWebDev

Background Generator

Генератор баблов для фона на Anime.js.

👉 @sWebDev

Забывали ставить ;?

👉 @sWebDev

ImagesLoaded

ImagesLoaded – это JavaScript-библиотека, предназначенная для отслеживания загрузки изображений на веб-странице. Она позволяет вам выполнять код после того, как все изображения на странице (или в заданном селекторе) будут загружены.

👉 @sWebDev

GSAP scrolltrigger exemple

Пример скролл-анимации на GSAP.js.

👉 @sWebDev

Реализация 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