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

Отслеживания событий вне зоны видимости компонента

Какой декоратор Angular позволяет компоненту реагировать на события, происходящие вне его области видимости?

Если забыли, то вернитесь к посту от 05.08.2024.

👉 @sWebDev

Rete.js

Rete.js - это фреймворк для создания визуальных редакторов схем (node-based editors). Он используется для построения приложений, где пользователи могут создавать и редактировать графические схемы с помощью узлов и соединений между ними. Такие редакторы часто используются в графических приложениях, редакторах шейдеров, системах визуального программирования и других областях.

👉 @sWebDev

Storm

Стилизованный шторм на Anime.js.

👉 @sWebDev

Оптимизация Производительности Angular С Помощью Кэширования HttpInterceptor

Статья описывает, как оптимизировать производительность Angular-приложений с помощью кеширования запросов через HttpInterceptor. В ней объясняется, что кеширование позволяет значительно сократить время загрузки данных, избегая повторных запросов к серверу.

👉 @sWebDev

Responsive Scroll-Driven Text Reveals

Анимированный скролл с использованием GSAP.

👉 @sWebDev

Macy.js

Macy.js - это библиотека для создания сеток (grid layout) в веб-приложениях. Она предназначена для упрощения задачи создания адаптивных сеток, что особенно полезно для галерей изображений, портфолио и других контентных сайтов.

👉 @sWebDev

А кто?

👉 @sWebDev | #юмор

COLORON GAME

Игра на реакцию реализованная с помощью GSAP, ES6 и Flexbox.

👉 @sWebDev

Динамические компоненты в Angular

ComponentFactoryResolver в Angular позволяет создавать и управлять динамическими компонентами, которые создаются и уничтожаются в ходе работы приложения.

Сначала создаем динамический компонент, а затем основной компонент с ComponentFactoryResolver:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `<div #container></div>
             <button (click)="loadComponent()">Load Component</button>`,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }
}

👉 @sWebDev

Любите джунов?

❤️ - Да.

👍 - Нет.

🤔 - Я джун.

👉 @sWebDev | #юмор

Работа с 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

Lottie-web

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

👉 @sWebDev

Часто задумываетесь об удобстве пользователей?

❤️ - Да.

👍 - Нет.

👉 @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