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

Подписка на внешний стор с выборкой Хук useSyncExternalStoreWithSelector() используется для подписки на внешний стор с избирательным обновлением компонента. Он расширяет useSyncExternalStore() за счёт функции выбора и сравнения: обновление вызывается только при изменении выбранного значения. Это снижает количество перерендеров при работе с глобальным состоянием.

import { useSyncExternalStoreWithSelector } from 'react';

function useCustomStore(selector, isEqual) {
  return useSyncExternalStoreWithSelector(
    subscribe, // подписка на стор
    getSnapshot, // получение полного состояния
    getSnapshot, // серверный snapshot
    selector, // выбор нужного значения
    isEqual // функция сравнения
  );
}

При вызове хука можно передать selector, чтобы отслеживать только часть состояния, и isEqual, чтобы предотвратить обновление при эквивалентных значениях. Может пригодиться при подписке на сложные сторы, например, Redux без лишних обёрток. 👉 @sWebDev

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

Результат выборки Что будет содержать QueryList, если использовать ContentChildren с read: TemplateRef? Забыли? Вернитесь к посту от 02.06.2025. 👉 @sWebDev

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

Гайд МТС Линк для РОПов по эффективным онлайн-встречам План не выполняется, текучка среди новых менеджеров, а обучение сейлзов не влияет на продажи? Гайд МТС Линк для РОПов: 37 страниц полезных материалов, чек-листов и кейсов для ускорения адаптации новичков, вовлечения команды и управления распределенным отделом продаж с помощью онлайн-встреч. ✅ В гайде: - Как создать постоянную переговорку и подключаться на встречи в 2 клика; - Как ускорить адаптацию новичков и сократить отток на испытательном сроке; - Как наладить систему обучения, когда нет времени на каждого; - Как автоматически фиксировать задачи и итоги обучения с ИИ; - Как сократить время выхода новичков на результат и повысить % выполнения плана. Бонус внутри: 5 способов не выгореть от бесконечных синков. ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

CustomMarquee Анимация бегущей строки на GSAP. 👉 @sWebDev

RxJS в Angular 16: актуальные практики работы с потоками В Angular 16 появились Signals, но RxJS остаётся важной частью экосистемы. В статье разбираются подходы, которые помогают сочетать оба инструмента: когда использовать Observables, а когда Signals, как избегать дублирования логики и улучшать читаемость кода. Материал полезен тем, кто хочет привести работу с потоками к более понятной и устойчивой архитектуре. 👉 @sWebDev

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

Ferris Wheel Анимация обзорного колеса на Three.js. 👉 @sWebDev

Легендарная AIшница 3.0! Бесплатный онлайн-практикум 3 сезон масштабного онлайн-практикума про нейросети для бизнеса. 3 дня, в программе применение ИИ в продажах, маркетинге, HR и других бизнес-процессов Спикеры: Александр Горный, Сергей Нотевский, Павел Лебедев Регистрируйтесь бесплатно! Узнать больше #реклама 16+ ai-practicum.bitrix24.events О рекламодателе

RoughViz.js RoughViz.js — библиотека для визуализации данных в «рисованном» стиле, основанная на d3 и Rough.js. Поддерживает диаграммы, круговые графики и гистограммы. Подойдёт для инфографики, презентаций и нестандартных визуальных интерфейсов. 👉 @sWebDev

Сколько экранов вам нужно? 👍 — Два или три норм. ❤️ — Одиного хватает. 🤔 — Экраны? Есть же AR/VR очки. 👉 @sWebDev | #юмор

ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ Айтишники поймут ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠ ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ

Producer-Consumer Pattern Интерактивная анимация потоковой очереди на GSAP. 👉 @sWebDev

Получение зависимостей из активного маршрута Свойство injector у RouterOutlet позволяет напрямую получить зависимости, предоставленные активным маршрутом. Это полезно при работе с динамическими компонентами, вложенными маршрутами и Standalone-архитектурой, где требуется доступ к провайдерам из маршрута без дополнительных обёрток.

import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MyService } from './my.service';

@Component({
  selector: 'app-shell',
  template: `<router-outlet #outlet="outlet"></router-outlet>`,
})
export class ShellComponent {
  @ViewChild('outlet', { static: true }) outlet!: RouterOutlet;

  ngAfterViewInit() {
    const myService = this.outlet.injector.get(MyService);
    myService.log();
  }
}

Если MyService предоставлен только в маршруте, то доступ к нему возможен только через RouterOutlet.injector. Это исключает необходимость передачи данных через @Input или общие сервисы. 👉 @sWebDev

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

Назначение метода onDestroy() Зачем используется метод onDestroy()? Забыли? Вернитесь к посту от 26.05.2025. 👉 @sWebDev

Smartcrop.js Smartcrop.js — библиотека для умного кадрирования изображений. Автоматически находит визуально важные области и обрезает изображение под заданный размер. Подойдёт для аватаров, превью и адаптивной медиавёрстки. 👉 @sWebDev