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

Все новости из мира программирования на этом канале @umnyiprogrammist Подписывайтесь, чтобы не упустите ничего важного

System Overheat Пиксельная анимация фона на Three.js. 👉 @sWebDev

Признаемся в любви к фронтенду 💛 15 февраля Яндекс проведет ежегодную конференцию для всех, кто живет фронтендом «Я💛Фронтенд» В офлайн части вас ждут: 🔸 Выступления топовых спикеров, дискуссии и новости frontend-сообщества 🔸 CodeRun — формат решения задач, где нужно управлять котиком Кодеруном: он ловит спецсимволы, и на их основе вы пишите код 🔸 Code in the dark — батл по вёрстке с Yandex Code Assistant 🔸 Разбор задач с экспертами Яндекса в формате мастермайнда Не забываем про онлайн — следите за обновлениями сайта. Регистрация на конфу открыта до 12 февраля.

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

Поменяй свою жизнь - будь программистом! Обучение с нуля ⚡Если ты устал от работы в офисе и хочешь поменять свою жизнь - тебе к нам! Мы научим тебя Java разработке, а также поможем найти первую работу в IT. Не упускай шанс поменять свою жизнь, приходи к нам на бесплатный урок, который состоится 15 февраля 2025г.. Каждому, кто будет с нами на уроке, мы подарим скидку 10% на обучение! Переходи в наш канал, чтобы записаться ✅ Узнать больше #реклама 16+ О рекламодателе

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

Господи, да в чём проблема стать фронтендером? Подписался на этот канал: 👉 Фронтенд Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

Interactive Core with Dynamic Rings and Particles Интерактивная анимация ядра на Three.Js. 👉 @sWebDev

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

Изнанка PPC-трафика Недорогого и разнообразного интернет-маркетинга в России больше нет, за последние три года все сильно изменилось, но да вы и сами это знаете... Рассказываю на канале о том что рекламные площадки очень хотели бы скрыть и как выжить ppc-специалисту в эпоху новой реальности, залетайте) Смотреть #реклама О рекламодателе

Знакомо? 👍 - Очень. ❤️ - Особенно когда путают 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 | #юмор