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

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

@swebdev

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Subscribers
7.44K
Photos
2K
Videos
735
Links
213

Showing posts older than #3605 · Back to latest

Older Posts 20 shown
Post #3604 1.08K
Какой первый аргумент передаётся в FormControl?

Что передаётся в FormControl первым аргументом?

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

👉 @sWebDev
  • 👍 2
Post #3603 1.13K
Vanilla-tilt.js

Vanilla-tilt.js — это легковесная библиотека, позволяющая добавлять эффект 3D-наклона к элементам на странице. Она реагирует на движения мыши, создавая плавные анимации без лишних зависимостей.

👉 @sWebDev
  • 👍 3
Post #3602 1.09K
Anime.js hover effect

Анимация при наведении на Anime.js.

👉 @sWebDev
  • 👍 8
Post #3595 1.15K
Сохранение данных формы в React: современный подход с Nuqs

В веб-разработке часто требуется сохранять состояние форм, чтобы предотвратить потерю данных при обновлении страницы или поделиться заполненной формой с другими. Традиционные методы, такие как localStorage, имеют ограничения, включая невозможность совместного использования данных и отсутствие встроенной валидации. Nuqs предлагает современное решение, позволяя сохранять состояние формы в URL с поддержкой типизации и валидации. Это упрощает обмен данными и устраняет необходимость в серверной инфраструктуре. Если вы хотите улучшить управление состоянием форм в своих React-приложениях, ознакомьтесь с возможностями Nuqs.

👉 @sWebDev
  • 👍 3
Post #3594 1.11K
Loader

Анимация загрузки на Anime.js.

👉 @sWebDev
  • 👍 3
Post #3593 1.19K
Glider.js

Glider.js — это компактный и гибкий карусельный слайдер, который не требует jQuery и работает плавно даже на мобильных устройствах. В отличие от тяжелых аналогов, он предлагает нативную поддержку перелистывания, кастомизацию через CSS и API для управления поведением.

👉 @sWebDev
  • 🔥 5
Post #3592 1.15K
Так веб-разработка же простая, правда?

👍 – Конечно, что тут сложного?

❤️ – Мне один раз приснилось, что продакшн можно сломать одной строчкой… смешно, правда?

👉 @sWebDev | #юмор
  • ❤ 17
  • 👍 3
  • 🤔 2
  • 👎 1
Post #3591 1.07K
Golden Cider

3D интерактивная моделька для лого на Three.js.

👉 @sWebDev
  • 🔥 3
Post #3590 1.15K
Предзагрузка всех модулей в Angular

В Angular модули загружаются лениво (lazy loading), чтобы не перегружать приложение. Однако, если модули нужны часто, можно предзагрузить их заранее с preloadAllModules.

Пример:
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }
];

@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule {}


Этот код заставляет Angular загружать все модули в фоне после загрузки главного модуля. Это уменьшает задержки при переходах, но увеличивает начальную загрузку.

👉 @sWebDev
  • 👍 4
Post #3588 1.05K
У вас будут какие-то оправдания?

👍 - Дорогой дневник...

❤️ - Мне не стыдно.

👉 @sWebDev | #юмор
  • ❤ 12
Post #3587 1.07K
  • 👍 3
  • 🔥 1
Post #3586 1.03K
Работа с CdkVirtualScrollViewport

Когда CdkVirtualScrollViewport обновляет элементы списка?

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

👉 @sWebDev
  • ❤ 3
Post #3585 1.07K
noUiSlider

Лёгкий и доступный JavaScript-слайдер диапазона с поддержкой мультитач и клавиатуры. Полностью анимирован с использованием GPU, что обеспечивает высокую производительность даже на старых устройствах. Идеально подходит для адаптивных дизайнов и не имеет внешних зависимостей.

👉 @sWebDev
  • 👍 4
Post #3584 1.03K
3D Landscape Game

3D сцена со сменой времени на Three.js.

👉 @sWebDev
  • 🔥 3
  • 👍 1
Post #3583 1.19K
Почему я не буду использовать JSDOM

В статье автор анализирует историю и ограничения JSDOM — библиотеки, созданной в 2010 году для эмуляции браузерной среды в Node.js. Несмотря на её популярность в тестировании фронтенд-кода, JSDOM сталкивается с проблемами несовершенной эмуляции браузера в Node.js, что приводит к ошибкам при обработке событий. Автор предлагает отказаться от использования JSDOM в пользу современных инструментов, обеспечивающих более точное соответствие реальным условиям работы приложений.

👉 @sWebDev
  • 🔥 3
Post #3582 1.11K
Interactive 3D Text

Анимация текста и фигур на Three.js.

👉 @sWebDev
  • ❤ 5
  • 👍 1
Post #3575 1.23K
Chroma.js

Небольшая JavaScript-библиотека без зависимостей (размером около 13,5 КБ), предназначенная для различных цветовых преобразований и создания цветовых шкал. Позволяет считывать цвета из различных форматов, анализировать и манипулировать ими, а также генерировать цветовые палитры для визуализации данных.

👉 @sWebDev
  • 👍 3
Post #3566 1.09K
Есть ли у вас страх, что вас заменит ИИ?

❤️ - Бывает тревожность из-за таких мыслей.

👍 - Пусть он для начала мне напишет нормальный код, а потом поговорим.

👉 @sWebDev | #юмор
  • 👍 26
  • ❤ 8
Post #3565 1.08K
Bubbles Background Animation

Анимация градиентного фона на CSS и JS.

👉 @sWebDev
  • 🔥 3
Post #3563 1.14K
Разрешение циклических зависимостей между провайдерами

В Angular при наличии циклических зависимостей между провайдерами нельзя напрямую указывать сервис в качестве зависимости другого.
Для отложенного определения зависимостей используется forwardRef(), который позволяет ссылаться на провайдер до его фактического объявления. Однако внутри DI-контейнера такой провайдер остается обернутым в forwardRef().
Метод resolveForwardRef() используется для разворачивания ссылки, если она была передана через forwardRef(). Это позволяет явно получить оригинальное значение до его использования.

Пример:
@Injectable()
export class ServiceA {
constructor(@Inject(forwardRef(() => ServiceB)) private serviceB: ServiceB) {}
}

@Injectable()
export class ServiceB {
constructor(@Inject(forwardRef(() => ServiceA)) private serviceA: ServiceA) {}
}

// Использование resolveForwardRef
const resolvedRef = resolveForwardRef(forwardRef(() => ServiceA));
// resolvedRef теперь содержит прямую ссылку на ServiceA

👉 @sWebDev
  • 👍 4
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →