Frontender Libs - обзор библиотек JS / CSS

Как использовать proxyConfig в Angular для локальной разработки Работа с API на локальной разработке часто вызывает проблемы из-за CORS. В статье объясняется, как правильно настроить proxyConfig в Angular, чтобы отправлять запросы через прокси без изменения кода. 👉 @sWebDev

Morphing Superformula Explorer Настраиваемая анимация фигур на Three.js. 👉 @sWebDev

Bouncer.js Bouncer.js — легковесная библиотека для валидации форм на стороне клиента без зависимостей. Работает через нативные браузерные API и подходит для простых и адаптивных форм без необходимости подключения крупных фреймворков. 👉 @sWebDev

Когда сеньор аппрувнул твой мерж-реквест, ты... 👍 – Ждешь, когда он поймет свою ошибку. ❤️ – Пытаешься понять, не сарказм ли был в его аппруве. 👉 @sWebDev | #юмор

3D WebGL Background Интерактивная анимация фона на Three.js и Vanta.js. 👉 @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

Как у вас с оценкой времени на "маленькие" правки? 👍 — Ужасно. ❤️ — С опытом стало получаться точнее. 👉 @sWebDev | #юмор

Получи грант до 1,2 млн руб. на обучение в магистратуре Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

Назначение метода Что делает метод ɵmarkDirty() в компоненте? Забыли? Вернитесь к посту от 21.04.2025. 👉 @sWebDev

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

Infinite Tunnel Настраиваемая анимация туннеля на Three.js. 👉 @sWebDev

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

Interactive Three.js Particle Morph Интерактивная морфинг анимация на Three.js. 👉 @sWebDev

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

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Узнать больше #реклама 16+ О рекламодателе

Как вам такой дизайн ванной комнаты? 👍 — Идеально. ❤️ — А это набивка или реальные коммиты? 👉 @sWebDev | #юмор

Sakura Bonsai Анимация сакуры на Three.js. 👉 @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

Вас раздражает, когда путают Java и JavaScript? 👍 – Уже привык, улыбаюсь и киваю. ❤️ – Каждый раз страдаю. 👉 @sWebDev | #юмор