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

Использование runInInjectionContext() для доступа к DI вне компонентов В Angular инъекция зависимостей (DI) обычно применяется в компонентах и сервисах с использованием декораторов. Однако, если необходимо использовать DI в обычных функциях или классах без Angular-декораторов, можно воспользоваться методом runInInjectionContext(). Пример:

import { inject, runInInjectionContext, Injectable, EnvironmentInjector } from '@angular/core';

@Injectable({ providedIn: 'root' })
class MyService {
  logMessage() {
    console.log('Hello from MyService!');
  }
}

function executeWithDI(injector: EnvironmentInjector) {
  runInInjectionContext(injector, () => {
    const myService = inject(MyService);
    myService.logMessage();
  });
}

В этом примере функция executeWithDI принимает EnvironmentInjector и использует runInInjectionContext() для создания контекста инъекции. Внутри этого контекста вызывается функция inject() для получения экземпляра MyService, после чего вызывается метод logMessage(). 👉 @sWebDev

Жизненно? ❤️ - Да. 👍 - Нет. 👉 @sWebDev | #юмор

Работа с AnimationTrigger Для чего используется AnimationTrigger в Angular? Забыли? Вернитесь к посту от 13.01.2025. 👉 @sWebDev

Scrollama Scrollama — это JavaScript-библиотека для создания скролл-зависимых интерактивных элементов с использованием Intersection Observer API. Она позволяет управлять анимациями или изменениями в интерфейсе, основанными на прокрутке страницы. 👉 @sWebDev

3D AI Interface Animation Анимация иконки ИИ на Three.js. 👉 @sWebDev

Лучшие практики разработки сложных приложений с формами на основе React Hook Form с поддержкой TypeScript Статья посвящена рекомендациям по созданию сложных форм в приложениях на React с использованием библиотеки React Hook Form и TypeScript. 👉 @sWebDev

Animated Rings Анимация металлических колец на p5js. 👉 @sWebDev

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 30 января в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

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

Новые бесплатные курсы в канале Selectel Newsfeed. Подойдут всем: от новичков до продвинутых айтишников. Вас ждут обзоры, инструкции и статьи, которые помогут разобраться в темах структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel. Подписаться #реклама 16+ О рекламодателе

А у вас тоже собеседование было сложнее чем сама работа? 👍 - 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

Профессиональная конференция по UX/UI 22 февраля в Москве пройдёт профильная UX/UI конференция для тех, кто проектирует и создаёт интерфейсы. 20+ экспертов топовых digital-агентств и RnD. 3 потока докладов. Кейсы от ведущих агентств. Активный нетворкинг. Афтепати в завершении дня. Программа и билеты на сайте. Узнать больше #реклама uxuiconf.ru О рекламодателе

Вы часто откладываете задачи на потом? ❤️ - Нет, стараюсь делать все поэтапно. 👍 - Предпочитаю отдохнуть, а потом страдать в последний момент. 👉 @sWebDev | #юмор

Victory Park Residences – эксклюзивно в Парке Победы Рассрочка 0% на 2 года на квартиры и пентхаусы. Жизнь в окружении парков и знаковых мест Москвы. Парк Победы, Кутузовский проспект, Триумфальная арка. Три вида премиальной отделки. Подземный паркинг. Детейлинг-центр премиального уровня на паркинге. Дома готовы. Ключи в 1 кв. 2025 Узнать больше Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО "Специализированный застройщик "Фонченко" #реклама vp.moscow О рекламодателе

Назначение декоратора ＠SkipSelf() Для чего используется декоратор @SkipSelf()? Забыли? Вернитесь к посту от 06.01.2025. 👉 @sWebDev

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