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

Poppy Абстрактная анимация мака на Three.js. 👉 @sWebDev

Внедрение необязательных зависимостей в Angular Декоратор @Optional() в Angular используется для указания того, что зависимость может быть необязательной. Если нужная зависимость отсутствует, Angular не выбросит ошибку, а просто передаст null. Это полезно, когда сервис или зависимость может не всегда быть доступна в контексте компонента. Пример:

import { Component, Optional } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-optional-demo',
  template: `<p>Декоратор @Optional() пример</p>`
})
export class OptionalDemoComponent {
  constructor(@Optional() private loggingService: LoggingService) {
    if (this.loggingService) {
      this.loggingService.log('Logging service is available');
    } else {
      console.log('Logging service is not available');
    }
  }
}

В этом примере сервис LoggingService внедряется как необязательный. Если он не зарегистрирован, вместо ошибки просто будет выведено сообщение о его отсутствии. 👉 @sWebDev

Timetta — контроль проектов, ресурсов, финансов и задач Комплексное решение для проектно-ориентированного бизнеса. Приложение для контроля проектов, финансов, ресурсов, времени для средних и крупных команд. ✅Планируйте проекты ✅Оценивайте бюджеты ✅Подбирайте ресурсы ✅Контролируйте задачи Узнать больше #реклама 16+ timetta.com О рекламодателе

HTTP 404 в реальной жизни. 👉 @sWebDev | #юмор

Использование NgClass в Angular Как обычно передаются классы в директиву NgClass? Если забыли, то вернитесь к посту от 07.10.2024. 👉 @sWebDev

Timeago.js Timeago.js — это библиотека для динамического форматирования времени в стиле "3 минуты назад" или "2 часа назад". Она автоматически обновляет текстовую метку времени на основе текущего времени, что удобно для создания лент новостей, чатов и систем комментариев. Библиотека поддерживает множество языков и является легковесной, что делает её отличным выбором для любого веб-приложения. 👉 @sWebDev

Invasive cows Скролл-анимация с коровами на GSAP. 👉 @sWebDev

Хотите стать дизайнером, но не знаете как? Начните с SHADdesign! Уже более 20 лет мы готовим специалистов по дизайну интерьеров, графическому и ландшафтному дизайну, компьютерной графике. У нас есть курсы разного формата: онлайн, офлайн и дистанционно. Для поступления не требуется специальных навыков или знаний. Короткие курсы помогут вам освоить новые направления дизайна, а продолжительные программы обучения дадут полное погружение в профессию. Вы не только соберёте портфолио дизайнера, но и научитесь делать презентации проектов для клиентов. После защиты дипломной работы вы получите Диплом о дополнительном профессиональном образовании. Выбирайте курс и записывайтесь уже сегодня! Мы ждём вас! Узнать больше #реклама 16+ shad.ru О рекламодателе

Представляем @svg-use В статье рассказывается о создании и использовании библиотеки @svg-use для работы с SVG-иконками в JavaScript-приложениях, таких как React. Основное внимание уделено оптимизации загрузки SVG-файлов с помощью <use href>, а не через инлайновые SVG, что снижает нагрузку на JS-бандлы и DOM. Также рассматриваются плюсы и минусы использования этой техники и перспективы для будущих стандартов веб-разработки. 👉 @sWebDev

GSAP GRID Интерактивная сетка с анимациями на GSAP. 👉 @sWebDev

Filesize.js Filesize.js — библиотека для форматирования размера файлов в удобочитаемый вид, например, "1.2 MB" или "150 KB". Она поддерживает различные системы единиц измерения и может округлять значения до нужного количества знаков после запятой. Используется в интерфейсах для отображения информации о размере загружаемых и скачиваемых файлов. 👉 @sWebDev

ИТ-вакансии в Т-Банке Осень закончится, а работа останется. А вместе с ней ДМС, крутые офисы плюс: — Актуальный стек. Здесь следят за трендами и быстро внедряют новое. — Общение на «ты». Так проще. — Прозрачная система роста. Вы всегда будете знать, какие навыки нужно подтянуть и как получить повышение. — Профессионалы, у которых можно многому научиться. А если захотите, сможете стать ментором для младших коллег. Узнать больше #реклама tbank.ru О рекламодателе

А как часто вы видите подобные комментарии в коде? 👍 — Часто. ❤️ — Такие комментарии после меня. 👉 @sWebDev | #юмор

Philosophy any form of art Генератор абстракций на Three.js. 👉 @sWebDev

Оптимизация рендеринга списков в Angular Директива *ngFor в Angular используется для отображения списков, но часто приводит к излишним перерисовкам элементов при изменении данных. Это происходит, если Angular не может правильно сопоставить элементы и считает, что нужно перерисовать весь список. Метод trackBy помогает Angular отслеживать изменения и определять, какие элементы нужно обновить. Пример:

@Component({
  selector: 'app-optimized-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
    </ul>
  `,
})
export class OptimizedListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // Уникальный идентификатор
  }
}

В этом примере Angular будет использовать id как ключ, предотвращая перерисовку элементов при изменении содержимого. 👉 @sWebDev

Что если бы персонажи «Властелина колец» были айтишниками? 👉 @sWebDev | #юмор

Работа с функцией inject() Какая альтернатива используется вместо inject() для инъекции зависимостей в Angular? Забыли? Вернитесь к посту от 30.09.2024. 👉 @sWebDev

ConvNetJS ConvNetJS — это JavaScript-библиотека для построения и обучения нейронных сетей непосредственно в браузере. Она поддерживает сверточные нейронные сети (CNN) и используется для создания моделей глубокого обучения, таких как распознавание изображений и обработка текстов. 👉 @sWebDev