Что бы я хотел знать об 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

Toastify.js

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

👉 @sWebDev

Назначение метода

Что делает метод ɵmarkDirty() в компоненте?

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

👉 @sWebDev

Как у вас с оценкой времени на "маленькие" правки?

👍 — Ужасно.

❤️ — С опытом стало получаться точнее.

👉 @sWebDev | #юмор

Принудительное обновление кэша

Unstable_useCacheRefresh() используется для ручного обновления данных, полученных через React Cache API. Этот хук позволяет инициировать повторное получение кэшированных ресурсов, например, после пользовательского действия. Хотя API нестабильный, он применим в React Server Components и продвинутых схемах работы с асинхронными данными.

Хук возвращает функцию, которую можно вызвать в любой момент для сброса и перезапроса кэшированных данных. Данный способ полезен, когда нужно контролировать обновление без полного перезапуска компонента.

'use client';
import { unstable_useCacheRefresh as useCacheRefresh } from 'react';

export default function RefreshButton() {
  const refresh = useCacheRefresh();

  return (
    <button onClick={() => refresh()}>
      Обновить кэш
    </button>
  );
}

В примере кэш обновляется при клике на кнопку, вызывая новые запросы к серверу через связанную инфраструктуру кэширования.

👉 @sWebDev

3D WebGL Background

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

👉 @sWebDev

Когда сеньор аппрувнул твой мерж-реквест, ты...

👍 – Ждешь, когда он поймет свою ошибку.

❤️ – Пытаешься понять, не сарказм ли был в его аппруве.

👉 @sWebDev | #юмор