Skip to content

Instantly share code, notes, and snippets.

View ippatev's full-sized avatar
🎯
Focusing

Aleksandr Ippatev ippatev

🎯
Focusing
View GitHub Profile

Команда npx tailwindcss init -p выполняет две основные функции:

  1. npx tailwindcss init - Создает файл конфигурации Tailwind CSS (tailwind.config.js) в вашем проекте. Этот файл позволяет кастомизировать настройки фреймворка.

  2. Флаг -p - Дополнительно создает файл конфигурации PostCSS (postcss.config.js) с уже настроенным плагином Tailwind. Это полезно, если ваш проект использует PostCSS для обработки CSS.

Что создается в результате:

  • tailwind.config.js - конфигурационный файл Tailwind
  • postcss.config.js - конфигурационный файл PostCSS с содержимым:
@ippatev
ippatev / index.md
Created August 27, 2025 09:10
LazyVim JSDoc Integration: Plugins and Configuration Guide

Below is the content converted into a Markdown (.md) file format suitable for a GitHub Gist, with proper formatting and escaping for Markdown syntax.

# JSDoc Support in LazyVim

Enhance your LazyVim setup with plugins to streamline JSDoc generation or snippet management for JavaScript/TypeScript files. Below are recommended plugins and a guide to integrate them in LazyVim.

## Recommended Plugins

1. **LuaSnip** (Included in LazyVim)
@ippatev
ippatev / index.md
Last active August 27, 2025 02:44
Preact Signals vs Vue 3 Reactivity System

Both Preact Signals and Vue 3 Reactivity System are designed for fine-grained reactivity, but they differ in approach, API, and use case. Here's a brief comparison:

1. Core Concept

  • Preact Signals: Inspired by Solid.js, Signals are a standalone reactive primitive. A signal is a value container that notifies subscribers (components or effects) when updated. It’s explicit, lightweight, and decoupled from rendering.
  • Vue 3 Reactivity: Built around reactive objects (reactive) and references (ref). Uses JavaScript Proxies to track and react to changes in object properties or ref values, deeply integrated with Vue’s component system.

2. API

  • Preact Signals:
    • Core APIs: signal(value), computed(fn), effect(fn).
  • Explicit subscriptions: Components or effects re-run when signal values change.
@ippatev
ippatev / index.md
Created August 26, 2025 09:57
Signals vs. Hooks

As @GrokAI, I can give you a high-level take inspired by what a staff engineer at Meta might consider, but I’m not one myself—I’m just a helpful AI! 😄 Here’s some advice on Signals vs. Hooks based on their roles in React:

  1. Understand Signals’ Purpose: Signals are designed for fine-grained reactivity, optimizing updates in performance-critical UI systems. They’re great for scenarios where you need to minimize re-renders in complex, large-scale apps (e.g., real-time dashboards or collaborative tools). Hooks, like useState and useEffect, are more general-purpose and simpler for most apps.

  2. When to Use Signals: Consider Signals for components with heavy state dependencies or frequent updates (e.g., data grids, real-time feeds). They’re opt-in, so experiment in high-traffic areas where React’s default re-rendering feels sluggish. Profile first—use React DevTools or performance metrics to confirm bottlenecks.

  3. Stick with Hooks for Simplicity: For most apps, hooks are easier to reason about and maintain. us

@ippatev
ippatev / index.md
Created August 22, 2025 02:49
Managing Tailwind CSS in Turborepo Packages

Managing Tailwind CSS in Turborepo Packages

When working with a Turborepo that has multiple packages, you'll need to handle Tailwind CSS imports and configuration properly. Here's how to set up individual index.css files for each package:

Project Structure

your-turborepo/
├── apps/
│   └── web/                 # Example app
@ippatev
ippatev / index.md
Created August 13, 2025 04:58
The error indicates that Neovim can't write to the ShaDa file because temporary files

The error indicates that Neovim can't write to the ShaDa file because temporary files (main.shada.tmp.X) already exist in C:\Users\Ippatev\AppData\Local\nvim-data\shada. This often happens due to improper shutdowns or file permission issues.

Quick Fix:

  1. Delete Temporary Files:

    • Navigate to C:\Users\Ippatev\AppData\Local\nvim-data\shada.
    • Delete all main.shada.tmp.X files (e.g., main.shada.tmp.a, main.shada.tmp.b, etc.).
    • Command (in PowerShell): Remove-Item C:\Users\Ippatev\AppData\Local\nvim-data\shada\main.shada.tmp.*
  2. Restart Neovim:

  • Open Neovim and check if the error persists.
@ippatev
ippatev / index.md
Created August 7, 2025 02:09
ОКТМО. выбрать область на карте в OpenLayers

Да, через ОКТМО (Общероссийский классификатор территорий муниципальных образований) можно эмулировать клик или выбрать область на карте в OpenLayers, если у вас есть данные, связывающие ОКТМО с геометрией (например, GeoJSON или векторный слой). Вот как это сделать кратко:

Подход

  1. Связь ОКТМО с геометрией: Убедитесь, что у вас есть слой (например, VectorLayer) с объектами (Feature), где каждая Feature имеет свойство ОКТМО (или код, связанный с ним).
  2. Поиск Feature по ОКТМО: Найдите объект Feature, соответствующий заданному ОКТМО.
  3. Программный клик или выбор: Используйте координаты центра геометрии Feature для эмуляции клика или напрямую выберите Feature через Select Interaction.

Пример кода

Предположим, у вас есть GeoJSON с муниципальными образованиями, где каждая Feature содержит свойство oktmo.

@ippatev
ippatev / index.md
Created August 7, 2025 01:14
Реализация программного клика ol/map

Для реализации программного клика по карте в OpenLayers (React, TypeScript, TSX, TailwindCSS), можно использовать метод map.dispatchEvent для эмуляции события клика или вызвать обработчик напрямую, передавая координаты. Вот краткое руководство:

Реализация программного клика

  1. Доступ к карте: Убедитесь, что у вас есть доступ к экземпляру Map из OpenLayers.
  2. Эмуляция клика: Используйте map.dispatchEvent с событием click или вызовите обработчик selectInteraction вручную.
  3. Координаты: Передайте координаты в проекции карты (обычно EPSG:3857).

Пример кода

import { useEffect, useRef } from 'react';
@ippatev
ippatev / index.md
Created July 10, 2025 02:19
In React, Provider and Context are related but serve distinct roles in the Context API for managing state across components.

In React, Provider and Context are related but serve distinct roles in the Context API for managing state across components.

React Context

  • What it is: A mechanism to share data (state) across a component tree without prop drilling.
  • How it works: You create a context using React.createContext(), which provides two components:
    • Provider: Supplies the data.
    • Consumer: Accesses the data (or use useContext hook in functional components).
  • Purpose: Defines the "scope" of data to be shared.

Example:

@ippatev
ippatev / index.md
Created July 2, 2025 09:10
Работа с grid внутри ScrollArea

Работа с grid внутри ScrollArea (например, из shadcn/ui) или любого другого scrollview имеет свои нюансы, особенно в контексте Tailwind CSS. Вот основные моменты, которые нужно учитывать:

1. Управление высотой и прокруткой

  • Задайте высоту контейнера: ScrollArea требует явной высоты (например, h-[500px] или h-screen), иначе прокрутка не сработает. Без этого grid может растянуться за пределы контейнера.