Что больнее для разработчика?

👍 - Увидеть 502 на своем проекте.

❤️ - Объяснять пользователю, что роутер тут ни при чем.

👉 @sWebDev | #юмор

Изоляция внедрения зависимостей

Флаг InjectFlags.SkipSelf позволяет пропустить текущий инжектор и искать зависимость в родительских инжекторах. Это используется, когда в компоненте не должно быть локальных определений сервиса, а требуется внедрить его из вышестоящего уровня, например, из родителя или модуля.

Например, компонент внедряет ConfigService, но пропускает локальный провайдер и получает зависимость извне:

import { Component, Inject, inject, InjectionToken, InjectFlags } from '@angular/core';

export const CONFIG_TOKEN = new InjectionToken<string>('Config');

@Component({
  selector: 'child-component',
  template: `Config: {{ value }}`,
  providers: [{ provide: CONFIG_TOKEN, useValue: 'локальная конфигурация' }]
})
export class ChildComponent {
  value = inject(CONFIG_TOKEN, InjectFlags.SkipSelf);
}

В этом случае будет получено значение из родительского инжектора, даже если в текущем компоненте есть свой провайдер CONFIG_TOKEN.

👉 @sWebDev

Heatmap 3D

Анимация планеты на Three.js.

👉 @sWebDev

Насколько вы зависите от ИИ при разработке?

👍 – Почти не использую, сам справляюсь.

❤️ – ChatGPT — мой напарник.

👉 @sWebDev | #юмор

List.js

List.js — JavaScript-библиотека для добавления поиска, сортировки и фильтрации к HTML-таблицам и спискам. Простая в подключении, не требует jQuery и подходит для интерфейсов с динамическими наборами данных.

👉 @sWebDev

Interactive Cube Grid

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

👉 @sWebDev

Что бы я хотел знать об Angular в самом начале

Многие разработчики сталкиваются с трудностями в Angular не из-за сложности фреймворка, а из-за неправильного старта. Автор делится опытом: как разумно структурировать модули, использовать ленивую загрузку и строить код, который не развалится при росте проекта.

👉 @sWebDev

Layout Explorations

Анимация галереи с использованием GSAP и Lenis.

👉 @sWebDev

Chrono.js

Chrono.js — JavaScript-библиотека для парсинга дат из текста на естественном языке. Распознаёт форматы вроде “завтра”, “5 июля”, “через 3 недели”, работает без зависимостей. Подходит для чат-ботов, форм бронирования и любых интерфейсов с вводом дат.

👉 @sWebDev

Современная альтернатива findDOMNode()

Что рекомендует использовать React вместо findDOMNode()?

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

👉 @sWebDev

Вас раздражает, когда путают Java и JavaScript?

👍 – Уже привык, улыбаюсь и киваю.

❤️ – Каждый раз страдаю.

👉 @sWebDev | #юмор

Оптимистичные обновления интерфейса

Хук useOptimistic() в React позволяет обновлять состояние интерфейса до завершения серверного запроса, создавая ощущение мгновенного отклика. Первым аргументом передаётся массив или объект исходного состояния, вторым — функция, формирующая новое состояние из предыдущего и действия.

'use client';

import { useOptimistic } from 'react';

function TodoList({ todos }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  const handleAdd = async (text) => {
    addOptimisticTodo({ text });
    await fetch('/api/todo', { method: 'POST', body: JSON.stringify({ text }) });
  };

  return (
    <ul>
      {optimisticTodos.map((todo, i) => <li key={i}>{todo.text}</li>)}
    </ul>
  );
}

Метод addOptimisticTodo мгновенно обновляет список до ответа сервера. После получения реального ответа можно синхронизировать состояние или повторно перерендерить данные.

👉 @sWebDev

Sakura Bonsai

Анимация сакуры на Three.js.

👉 @sWebDev

Как вам такой дизайн ванной комнаты?

👍 — Идеально.

❤️ — А это набивка или реальные коммиты?

👉 @sWebDev | #юмор

Drift

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

👉 @sWebDev

Interactive Three.js Particle Morph

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

👉 @sWebDev

Самый безопасный способ скрыть API-ключи в React

В React-приложениях API-ключи легко могут утечь, если оставить их на клиенте. В статье объясняется, почему нельзя полагаться на переменные окружения или обфускацию кода, и почему для защиты ключей нужно использовать серверную прослойку. Разбор показывает, как правильно выстраивать архитектуру запросов, чтобы ключи не попадали в браузер.

👉 @sWebDev

Infinite Tunnel

Настраиваемая анимация туннеля на Three.js.

👉 @sWebDev