Skip to content

Instantly share code, notes, and snippets.

View ippatev's full-sized avatar
🎯
Focusing

Aleksandr Ippatev ippatev

🎯
Focusing
View GitHub Profile
@ippatev
ippatev / index.md
Created July 2, 2025 03:42
Обработка пустых данных в PieChart

Вы спрашиваете о том, как визуализировать PieChart с пустыми данными в Recharts. Давайте разберем, как библиотека обрабатывает отсутствующие данные.

Обработка пустых данных в PieChart

В Recharts есть специальная логика для обработки пустых данных в PieChart. Рассмотрим ключевые моменты:

Селектор для отображаемых данных 1

Этот селектор selectDisplayedData обрабатывает различные сценарии пустых данных:

@ippatev
ippatev / index.md
Created July 2, 2025 03:01
Управление состояниями в основных компонентах Recharts

Управление состояниями в основных компонентах Recharts

Архитектура состояния

Recharts использует Redux Toolkit для централизованного управления состоянием каждого графика. Каждый компонент графика получает свой собственный изолированный Redux store, что позволяет избежать конфликтов с Redux store основного приложения. 1

Состояние разделено на специализированные slice'ы, каждый из которых отвечает за определенный аспект графика:

@ippatev
ippatev / index.md
Last active June 25, 2025 02:19
Передача компонента через props в React (TSX)

Передача компонента через props в React (TSX)

В React с TypeScript компоненты можно передавать через props как функции или JSX-элементы. Вот краткое объяснение, лучшие практики и нюансы безопасности:

1. Передача компонента через props

Есть два основных способа передать компонент через props в TSX:

Способ 1: Передача компонента как функцию
interface Props {
@ippatev
ippatev / index.ts
Created June 24, 2025 06:44
Если ты хочешь применить изменения к нескольким свойствам (аналог map для массивов), можно использовать Object.keys или Object.entries:
const newObj = Object.fromEntries(
Object.entries(obj).map(([key, value]) => [
key,
key === 'b' ? value * 2 : value // Умножаем b на 2, остальное без изменений
])
);
setObj(newObj);
@ippatev
ippatev / index.tsx
Created June 19, 2025 06:20
ScrollArea with h-full
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useEffect, useState } from 'react';
interface IDataObject {
userId: number;
id: string;
title: string;
body: string;
}
@ippatev
ippatev / index.md
Created June 11, 2025 03:58
Steps to Fix netrw Issues

To fix netrw problems with TypeScript (.ts) and TypeScript React (.tsx) files in Neovim on Windows 10, particularly the E5113: module 'ftplugin.javascript' not found error when opening .tsx files via netrw, follow these steps. The issue stems from netrw triggering BufReadPost and FileType autocommands that load ftplugin/typescriptreact.lua, which fails due to an invalid require('ftplugin.javascript'). Below is a concise solution to ensure netrw works seamlessly with TypeScript/React projects.

Steps to Fix netrw Issues

  1. Fix typescriptreact.lua:
    • The error occurs because ftplugin/typescriptreact.lua tries to load a non-existent ftplugin.javascript module.
    • Open C:\Users\Ippatev\AppData\Local\nvim\ftplugin\typescriptreact.lua: nvim C:\Users\Ippatev\AppData\Local\nvim\ftplugin\typescriptreact.lua
  • Remove or comment out require('ftplugin.javascript'). Replace with standalone settings:
@ippatev
ippatev / index.md
Created June 10, 2025 01:50
Google Play Console для разработчика из РФ

Вот подробные шаги для обновления налоговой информации в Google Play Console для разработчика из РФ, чтобы разблокировать аккаунт из-за истёкшей налоговой формы:

# Руководство по обновлению налоговой информации в Google Play Console для разработчиков из РФ

Шаг 1: Вход в Google Play Console

  1. Перейди на Google Play Console.
  2. Войди в аккаунт, связанный с твоим профилем разработчика.
  3. Если аккаунт заблокирован из-за налоговой формы, ты увидишь уведомление на главной странице или в разделе Настройки (Settings).

Component based CSS Architecture

Rules

  1. A component always consists of CSS and HTML (JS is optional)
  2. HTML and JS of a component are located in ComponentName.js
  3. Styles of a component are located in ComponentName.scss
  4. Each CSS class starts with the unique component name
  5. The HTML of each component only uses its own prefixed classes
  6. Components can use other components, but never overwrite their styles

Ghostty Keyboard Shortcuts

Default keyboard shortcuts for Ghostty terminal emulator. Platform-specific differences are noted where applicable.

Window Management

Action Windows/Linux macOS
New window Ctrl+Shift+N Cmd+N
Close window Alt+F4 Cmd+Shift+W
@ippatev
ippatev / index.md
Created April 4, 2025 03:02
Zustand vs Redux

Here's a concise summary of the main features and conceptual differences between Zustand and Redux:


Main Features

Zustand Redux
- Lightweight (~2KB gzipped), minimal boilerplate. - Mature and battle-tested, with a robust ecosystem.
- Function-based store creation: Define stores with a single create call. - Centralized store: State managed via reducers, actions, and store.
- Hooks-first API: Use useStore to access state. - Unidirectional data flow: State updates via dispatch(action)reducers.