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

Чувствуете ли вы, что ваш реальный уровень веб-разработки полностью соответствует вашей текущей должности? 👍 – Да, мое внутреннее ощущение совпадает с должностью. ❤️ – Чувствую, что мой реальный уровень ниже, чем моя должность. 🤔 – Чувствую, что мой реальный уровень выше, чем моя должность. 👉 @sWebDev | #юмор

Интерактивная сетка Интерактивная сетка из кругов на GSAP. 👉 @sWebDev

Получение шаблонов через ContentChildren и TemplateRef Параметр read: TemplateRef в декораторе ContentChildren позволяет получить доступ именно к шаблонам, переданным в компонент через <ng-content>, что важно, когда требуется отрисовать вложенные ng-template вручную, а не просто вставить контент. Angular по умолчанию ищет компоненты, но при указании read можно получить доступ к объектам TemplateRef.

import { Component, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'template-container',
  template: `<ng-container *ngTemplateOutlet="templates[0]"></ng-container>`,
})
export class TemplateContainerComponent implements AfterContentInit {
  @ContentChildren(TemplateRef, { read: TemplateRef }) templates!: QueryList<TemplateRef<any>>;

  ngAfterContentInit() {
    console.log('Шаблонов передано:', this.templates.length);
  }
}

В примере компонент получает все ng-template, переданные в него, и может использовать любой шаблон вручную. 👉 @sWebDev

Как вы реагируете на критику вашего кода? 👍 – Избегаю разговор. ❤️ – Принимаю к сведению. 🤔 – Готовлю аргументы для защиты. 👉 @sWebDev | #юмор

Работа с хуком unstable_useCacheRefresh Что позволяет сделать хук unstable_useCacheRefresh()? Забыли? Вернитесь к посту от 12.05.2025. 👉 @sWebDev

AutoComplete.js AutoComplete.js — JavaScript-библиотека для создания быстрого и адаптивного автозаполнения. Поддерживает динамические и статические источники данных, кастомизацию шаблонов и событий. Подойдёт для форм, поисковых строк и интерфейсов с предсказанием ввода. 👉 @sWebDev

Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

МТС приглашает разработчиков на масштабную ИТ-конференцию True Tech Day 6 июня. Участие бесплатное. В программе — спикеры российского и международного ИИ-рынка, лидеры бигтехов и ученые. Тебя ждут 4 трека и 40+ докладов. Какие темы будем обсуждать: — GPT для роботов: как ИИ учится взаимодействовать с реальным миром. — Мультиагенты — главный AI-тренд 2025. Речь не просто о чат-ботах, а о системах, которые умеют спорить, сотрудничать и достигать целей. — Автоматизация архитектурных аудитов с помощью ИИ: создание архитектурного datalake для сбора данных из Git, Kubernetes, мониторинга и других источников. — Новая архитектура под AI: что приходит на смену микросервисам и как архитектор становится дизайнером когнитивного интерфейса. — Архитектура «as code»: как автоматизировать проверку актуальности схем и генерировать их из реальной инфраструктуры, чтобы разработка всегда соответствовала замыслу архитектора. — Разбор RAG: что это, зачем нужно, архитектурные подходы и их слабые места, как измерять качество и избегать ложных метрик. Среди спикеров: Иван Оселедец (AIRI), Пабло дель Веккио (NTT DATA), Кен Чжун Ли (Kyung Hee University), Алексей Друца (Яндекс), Александр Абрамов (Сбер), Павел Бабин (MWS GPT), Валентин Малых (MTS AI), Антон Скогорев (Т-Банк), Артем Якимчук (Сколтех) и другие эксперты. Тебе точно стоит быть, если ты: — разработчик, архитектор или технический руководитель; — хочешь понять, что реально работает, а что — хайп. Когда: 6 июня Где: Москва, МТС Live Холл и онлайн Регистрация по ссылке.

Interactive 3D Birthday Cake Celebration Интерактивная анимация открытки с тортом на Three.js. 👉 @sWebDev

Гексагональная архитектура с NgRx Signal Store в Angular Статья объясняет, как использовать гексагональную архитектуру при работе с NgRx Signal Store и Angular Signals. Данный подход позволяет изолировать бизнес-логику от инфраструктурных деталей, повысить модульность и упростить тестирование. 👉 @sWebDev

Dot Controls Стилизованные интерактивные слайдеры на Draggable.js. 👉 @sWebDev

Yall.js Yall.js — легковесная библиотека для ленивой загрузки изображений и видео с использованием Intersection Observer. Работает без зависимостей и подходит для оптимизации скорости загрузки страниц в проектах с большим количеством медиа. 👉 @sWebDev

Откуда реально пришли ваши ключевые знания по программированию? 👍 – Из курсов. ❤️ – Из бессонных ночей с гуглом и форумами. 🤔 – Разбор чужого кода и практика. 👉 @sWebDev | #юмор

Draggable SVG Logo Логотип с эффектом перетаскивания на GSAP и Draggable.js. 👉 @sWebDev

Курсы JAVA-разработки Гарантия ЗП от 120 000р в договоре Jаvа — это язык, на котором строятся банковские системы, мобильные приложения, крупные веб-сервисы и многое другое, а спрос на Jаvа-разработчиков стабильно высок. Благодаря кроссплатформенности и надежности, ты сможешь работать в любой сфере IТ — от финансов до Коммерческой отрасли.📊💰 Почему это работает?✨ - Минимальные вложения. - Тысячи человек уже в IТ. Наши выпускники работают в крутых компаниях: от стартапов до международных корпораций. - Наши менторы — это опытные разработчики, которые ежедневно работают в IТ и готовы делиться актуальными знаниями. P.S. Если всё ещё сомневаешься и думаешь что будет сложно — просто попробуй.😊 Мы берем на себя все риски: ты оплачиваешь основную стоимость обучения только после успешного трудоустройства — это закреплено в договоре. Подать заявку #реклама 16+ kata.academy О рекламодателе

Очистка ресурсов через DestroyRef.onDestroy() DestroyRef предоставляет метод onDestroy(), с помощью которого можно зарегистрировать функцию, выполняемую при уничтожении экземпляра. Данный способ подходит для отписки от Observable, остановки таймера или удаления обработчика событий без реализации интерфейса OnDestroy.

import { Component, inject, DestroyRef } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'demo-ticker',
  template: `<p>{{ tick }}</p>`,
})
export class TickerComponent {
  tick = 0;
  private sub: Subscription;

  constructor() {
    const destroyRef = inject(DestroyRef);

    this.sub = interval(1000).subscribe(v => (this.tick = v));

    destroyRef.onDestroy(() => {
      this.sub.unsubscribe();
      console.log('Подписка завершена');
    });
  }
}

Зарегистрированная функция выполняется при уничтожении компонента. Такой подход помогает избежать утечек памяти и использовать лаконичную форму очистки. 👉 @sWebDev

Сталкивались с такими крайностями в комментариях к патчам в реальной жизни? 👍 – Да, с минимализмом на больших патчах постоянно. ❤️ – С графоманией на маленьких — редко, но метко. 🤔 – Я сам иногда грешу то в одну, то в другую сторону. 👉 @sWebDev | #юмор

Как новичку в IT найти работу? Опытный IT-рекрутер бесплатно делится секретами внутренней кухни в TG-канале "Вакансии и стажировки в IT". 📱Не потеряй ссылку на канал Подписаться #реклама 16+ О рекламодателе