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

Pell

Pell — это минималистичный WYSIWYG-редактор для веба. Он не имеет зависимостей и весит всего около 1.4 KB. Предоставляет базовые функции для форматирования текста, такие как жирный, курсив, подчеркивание, ссылки, списки и заголовки. Pell подходит для случаев, когда нужен простой текстовый редактор без лишнего функционала.

👉 @sWebDev

Магия CSS

.window.top { 
  position: absolute;
  transform: rotate(120deg);
  overflow: hidden;
}

👉 @sWebDev | #юмор

System Overheat

Пиксельная анимация фона на Three.js.

👉 @sWebDev

Использование ChangeDetectorRef.detach() в Angular

Метод ChangeDetectorRef.detach() позволяет отключить компонент от системы обнаружения изменений. Это полезно, если компонент не должен отслеживать изменения постоянно. После вызова detach() Angular перестанет проверять компонент и его потомков на изменения, пока вы не вызовете обновление вручную через detectChanges().

Пример:

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

@Component({
  selector: 'app-performance',
  template: `<div>{{ counter }}</div>`
})
export class PerformanceComponent {
  counter = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.cdr.detach(); // Отключаем отслеживание изменений
    setInterval(() => {
      this.counter++; // Обновляем данные
      this.cdr.detectChanges(); // Вручную запускаем проверку изменений
    }, 1000);
  }
}

В этом примере ChangeDetectorRef.detach() отключает систему обнаружения изменений, а вызов detectChanges() вручную обновляет интерфейс.

👉 @sWebDev

Бывает что устаёте от удаленки?

👍 - Бывает.

❤️ - От хорошего не устают.

👉 @sWebDev | #юмор

Работа с методом ApplicationRef.tick

Для чего используется метод ApplicationRef.tick()?

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

👉 @sWebDev

Canvg

Canvg — библиотека, которая позволяет рендерить SVG-контент на <canvas> HTML5. Это полезно для работы с графикой в браузерах, которые не поддерживают SVG в полной мере или требуют манипуляций с графикой.

👉 @sWebDev

3D Pyramid Animation

Анимация пирамид на Three.js.

👉 @sWebDev

Как работают React Server Components и Server Actions

Статья объясняет, как использовать React Server Components (RSC) и Server Actions. Рассматриваются их основные принципы, способы рендеринга (SSR, CSR, Hydration), а также процесс сборки с помощью Webpack и Turbopack. Подробно разбираются подходы к объединению клиентских и серверных компонентов.

👉 @sWebDev

Interactive Core with Dynamic Rings and Particles

Интерактивная анимация ядра на Three.Js.

👉 @sWebDev

GrapesJS

GrapesJS — библиотека для создания визуальных редакторов веб-страниц. Она позволяет строить редакторы, где пользователи могут создавать и редактировать HTML/CSS с помощью drag-and-drop.

👉 @sWebDev

Знакомо?

👍 - Очень.

❤️ - Особенно когда путают Java и JS.

👉 @sWebDev | #юмор

Resend Cube

Анимация куба на Three.js.

👉 @sWebDev

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы.

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Промокод сообщества
react_crew_2_oMGfq4 даёт скидку в 500 руб 🥳

Использование 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