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

Насколько вы зависите от ИИ при разработке? 👍 – Почти не использую, сам справляюсь. ❤️ – ChatGPT — мой напарник. 👉 @sWebDev | #юмор

✅ Сохраняйте мегашпаргалку с полезными нейросетями на все случаи жизни от Сергея Фролова. Вот самое крутое: 🤩Claude 3.7 Sonnet — мастхев для программистов 🤩Skyreels AI — превращает любой текст в длинное видео 🤩Openrouter — доступ ко всем ИИ 🤩Suno AI — своя музыка с нейросетью Подпишись и находи для себя мощные нейросети бесплатно: https://t.me/+VjFnutGM-r1lNmQy

Heatmap 3D Анимация планеты на Three.js. 👉 @sWebDev

Изоляция внедрения зависимостей Флаг InjectFlags.SkipSelf позволяет пропустить текущий инжектор и искать зависимость в родительских инжекторах. Это используется, когда в компоненте не должно быть локальных определений сервиса, а требуется внедрить его из вышестоящего уровня, например, из родителя или модуля. Например, компонент внедряет ConfigService, но пропускает локальный провайдер и получает зависимость извне:

import { Component, Inject, inject, InjectionToken, InjectFlags } from '@angular/core';

export const CONFIG_TOKEN = new InjectionToken<string>('Config');

@Component({
  selector: 'child-component',
  template: `Config: {{ value }}`,
  providers: [{ provide: CONFIG_TOKEN, useValue: 'локальная конфигурация' }]
})
export class ChildComponent {
  value = inject(CONFIG_TOKEN, InjectFlags.SkipSelf);
}

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

Что больнее для разработчика? 👍 - Увидеть 502 на своем проекте. ❤️ - Объяснять пользователю, что роутер тут ни при чем. 👉 @sWebDev | #юмор

Тип представления в Angular Какой тип представления в Angular представляет собой экземпляр шаблона, а не компонента? Забыли? Вернитесь к посту от 07.04.2025. 👉 @sWebDev

Slideout.js Slideout.js — небольшая библиотека для создания боковых выезжающих меню. Поддерживает свайпы, не зависит от сторонних фреймворков и подходит для адаптивных интерфейсов на мобильных и десктопных устройствах. 👉 @sWebDev

👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻👩‍💻 Сливаем вам базу с курсами и книгами от известных онлайн школ по Frontend: (23 ГБ) — Основы веба (46 ГБ) — HTML/CSS/Верстка (53 ГБ) — JavaScript (31 ГБ) — React (17 ГБ) — TypeScript (33 ГБ) — Vue / Angular / Svelte (56 ГБ) — Webpack / Vite / Git (43 ГБ) — Next.js / Nuxt.js (68 ГБ) — Figma и Веб-дизайн (76 ГБ) — Анимации и UI/UX (44 ГБ) — WordPress (37 ГБ) — Архитектура фронтенда (21 ГБ) — Тестирование фронта Скачивать ничего не нужно — все выложили в Telegram

Animated Galaxy and Ribbons Анимация галактики на Three.js. 👉 @sWebDev

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

LinkedSignal в Angular 19: управление состоянием, зависящим от других сигналов Когда одно состояние зависит от другого, легко запутаться в логике обновлений. linkedSignal решает эту проблему — он синхронизирует изменения автоматически, упрощая управление связанными данными в компонентах. В статье — разбор, чем linkedSignal отличается от других сигналов, и как применять его в реальных сценариях, чтобы избежать лишней логики и багов. 👉 @sWebDev

Dynamic Lens Flare Shader Интерактивная анимация фона на Three.js. 👉 @sWebDev

⚡️ Дождались! Ребята сделали крутейший канал про Frontend Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами Подписывайтесь: @FrontendPortal

Notie Notie — это минималистичная библиотека для отображения уведомлений, подтверждений и запросов в браузере. Не требует зависимостей, легко настраивается и подходит для быстрого информирования пользователя без перегрузки интерфейса. 👉 @sWebDev

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

Shader & Light Experiments Анимация освящения фона на Three.js. 👉 @sWebDev

Бесплатное льготное обучение: 3 месяца Ищем людей, которые хотят обучиться и работать в IT-сфере из дома В конце обучения вы пройдете стажировку и устроитесь на работу с зп от 150.000 рублей Образование, место жительства, трудовой стаж — не важны! Для старта нужно: — пройти короткий тест — заполнить анкету На что можно рассчитывать, после обучения: ✅ удаленная работа ✅ зп от 150.000 рублей (потолка нет) ✅ стабильная подработка, если не хотите уходить с основной работы ⚡ Осталось всего 47 бесплатных мест. Успейте пройти тест и оставить заявку: Узнать больше #реклама 16+ technolium.ru О рекламодателе

Ручной запуск обновления Метод ɵmarkDirty() в Angular вручную помечает компонент как «грязный», инициируя обновление при следующем цикле детекции изменений. Это используется вне зоны Angular (например, в стороннем коде), и работает только с ChangeDetectionStrategy.OnPush.

import {
  Component,
  ChangeDetectionStrategy,
  ɵmarkDirty
} from '@angular/core';

declare const externalClick: (cb: () => void) => void;

@Component({
  selector: 'app-alert',
  template: `<p *ngIf="visible">Внешнее событие!</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlertComponent {
  visible = false;

  ngOnInit() {
    externalClick(() => {
      this.visible = true;
      ɵmarkDirty(this);
    });
  }
}

В этом примере внешний обработчик (externalClick) активирует компонент, не запуская Angular change detection. Мы вручную вызываем ɵmarkDirty(this), чтобы Angular отрендерил компонент на следующем проходе. 👉 @sWebDev

А каким «файлообменником» пользуетесь вы? 👍 – GitHub или Гугл-диск. ❤️ – Фотографирую код и отправляю в мессенджеры. 👉 @sWebDev | #юмор