Spheres

Анимация шара с эффектом гравитации на Three.js.

👉 @sWebDev

Tidy.js

Tidy.js — это библиотека для работы с данными в JavaScript, созданная для упрощения манипуляций с данными в ваших JavaScript приложениях.

Основные возможности Tidy.js включают:

- Преобразование и агрегирование данных.
- Сортировка и фильтрация данных.
- Выполнение различных статистических функций.

👉 @sWebDev

Simple campfire

Анимация костра на Anime.js.

👉 @sWebDev

Миграция на React 19 с помощью ast-grep

Статья рассказывает о миграции на React 19 с помощью инструмента ast-grep, который позволяет идентифицировать и модифицировать определённые шаблоны в коде, что упрощает обновление крупных кодовых баз. В статье подробно описаны три основные модификации: использование <Context> в качестве провайдера, удаление неявного возврата из колбэка ref и использование ref как пропса с удалением forwardRef.

👉 @sWebDev

Альтернативная математика или математика собеседований

Статья обсуждает особенности математических задач, с которыми сталкиваются кандидаты на собеседованиях, особенно в секторах ИТ. Основное внимание уделяется переходу от традиционных академических задач к практическим, нестандартным проблемам, которые проверяют способность кандидатов к решению задач в непривычных условиях.

👉 @sWebDev | #собес

Draggabilly

Draggabilly — это легковесная JavaScript библиотека, которая позволяет сделать HTML элементы перетаскиваемыми на веб-страницах. Библиотека поддерживает различные виды ввода, включая сенсорные экраны, что делает её удобной для использования на всех современных устройствах.

👉 @sWebDev

Отличие ViewChildren от ContentChildren

Какое ключевое отличие декоратора @ViewChildren от @ContentChildren?

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

👉 @sWebDev

На какой вы стадии?

🤔 - 2 и 3 лишнее.

👍 - 4 пункт.

👉 @sWebDev | #юмор

Оптимизация работы с внешними состояниями

createMutableSource - это React API для эффективного управления внешними данными. Оно помогает минимизировать перерисовку компонентов, улучшая производительность приложения. С помощью createMutableSource создается источник данных, который React отслеживает, а useMutableSource позволяет компонентам подписываться на его изменения. Это особенно полезно при работе с глобальными объектами или сторонними библиотеками управления состоянием.

Пример:

import { createMutableSource, useMutableSource } from 'react';

const myMutableSource = createMutableSource(globalObject, () => globalObject.version);

function MyComponent() { 
  const data = useMutableSource(myMutableSource, getSnapshot, subscribe); 
  return <div>{data.value}</div>;
}

В этом примере createMutableSource создает источник данных, а useMutableSource подписывает компонент на изменения в нем, обеспечивая автоматическое обновление интерфейса при изменении globalObject.

👉 @sWebDev

Click Spark

Анимация нажатия курсора на Anime.js.

👉 @sWebDev

Не хочется представлять баг спустя 10 часов...

👉 @sWebDev | #юмор

Mock

Mock.js - это JavaScript-библиотека для создания мок-данных, то есть фиктивных данных, имитирующих структуру и формат реальных данных.

👉 @sWebDev

Just about time for lunch...

Параллакс анимация бургера на GSAP.

👉 @sWebDev

Как работает RSC

В статье обсуждается эволюция рендеринга React и введение RSCs. RSCs - это новый способ рендеринга React-приложений, который сочетает в себе преимущества SSR и CSR. Они достигают этого путем потоковой передачи HTML в браузер.

👉 @sWebDev

Parametric Surface

Пример реализации объёмных фигур на Three.js.

👉 @sWebDev

Использование strictTemplates

Для чего используется флаг strictTemplates в Angular?

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

👉 @sWebDev

Magic Grid

Magic Grid - это библиотека JavaScript для создания динамических сеток. Она предоставляет удобный способ организовать элементы на странице в виде сетки, автоматически адаптирующейся к различным размерам экрана.

👉 @sWebDev

Когда приложение ещё не готово, а клиент требует демо.

👉 @sWebDev | #юмор

Отладка пользовательских хуков в React

useDebugValue() – это хук React, который позволяет разработчикам предоставлять дополнительную информацию о значении, возвращаемом пользовательским хуком, в инструментах разработчика React DevTools. Это упрощает отладку и понимание работы пользовательских хуков, особенно в сложных компонентах или библиотеках.

Как это работает:

Вы вызываете useDebugValue() внутри вашего пользовательского хука и передаете ему значение, которое хотите отобразить в DevTools. Дополнительно, вы можете передать функцию форматирования, которая преобразует значение в более удобный для чтения вид.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ... логика для определения статуса друга ...

  useDebugValue(isOnline, (status) => status ?? 'Loading...');

  return isOnline;
}

В этом примере useDebugValue() отобразит в DevTools значение isOnline или строку "Loading...", если значение еще не получено.

👉 @sWebDev