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

3D AI Interface Animation

Анимация иконки ИИ на Three.js.

👉 @sWebDev

Лучшие практики разработки сложных приложений с формами на основе React Hook Form с поддержкой TypeScript

Статья посвящена рекомендациям по созданию сложных форм в приложениях на React с использованием библиотеки React Hook Form и TypeScript.

👉 @sWebDev

Animated Rings

Анимация металлических колец на p5js.

👉 @sWebDev

GPU.js

GPU.js — это библиотека для выполнения сложных вычислений на GPU с использованием JavaScript. Она автоматически компилирует код JavaScript в WebGL-шейдеры для параллельных вычислений.

👉 @sWebDev

А у вас тоже собеседование было сложнее чем сама работа?

👍 - 100%.

❤️ - Не сказал бы.

🤔 - Не знаю, у меня еще нет работы.

👉 @sWebDev | #юмор

Background with Anime.Js

Анимация фона на Three.js.

👉 @sWebDev

Angular сервис ErrorHandler с RetryWhen

В Angular сервис ErrorHandler можно расширить для создания продвинутой системы обработки ошибок. Совместно с оператором retryWhen, можно добавить автоматические повторные запросы с экспоненциальной задержкой.

Пример: кастомный ErrorHandler с повторной попыткой запроса.

typescriptimport { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { retryWhen, delay, scan } from 'rxjs/operators';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  constructor(private http: HttpClient) {}

  retryRequest(url: string) {
    this.http.get(url).pipe(
      retryWhen(errors =>
        errors.pipe(
          scan((attempts) => {
            if (attempts >= 5) throw errors;
            return attempts + 1;
          }, 0),
          delay(attempts => Math.pow(2, attempts) * 1000) // Экспоненциальная задержка
        )
      )
    ).subscribe(data => console.log('Success:', data));
  }
}

👉 @sWebDev

Вы часто откладываете задачи на потом?

❤️ - Нет, стараюсь делать все поэтапно.

👍 - Предпочитаю отдохнуть, а потом страдать в последний момент.

👉 @sWebDev | #юмор

Назначение декоратора ＠SkipSelf()

Для чего используется декоратор @SkipSelf()?

Забыли? Вернитесь к посту от 06.01.2025.

👉 @sWebDev

Unpoly

Фреймворк для асинхронного обновления частей страницы. Позволяет обновлять только нужные элементы DOM, избегая полной перезагрузки. Отлично подходит для серверно-рендерных приложений, ускоряет их работу, поддерживает управление историей браузера и оптимизирован для SEO.

👉 @sWebDev

A Bed Room

Диорама комнаты на Three.js.

👉 @sWebDev

Как React-компилятор работает с реальным кодом

В статье рассматривается влияние React-компилятора на производительность приложений. Автор анализирует, как компилятор улучшает начальную загрузку и взаимодействие с приложением, а также оценивает его эффективность в предотвращении избыточных повторных рендеров. Для этого проводятся тесты на реальном приложении с предоставлением количественных результатов.

👉 @sWebDev

3D Shape Morphing in Three.js

Морфинг 3D фигур на Three.js.

👉 @sWebDev

Lit

Библиотека для создания веб-компонентов с минимальным весом (~5 КБ). Использует стандартные HTML-шаблоны и JavaScript, эффективно обновляет только изменённые части DOM.

👉 @sWebDev

Важна ли для вас универсальность языка?

❤️ - Не особо, лучше специализироваться на чем-то конкретном.

👍 - Да, от этого язык становится привлекательнее.

👉 @sWebDev | #юмор

Valorant Character Select Animation

Анимация выбора персонажа на Anime.js

👉 @sWebDev

Ручное обновление дерева компонентов

В Angular метод ApplicationRef.tick() используется для запуска цикла обнаружения изменений вручную. Это полезно, когда изменения происходят вне зоны Angular, например, в callback-функциях или таймерах.

Пример:

typescript  
import { ApplicationRef, Component } from '@angular/core';  

@Component({  
  selector: 'app-manual-tick',  
  template: `<p>{{ message }}</p>`,  
})  
export class ManualTickComponent {  
  message = 'Ожидание...';  

  constructor(private appRef: ApplicationRef) {  
    setTimeout(() => {  
      this.message = 'Изменение произошло';  
      this.appRef.tick(); // Обновляем вручную  
    }, 3000);  
  }  
}  

Без вызова tick() изменения в message не были бы отражены в шаблоне, так как они происходят вне зоны Angular.

👉 @sWebDev

Вас когда-нибудь подводило автодополнение?

👍 - Нет, сразу замечаю.

❤️ - Мягко сказано.

👉 @sWebDev | #юмор