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

ChangeDetectorRef для ручного контроля изменений в компонентах ChangeDetectorRef — инструмент в Angular, позволяющий управлять обнаружением изменений в компонентах вручную. Это особенно полезно, когда автоматическое обнаружение изменений (change detection) не может уловить изменения состояния, например, при работе с асинхронными операциями или сторонними библиотеками, которые Angular не отслеживает по умолчанию. Методы markForCheck() и detectChanges() позволяют более гибко управлять процессом обновления компонента. Например, если нужно обновить представление при изменении данных, полученных через сторонний API, можно вызвать detectChanges() после обновления данных:

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

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData: string) {
    this.data = newData;
    this.cdr.detectChanges();
  }
}

👉 @sWebDev

Считаете ли свой интерфейс интуитивно понятным? 👍 — Да, 100%. ❤️ — Нет, могло быть и лучше. 👉 @sWebDev | #юмор

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

Работа с декоратором Optional() Что произойдет, если @Optional() зависимость не найдена? Если забыли, то вернитесь к посту от 28.10.2024. 👉 @sWebDev

Peg.js Peg.js — парсер-генератор на JavaScript, позволяющий создавать парсеры для специализированных языков и грамматик. Использует PEG (Parsing Expression Grammar) для описания правил синтаксического анализа. 👉 @sWebDev

Froot Looper: SVG Анимация коробки на GSAP. 👉 @sWebDev

Управление типами кортежей в TypeScript Статья рассказывает о работе с типами кортежей в TypeScript и их манипуляции. Автор делится подходами к использованию кортежей для создания более точных и гибких типов данных, объясняя, как преобразовывать кортежи, добавлять и удалять элементы, менять порядок и использовать деструктуризацию. Статья помогает понять, как кортежи могут улучшить точность типизации и структурирование данных в TypeScript. 👉 @sWebDev

Simple Three.js matcap demo Простой пример использования matcap в Three.js. 👉 @sWebDev

Progressive-Image.js Progressive-Image.js — библиотека для плавной загрузки изображений. Сначала отображает размытое мини-изображение, которое заменяется на полное по мере загрузки, что улучшает UX. 👉 @sWebDev

Важен ли для вас оффлайн без куков и рекламы? 👍 — Да. ❤️ — Мне не принципиально. 👉 @sWebDev | #юмор

Giraffe: SVG Painting Странная анимация жирафа на GSAP. 👉 @sWebDev

Курс по frontend-разработке с junior до middle Стань специалистом по frontend-разработке с помощью менторов. Оставь заявку! Узнать больше #реклама 16+ ykul.ru О рекламодателе

Декоратор @ViewChild с опцией { static: true } в Angular @ViewChild в Angular предоставляет доступ к элементам DOM и дочерним компонентам в шаблоне. Опция { static: true } позволяет получить ссылку на элемент до инициализации представления, что полезно в случаях, когда к элементу нужно обратиться в ngOnInit. Когда у @ViewChild установлено { static: true }, ссылка будет доступна в ngOnInit, а не только в ngAfterViewInit. Это может быть полезно для предварительной инициализации значений, которые зависят от состояния элементов шаблона. Например:

@ViewChild('myElement', { static: true }) myElement!: ElementRef;

ngOnInit() {
    console.log(this.myElement.nativeElement); // доступно уже здесь
}

Важно помнить, что если элемент в шаблоне может быть динамически добавлен или удален с помощью *ngIf, лучше использовать { static: false }, так как это предотвратит ошибки в доступе к элементу. 👉 @sWebDev

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

Как думаете сколько здесь? 👍 - 250px. ❤️ - 25px. 👉 @sWebDev | #юмор

Работа с методом trackBy Для чего используется TrackBy в Angular? Если забыли, то вернитесь к посту от 21.10.2024. 👉 @sWebDev

TypeIt TypeIt – это библиотека JavaScript для анимации ввода текста. Она позволяет анимировать процесс набора текста прямо на странице, имитируя реальное написание. 👉 @sWebDev

Закрытый клуб для айтишников FAANG School, чьи выпускники работают в Яндексе, СБЕРЕ и других гигантах, запустили бесплатное сообщество для всех, кто изучает Java. Общайся в ламповом чате с такими же людьми «в теме», получай фидбек у опытных разрабов и черпай практические рекомендации от экспертов школы. В чате уже больше 10 000 человек, а новенькие, которые подключатся сейчас, получат доступ к большой библиотеке Java Junior с полезными материалами: – Пошаговая RoadMap по Java – Мануал по Docker. Основные команды и концепции – Микросервисы. Вопросы с собеседований – Шпаргалка по Kafka – Инструкция по работе с Git – Подробный гайд, как найти работу в IT без опыта – Подборка платформ с вакансиями для java-разработчиков Вступай сейчас. Открыли доступ всего на 24 часа!