Frontender Libs - обзор библиотек JS / CSS
8.56K subscribers
1.99K photos
720 videos
1 file
232 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
В итоге, AI-ассистенты экономят ваше время или тратят его?

👍 — Экономят на рутинных задачах, если использовать их с умом.

❤️ — Пока что это скорее «игрушка», которая может подкинуть идею, но не написать готовый к продакшену код.

🤔 — ИИ делает почти всю работу за меня.

👉 @sWebDev | #юмор
👍145
Прокси-компонент для управления доступом

Паттерн Компонент-прокси можно применить для более сложных задач, чем управление загрузкой. Его используют для инкапсуляции и разграничения прав доступа к отдельным частям интерфейса.

Прокси-компонент для контроля доступа оборачивает защищенный контент. Он обращается к AuthContext, чтобы получить роль текущего пользователя, и сравнивает её с требуемой ролью, переданной в props. В зависимости от результата проверки, прокси либо отрисовывает дочерние элементы, либо возвращает null или компонент-заглушку.

import { useContext, ReactNode } from 'react';
import { AuthContext } from './AuthContext'; // контекст создан

interface AccessControlProxyProps {
children: ReactNode;
requiredRole: 'admin' | 'user';
}

function AccessControlProxy({ children, requiredRole }: AccessControlProxyProps) {
const { user } = useContext(AuthContext);

if (user?.role !== requiredRole) {
return null; // или <AccessDenied />
}

return <>{children}</>;
}


👉 @sWebDev
👍31
Media is too big
VIEW IN TELEGRAM
Three.js particle morph

Морфинг частиц между фигурами на Three.js и GSAP.

👉 @sWebDev
2
Какой должностью лучше представляться, чтобы избежать лишних просьб?

👍 — «Мне платят за то, что я гуглю лучше других».

❤️ — «Ассенизатор цифровых потоков и архивариус темпоральных данных».

🤔 — «Менеджер». Никто не знает, что они делают, и поэтому боятся о чем-то просить.

👉 @sWebDev | #юмор
🤔43👍2
Dragscroll

Прокрутка контента с помощью мыши часто ограничена использованием стандартных скроллбаров. Библиотека dragscroll добавляет в обычные десктопные интерфейсы интуитивное поведение скроллинга перетаскиванием, привычное по сенсорным устройствам. Инструмент будет полезен для галерей, карт или любых контейнеров с горизонтальной прокруткой.

👉 @sWebDev
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Split scroll animation

Анимация разделенной прокрутки на GSAP.

👉 @sWebDev
2
Профессиональная обработка ошибок в TypeScript

Обработка ошибок через try...catch часто приводит к запутанному коду и потере типизации при работе с any или unknown. Статья предлагает структурированный подход к созданию надёжной системы обработки ошибок в TypeScript. Разбираются паттерны, которые помогают сохранить типобезопасность и сделать код более предсказуемым и поддерживаемым.

👉 @sWebDev
1👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Flair Confetti!

Интерактивная анимация конфетти на GSAP.

👉 @sWebDev
👍21
Please open Telegram to view this post
VIEW IN TELEGRAM
Vidbg.js

Библиотека Vidbg.js предназначена для создания полноэкранных видеофонов. Инструмент решает проблемы с адаптивным масштабированием и содержит механизм fallback-изображений для мобильных устройств, где автовоспроизведение видео часто ограничено.

👉 @sWebDev
1
Контекст выполнения

Какое ключевое условие необходимо для корректной работы оператора takeUntilDestroyed?

Забыли? Вернитесь к посту от 04.08.2025.

👉 @sWebDev
1