Telegram Web
Работа с ChangeDetectorRef.detach()

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

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

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

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

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

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

👉 @sWebDev | #юмор
👍204🤔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
Gremlins.js

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

👉 @sWebDev
👍3
Забываете удалить старые куски кода?

👍 - Бывает.

❤️ - Нет, чищу сразу.

🤔 - Так крепче прод (наверное).

👉 @sWebDev | #юмор
👍8🤔71
Ваши действия?

👍 - Стать первым, кто прервет молчание.

❤️ - Оставить все как есть.

👉 @sWebDev | #юмор
7👍4
Деплой Next.js приложения с Deno Deploy

Туториал о поднятии приложения Next.js с использованием Deno Deploy: преимущества и шаги для интеграции технологий.

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

В 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
Media is too big
VIEW IN TELEGRAM
Bubbles Background Animation

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

👉 @sWebDev
🔥3
Есть ли у вас страх, что вас заменит ИИ?

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

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

👉 @sWebDev | #юмор
👍268
Chroma.js

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

👉 @sWebDev
👍3
Media is too big
VIEW IN TELEGRAM
Interactive 3D Text

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

👉 @sWebDev
5👍1
Почему я не буду использовать JSDOM

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

👉 @sWebDev
🔥3
2025/07/10 08:25:16
Back to Top
HTML Embed Code: