Формошлёп — сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

Newtons Cradle

Настраиваемый маятник Ньютона на Three.js.

👉 @sWebDev

BaguetteBox.js

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

👉 @sWebDev

Поиск зависимости при SkipSelf

Как работает флаг InjectFlags.SkipSelf при внедрении зависимости?

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

👉 @sWebDev

Идеальная пара в любом проекте.

👍 – С ними не соскучишься.

❤️ – А можно взять только второго?

👉 @sWebDev | #юмор

Отключение шаблона от change detection через ViewRef.detach()

В Angular метод detach() у ViewRef позволяет временно исключить представление из механизма обнаружения изменений. Это значит, что Angular перестаёт отслеживать изменения данных внутри отключённого представления, что полезно при работе с тяжёлыми компонентами или при необходимости заморозить часть UI.

ViewRef можно получить, например, при создании представления через ViewContainerRef.createEmbeddedView() или createComponent(). После вызова detach() Angular перестаёт проверять это представление при каждом цикле изменений. Чтобы снова активировать его, вызывается viewRef.reattach().

const viewRef = viewContainer.createEmbeddedView(templateRef);
viewRef.detectChanges();
viewRef.detach();

// ...позже
viewRef.reattach();

Такой подход позволяет вручную управлять производительностью, особенно при наличии большого количества вложенных представлений, не требующих постоянного обновления.

👉 @sWebDev

Global Technology Index

Интерактивная анимация дешборда на Three.js.

👉 @sWebDev

Сколько файлов нужно Angular для счастья?

👍 — Тысяч 50 минимум, иначе не солидно.

❤️ — Главное, чтобы проект запускался.

👉 @sWebDev | #юмор

Animatelo

Animatelo — JavaScript-версия анимаций из Animate.css, работающая без зависимостей. Поддерживает все основные эффекты (вход, выход, внимание и др.) и управляется через классы. Подойдёт для проектов, где нужны CSS-анимации без подключения сторонних стилей.

👉 @sWebDev

Carnival Spinner

Интерактивная сцена с колесом на Three.js.

👉 @sWebDev

Аутентификация Firebase в Angular 19

В Angular 19 интеграция с Firebase позволяет реализовать аутентификацию с помощью email/пароля, социальных сетей и других методов. Статья показывает, как настроить Firebase в проекте, использовать AngularFire для подключения и создать сервис для управления сессиями и входом пользователей. Полезно для тех, кто хочет добавить надёжную аутентификацию без лишнего кода.

👉 @sWebDev

Preloader and Layout Experiment

Анимация загрузки страницы на GSAP.

👉 @sWebDev

NanoJS

NanoJS — сверхмаленькая JavaScript-библиотека для базовых операций с DOM. Предоставляет минимальный набор функций для селекторов, событий и анимации. Подойдёт для проектов, где нужен ручной контроль без jQuery и тяжёлых фреймворков.

👉 @sWebDev

Структура аргументов useOptimistic()

Что принимает useOptimistic() в качестве начальных данных?

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

👉 @sWebDev

Сталкивались с такими крайностями в комментариях к патчам в реальной жизни?

👍 – Да, с минимализмом на больших патчах постоянно.

❤️ – С графоманией на маленьких — редко, но метко.

🤔 – Я сам иногда грешу то в одну, то в другую сторону.

👉 @sWebDev | #юмор

Очистка ресурсов через DestroyRef.onDestroy()

DestroyRef предоставляет метод onDestroy(), с помощью которого можно зарегистрировать функцию, выполняемую при уничтожении экземпляра. Данный способ подходит для отписки от Observable, остановки таймера или удаления обработчика событий без реализации интерфейса OnDestroy.

import { Component, inject, DestroyRef } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'demo-ticker',
  template: `<p>{{ tick }}</p>`,
})
export class TickerComponent {
  tick = 0;
  private sub: Subscription;

  constructor() {
    const destroyRef = inject(DestroyRef);

    this.sub = interval(1000).subscribe(v => (this.tick = v));

    destroyRef.onDestroy(() => {
      this.sub.unsubscribe();
      console.log('Подписка завершена');
    });
  }
}

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

👉 @sWebDev

Draggable SVG Logo

Логотип с эффектом перетаскивания на GSAP и Draggable.js.

👉 @sWebDev

Откуда реально пришли ваши ключевые знания по программированию?

👍 – Из курсов.

❤️ – Из бессонных ночей с гуглом и форумами.

🤔 – Разбор чужого кода и практика.

👉 @sWebDev | #юмор