Telegram Web Link
Что делать, если прод упал?

👍 – Пинать сервер.

❤️ – Брать больничный.

🤔 – Искать баг.

👉 @sWebDev | #юмор
8🤔5
Рендеринг длинных списков без потерь производительности в 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
🔥4👍1
Какой вариант ветки вам удобнее?

👍 – Main, уже привык.

❤️ – Master, так исторически сложилось.

🤔 – О чем вообще речь?

👉 @sWebDev | #юмор
33👍12🤔5
Booking.js

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

👉 @sWebDev
👍4
Media is too big
VIEW IN TELEGRAM
Spline of frames

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

👉 @sWebDev
👍5
Тестирование React-хуков с помощью Vitest

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

👉 @sWebDev
3
This media is not supported in your browser
VIEW IN TELEGRAM
Пример midnight.js

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

👉 @sWebDev
👍3
Midnight.js

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

👉 @sWebDev
4
Работа с ChangeDetectorRef.detach()

Для чего используется метод ChangeDetectorRef.detach()?

Если забыли, то вернитесь к посту от 10.02.2025.

👉 @sWebDev
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Часто отвлекаетесь на что-то в компе?

👍 - Постоянно.

❤️ - Нет, только если в перерывах.

🤔 - Скорее отвлекаюсь на код.

👉 @sWebDev | #юмор
👍214🤔1
Создание реактивных форм без FormBuilder

В Angular для работы с реактивными формами часто используют FormBuilder, но создать форму можно и вручную с помощью new FormGroup() и new FormControl().

При создании формы каждый элемент добавляется в FormGroup через new FormControl(), где первый аргумент — это начальное значение поля. Также можно динамически добавлять или удалять контролы с помощью методов addControl() и removeControl().

Пример:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
selector: 'app-login',
template: `
<form [formGroup]="loginForm">
<input formControlName="email" placeholder="Email">
<input formControlName="password" type="password" placeholder="Пароль">
</form>
`
})
export class LoginComponent {
loginForm = new FormGroup({
email: new FormControl(''),
password: new FormControl('')
});
}


👉 @sWebDev
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
ECG

Анимация электрокардиограммы на Three.js.

👉 @sWebDev
👍5
Mustache.js

Mustache.js – это легковесный шаблонизатор для JavaScript, использующий синтаксис двойных фигурных скобок ({{}}). Он позволяет динамически генерировать HTML, заменяя плейсхолдеры в шаблоне переданными данными. Mustache.js не имеет логики (условий, циклов), что делает его простым и универсальным.

👉 @sWebDev
👍3👎1🤔1
Media is too big
VIEW IN TELEGRAM
Radiant Ripples

3D анимация абстрактной фигуры на Three.js.

👉 @sWebDev
🔥2👍1
Микрофронтенды с Angular и Native Federation

Микрофронтенды позволяют разбить большое приложение на независимые модули, ускоряя разработку и упрощая поддержку. Статья объясняет, как внедрить этот подход в Angular с помощью Native Federation — встроенного механизма для динамической загрузки модулей. Разбираются преимущества, сложности и реальные сценарии использования, полезные для масштабных проектов.

👉 @sWebDev
👍3
Media is too big
VIEW IN TELEGRAM
Shader-Driven Parametric Glow Shape

Анимация параметрической светящейся формы с шейдерами на Three.js.

👉 @sWebDev
👍3
2025/07/11 18:15:25
Back to Top
HTML Embed Code: