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

В канале Selectel Newsfeed новые бесплатные курсы! Наши бесплатные курсы для специалистов всех уровней помогут разобраться в темах быстро, структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel и развивайте новые навыки📚 Смотреть #реклама 16+ О рекламодателе

Часто отвлекаетесь на что-то в компе? 👍 - Постоянно. ❤️ - Нет, только если в перерывах. 🤔 - Скорее отвлекаюсь на код. 👉 @sWebDev | #юмор

Работа с ChangeDetectorRef.detach() Для чего используется метод ChangeDetectorRef.detach()? Если забыли, то вернитесь к посту от 10.02.2025. 👉 @sWebDev

Midnight.js Midnight.js — это небольшая библиотека JavaScript, которая позволяет динамически изменять цвет навигационной панели в зависимости от фона, над которым она находится. Работает путем определения родительского элемента и применения соответствующих CSS-классов при прокрутке страницы. 👉 @sWebDev

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Пример midnight.js Анимация с примером реализации библиотеки midnight.js. 👉 @sWebDev

Тестирование React-хуков с помощью Vitest В статье обсуждается, как эффективно тестировать пользовательские хуки в React, используя библиотеку Vitest. Рассматриваются методы настройки среды тестирования с помощью JSDOM, применения React Testing Library для рендеринга хуков и использования функций spyOn и waitFor для тестирования асинхронной логики и внешних API-вызовов. 👉 @sWebDev

Spline of frames Анимация пленки с фотографиями на Three.js. 👉 @sWebDev

Booking.js Booking.js — это библиотека для создания пользовательских интерфейсов бронирования с интуитивно понятным выбором дат. Она ориентирована на веб-приложения, требующие функционала бронирования, например, аренду жилья или услуги. 👉 @sWebDev

Какой вариант ветки вам удобнее? 👍 – Main, уже привык. ❤️ – Master, так исторически сложилось. 🤔 – О чем вообще речь? 👉 @sWebDev | #юмор

Custom Cursor Анимация курсора на Anime.js. 👉 @sWebDev

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

Рендеринг длинных списков без потерь производительности в Angular В Angular рендеринг длинных списков может перегружать DOM, снижая производительность. CdkVirtualScrollViewport из Angular CDK решает эту проблему, рендеря только видимые элементы. Пример:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

Этот компонент создает виртуальный список, динамически заменяя элементы при прокрутке. В памяти остается только небольшое количество элементов, необходимое для отображения. Дополнительно можно задать динамическую высоту элементов:

<cdk-virtual-scroll-viewport [itemSize]="getItemSize()" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

getItemSize() {
  return window.innerWidth > 768 ? 50 : 100;
}

Это позволяет адаптировать высоту элементов к ширине экрана, улучшая UX. 👉 @sWebDev

Что делать, если прод упал? 👍 – Пинать сервер. ❤️ – Брать больничный. 🤔 – Искать баг. 👉 @sWebDev | #юмор

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

Canvg Canvg — библиотека, которая позволяет рендерить SVG-контент на <canvas> HTML5. Полезна для работы с графикой в браузерах, которые не поддерживают SVG в полной мере или требуют манипуляций с графикой. 👉 @sWebDev

WaVvVvVvVeSsS Анимация волн на GSAP. 👉 @sWebDev

Квартиры в ЖК SOKOLNIKI! Рассрочка до 2,5 лет, ПВ от 10% Видовые квартиры бизнес+ класса возле парка от 28 м² от 400 000 руб./м² Первый взнос от 10% Гибкие программы рассрочки до 2,5х лет с переходом в ипотеку Квартиры от 28м² до 135м² От студий до семейных фоматов с большими гостиными Колясочные на этаже Все для удобства родителей Дизайнерские лобби Стильные входные группы Подземный паркинг Системы хранения велосипедов и самокатов Детский сад Закрытая территория Девелопер STONE 18 лет на рынке недвижимости. 27 проектов м. "Сокольники", 12 мин. от парка Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО СЗ «КВАРТАЛ СОКОЛЬНИКИ». Финансовые услуги оказывает: ПАО "Совкомбанк". #реклама stone-sokolniki.ru О рекламодателе