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

Textures

3Д анимация фигуры на GSAP.

👉 @sWebDev

RoughNotation

RoughNotation — это JavaScript-библиотека для аннотирования текста и элементов веб-страниц с использованием «грубых» или рисованных стилей, похожих на ручные зарисовки.

👉 @sWebDev

У вас уже наступил год "Х"?

👍 - Да.

❤️ - Пусть учатся понимать.

👉 @sWebDev | #юмор

Imbue loader v0.4

Анимированный загрузчик с колбой на Anime.js.

👉 @sWebDev

Использование useFieldArray в React

useFieldArray — это хук из библиотеки React Hook Form, помогающий управлять массивами полей в динамических формах.

Пример:

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';

function DynamicForm() {
  const { control, handleSubmit } = useForm({ defaultValues: { items: [''] } });
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <Controller
            name={`items[${index}]`}
            control={control}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append('')}>Добавить элемент</button>
      <input type="submit" />
    </form>
  );
}

export default DynamicForm;

👉 @sWebDev

Как вы думаете, можно ли стать хорошим разработчиком, пропуская основы?

❤️- ChatGPT решит все мои проблемы.

👍 - Может быть, но лучше знать основы.

🤔 - Нет.

👉 @sWebDev | #юмор

Работа с ViewContainerRef в Angular

Какой декоратор используется для доступа к ViewContainerRef в компоненте?

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

👉 @sWebDev

Micromodal.js

MicroModal.js — это легковесная JavaScript-библиотека для создания модальных окон. Она очень проста в использовании и предназначена для того, чтобы модальные окна были доступны для всех пользователей, включая тех, кто использует клавиатуру и экранные читалки. Поддерживает как обычные модальные окна, так и многостраничные с навигацией между ними. MicroModal.js минималистична по дизайну, что позволяет легко кастомизировать её под нужды конкретного проекта.

👉 @sWebDev

Pattern

Интерактивная абстрактная анимация на GSAP.

👉 @sWebDev

Google Translate может сломать React приложение

Статья обсуждает проблему, связанную с использованием Google Translate в приложениях на React, которая вызывает сбои. Автор описывает, как именно Google Translate конфликтует с React-компонентами, и предлагает возможные решения для устранения этих сбоев.

👉 @sWebDev

Intro grid section

Анимированная галерея на GSAP.

👉 @sWebDev

Jdenticon

Jdenticon — это JavaScript-библиотека для генерации уникальных идентиконов (графических аватаров), основанных на хэшах данных. Она создает изображения в формате SVG, которые можно использовать как уникальные иконки для пользователей, файлов или других объектов, где требуется визуальная идентификация. Это особенно полезно в тех случаях, когда нужно быстро создать аватары для пользователей на основе их идентификаторов (например, email или ID), не прибегая к хранению изображений.

👉 @sWebDev

Коллективизация.

👉 @sWebDev | #юмор

Alarm Clock

Трехмерная анимация будильника на Three.JS.

👉 @sWebDev

Оптимизация производительности в Angular

ChangeDetectionStrategy.OnPush работает по принципу, что изменения в компоненте должны происходить только в следующих случаях:

1. Изменение входного свойства (@Input).
2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или Promise.

Для использования этой стратегии, в декораторе компонента нужно задать свойство changeDetection:

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div>
      <p>{{ user.name }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };
}

В примере компонент UserComponent будет проверять изменения только тогда, когда свойство user изменяется. Это значит, что если родительский компонент обновляется, но свойство user остается неизменным, UserComponent не будет проходить процесс проверки изменений.

👉 @sWebDev

Жизненно?

❤️ - Да.

👍 - Нет.

👉 @sWebDev | #юмор

Работа с ComponentFactoryResolver в Angular

Для чего используется ComponentFactoryResolver в Angular?

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

👉 @sWebDev

Rivets.js

Rivets.js – это библиотека для привязки данных (data-binding) в JavaScript, которая позволяет легко связывать данные с HTML элементами. Она работает по принципу MVVM (Model-View-ViewModel) и обеспечивает двустороннюю привязку данных.

👉 @sWebDev