update typescript, update docs

docs/api/01-http.md

@@ -84,5 +84,4 @@ Content-Length: 1234
 
 HTTP является фундаментальным протоколом для работы в Интернете и используется практически во всех веб-технологиях.
 
-
+🚀 **_Источник: DeepSeek_**
-

docs/api/02-https.md

@@ -37,3 +37,5 @@ sidebar_position: 2
 - Социальные сети и почтовые сервисы.
 
 HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей.
+
+🚀 **_Источник: DeepSeek_**

docs/api/03-rest-api.md

@@ -51,3 +51,5 @@ sidebar_position: 3
 ## Разница между REST API и RESTful API:
 - **REST API** — это общий термин, описывающий API, которое следует принципам REST.
 - **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST.
+
+🚀 **_Источник: DeepSeek_**

docs/api/04-graphql.md

@@ -54,3 +54,4 @@ mutation {
 - **Гибкость:** Легко изменять запросы без необходимости изменять API.
 - **Интеграция с состоянием:** Apollo Client интегрируется с состоянием React, что упрощает управление данными.
 
+🚀 **_Источник: DeepSeek_**

docs/api/05-polling.md

@@ -75,3 +75,5 @@ export default PollingExample;
 1. **WebSockets:** Для реального времени с двусторонней связью.
 2. **Server-Sent Events (SSE):** Для односторонней передачи данных от сервера к клиенту.
 3. **Long Polling:** Клиент отправляет запрос и ждет, пока сервер не вернет новые данные.
+
+🚀 **_Источник: DeepSeek_**

docs/api/06-long-polling.md

@@ -116,3 +116,4 @@ export default LongPollingWithAxios;
 2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту.
 3. Обычный Polling: Когда данные обновляются часто, и long polling не нужен.
 
+🚀 **_Источник: DeepSeek_**

docs/api/07-server-side-events.md

@@ -130,3 +130,5 @@ app.listen(3000, () => {
 1. WebSockets: Для двусторонней связи в реальном времени.
 2. Long Polling: Когда SSE недоступен.
 3. Polling: Для простых сценариев.
+
+🚀 **_Источник: DeepSeek_**

docs/api/08-websocket.md

@@ -160,3 +160,5 @@ console.log('WebSocket server is running on ws://localhost:8080');
 1. **Server-Sent Events (SSE):** Для односторонней связи (сервер → клиент).
 2. **Long Polling:** Когда WebSocket недоступен.
 3. **Polling:** Для простых сценариев.
+
+🚀 **_Источник: DeepSeek_**

docs/architecture/02-classic-layer-based-arch.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # Классическая архитектура
-Источник: DeepSeek
 
 Layer-based architecture (архитектура на основе слоёв) — это подход к организации кода, при котором приложение разделяется на несколько логических слоёв, каждый из которых отвечает за определённый аспект функциональности. Этот метод широко используется как во фронтенд-, так и в бэкенд-разработке и помогает создавать структурированные, поддерживаемые и масштабируемые приложения.
 
@@ -108,3 +107,5 @@ src/
 2. **Domain-driven Design (DDD):**
    - Организация кода вокруг доменных областей (например, `user`, `order`, `product`).
    - Часто используется в бэкенд-разработке.
+
+🚀 **_Источник: DeepSeek_**

docs/architecture/03-atomic-design.md

@@ -3,7 +3,6 @@ sidebar_position: 3
 ---
 
 # Atomic design
-Источник: DeepSeek
 
 Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов.
 
@@ -96,6 +95,4 @@ src/
 - Когда требуется высокая согласованность интерфейса.
 - В командах, где дизайнеры и разработчики тесно взаимодействуют.
 
-
+🚀 **_Источник: DeepSeek_**
-
-

docs/architecture/04-ddd-domain-driven-design.md

@@ -3,7 +3,6 @@ sidebar_position: 4
 ---
 
 # Доменная архитектура
-Источник: DeepSeek
 
 **Domain-Driven Design (DDD)** — это подход к разработке программного обеспечения, который фокусируется на моделировании бизнес-логики и организации кода вокруг доменных областей (бизнес-контекстов). Хотя DDD изначально был разработан для бэкенд-разработки, его принципы могут быть успешно применены и во фронтенде, особенно в сложных приложениях с богатой бизнес-логикой.
 
@@ -101,3 +100,5 @@ src/
 В сложных приложениях с богатой бизнес-логикой.
 В командах, где разработчики и бизнес-эксперты тесно взаимодействуют.
 Когда требуется высокая степень модульности и переиспользуемости.
+
+🚀 **_Источник: DeepSeek_**

docs/architecture/05-fsd-feature-slice-design.md

@@ -3,7 +3,6 @@ sidebar_position: 5
 ---
 
 # Feature slice design
-Источник: DeepSeek
 
 **Feature Slice Design (FSD)** — это методология проектирования и организации кода во фронтенд-разработке, которая фокусируется на разделении приложения на независимые, функционально завершённые блоки (срезы), каждый из которых соответствует определённой фиче (функциональности) продукта. Этот подход помогает создавать более структурированные, масштабируемые и поддерживаемые приложения.
 
@@ -114,3 +113,5 @@ src/
 ## Альтернативы:
 - **Layer-based architecture** (разделение на слои, например, components, pages, store).
 - **Domain-driven design (DDD)** (организация кода вокруг доменных областей).
+
+🚀 **_Источник: DeepSeek_**

docs/architecture/06-micro-frontend.md

@@ -3,7 +3,6 @@ sidebar_position: 6
 ---
 
 # Micro frontend
-Источник: DeepSeek
 
 Микрофронтенды (Micro Frontends) — это архитектурный подход, который позволяет разделить фронтенд-приложение на независимые, слабо связанные части, каждая из которых может разрабатываться, тестироваться и развертываться отдельно. Этот подход вдохновлен микросервисной архитектурой и применяется для создания масштабируемых и поддерживаемых фронтенд-приложений.
 
@@ -115,3 +114,5 @@ sidebar_position: 6
 1. Сложность интеграции: Требуется четкая организация взаимодействия между микрофронтендами.
 2. Дублирование кода: Возможно дублирование общих ресурсов, если они не вынесены в отдельные модули.
 3. Производительность: Загрузка нескольких микрофронтендов может увеличить время загрузки приложения.
+
+🚀 **_Источник: DeepSeek_**

docs/architecture/07-tdd.md

@@ -3,7 +3,6 @@ sidebar_position: 7
 ---
 
 # Test driven development
-Источник: DeepSeek
 
 TDD (Test-Driven Development) — это методология разработки программного обеспечения, в которой написание тестов предшествует написанию кода. Основная идея TDD заключается в том, что разработчик сначала пишет тест для новой функциональности, а затем реализует код, который делает этот тест успешным. Этот процесс повторяется для каждой новой функции или улучшения.
 
@@ -66,3 +65,4 @@ TDD основан на нескольких ключевых принципах
 3. Не всегда подходит:
    - TDD может быть избыточным для небольших проектов или прототипов.
 
+🚀 **_Источник: DeepSeek_**

docs/architecture/08-dev-principles.md

@@ -3,8 +3,6 @@ sidebar_position: 8
 ---
 
 # Принципы разработки
-Источник: DeepSeek \
-Дополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/)
 
 ## YAGNI
 _You Aren’t Gonna Need It / Вам это не понадобится_
@@ -153,3 +151,6 @@ _Keep It Simple, Stupid / Будь проще_
 2. **Поддерживаемость:** Упрощается понимание и исправление ошибок.
 3. **Тестируемость:** Код, соответствующий SOLID, легче тестировать.
 4. **Масштабируемость:** Система становится более устойчивой к изменениям и росту.
+
+🚀 **_Источник: DeepSeek_**
+dДополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/)

docs/architecture/09-oop.md

@@ -0,0 +1,107 @@
+---
+sidebar_position: 9
+---
+
+# ООП
+Принципы ООП (Объектно-ориентированного программирования)
+
+Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции объектов, которые объединяют данные и методы для работы с ними. Основные принципы ООП:
+
+## 1. Инкапсуляция 
+**Смысл:** Объединение данных (свойств) и методов внутри объекта с контролем доступа. \
+**Зачем?** Защита данных, предотвращение прямого изменения извне.
+```ts
+class User {
+    private password: string;
+
+    constructor(public name: string, password: string) {
+        this.password = password;
+    }
+
+    checkPassword(input: string): boolean {
+        return this.password === input;
+    }
+}
+
+const user = new User("Alice", "secret123");
+console.log(user.checkPassword("wrong")); // false
+console.log(user.checkPassword("secret123")); // true
+```
+📌 `private` скрывает `password`, и его нельзя изменить напрямую.
+
+## 2. Наследование
+**Смысл:** Позволяет создавать новые классы на основе существующих. \
+**Зачем?** Повторное использование кода и расширение функциональности.
+```ts
+class Animal {
+    constructor(public name: string) {}
+    makeSound() {
+        console.log("Some sound...");
+    }
+}
+
+class Dog extends Animal {
+    makeSound() {
+        console.log("Woof!");
+    }
+}
+
+const dog = new Dog("Buddy");
+dog.makeSound(); // Woof!
+```
+
+📌 `Dog` наследует `Animal`, но переопределяет метод `makeSound()`.
+
+## 3. Полиморфизм
+**Смысл:** Разные объекты могут иметь **одинаковый интерфейс**, но разное поведение. \
+**Зачем?** Универсальный код, который работает с разными типами объектов.
+```ts
+class Animal {
+    constructor(public name: string) {}
+    makeSound() {
+        console.log("Some sound...");
+    }
+}
+
+class Dog extends Animal {
+    makeSound() {
+        console.log("Woof!");
+    }
+}
+
+const dog = new Dog("Buddy");
+dog.makeSound(); // Woof!
+```
+📌 `Penguin` изменяет логику `fly()`, но всё ещё является `Bird`.
+
+## 4. Абстракция
+**Смысл:** Выделение **важных деталей**, скрытие реализации. \
+**Зачем?** Упрощение работы с кодом, фокус только на важном.
+```ts
+abstract class Transport {
+    constructor(public speed: number) {}
+
+    abstract move(): void;
+}
+
+class Car extends Transport {
+    move() {
+        console.log(`Driving at ${this.speed} km/h`);
+    }
+}
+
+const car = new Car(100);
+car.move(); // Driving at 100 km/h
+```
+📌 `abstract` запрещает создавать `Transport`, но заставляет `Car` реализовать `move()`.
+
+## Итог
+- ✅ **Инкапсуляция** — скрываем детали и контролируем доступ.
+- ✅ **Наследование** — создаём новые классы на основе существующих.
+- ✅ **Полиморфизм** — разные классы могут вести себя по-разному.
+- ✅ **Абстракция** — скрываем сложные детали, оставляем главное.
+
+🚀 ООП помогает писать **гибкий, переиспользуемый и читаемый код!**
+
+
+🚀 **_Источник: ChatGPT_**

docs/browser/01-about-browser.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Браузер
-Источник: DeepSeek
 
 Из каких модулей(интерфейс, домпарсер, js-движок, рендер, хранилища) состоит браузер?
 
@@ -71,3 +70,5 @@ sidebar_position: 1
 5. Движок рендеринга строит дерево рендеринга и рассчитывает компоновку.
 6. Модуль отрисовки отображает пиксели на экране.
 7. Пользователь видит страницу и взаимодействует с ней через интерфейс.
+   
+🚀 **_Источник: DeepSeek_**

docs/browser/02-dom.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # DOM
-Источник: DeepSeek
 
 **DOM (Document Object Model)** — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы.
 
@@ -64,3 +63,5 @@ sidebar_position: 2
 5. Работа с атрибутами:
    - `element.getAttribute('href')` — получение значения атрибута.
    - `element.setAttribute('class', 'new-class')` — установка атрибута.
+
+🚀 **_Источник: DeepSeek_**

docs/browser/03-cssom.md

@@ -3,7 +3,6 @@ sidebar_position: 3
 ---
 
 # CSSOM
-Источник: DeepSeek
 
 CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично
 тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам
@@ -96,3 +95,5 @@ JavaScript может взаимодействовать с CSSOM через о
 | Создается из HTML.                                | Создается из CSS.                  |
 
 CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript.
+
+🚀 **_Источник: DeepSeek_**

docs/browser/04-critical-render-path.md

@@ -3,7 +3,6 @@ sidebar_position: 4
 ---
 
 # Critical render path
-Источник: DeepSeek
 
 Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.
 
@@ -70,3 +69,5 @@ sidebar_position: 4
 - **Ускорение загрузки:** Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP).
 - **Улучшение пользовательского опыта:** Быстрая загрузка страницы повышает удовлетворенность пользователей.
 - **SEO:** Скорость загрузки страницы влияет на ранжирование в поисковых системах.
+
+🚀 **_Источник: DeepSeek_**

docs/browser/05-dev-tools.md

@@ -3,7 +3,6 @@ sidebar_position: 5
 ---
 
 # Dev-tools
-Источник: DeepSeek
 
 DevTools (Инструменты разработчика) — это встроенный в браузер набор инструментов, предназначенный для отладки, анализа и оптимизации веб-страниц. Они предоставляют разработчикам возможность исследовать HTML, CSS, JavaScript, сетевые запросы, производительность и многое другое.
 
@@ -100,3 +99,5 @@ DevTools (Инструменты разработчика) — это встро
    - Некоторые функции могут отсутствовать в устаревших версиях браузеров.
 
 **DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы.
+
+🚀 **_Источник: DeepSeek_**

docs/browser/06-cors.md

@@ -37,3 +37,5 @@ sidebar_position: 6
 ## Важно:
 CORS работает только в браузерах. Серверные приложения (например, на Node.js или Python) не ограничены политикой CORS.
 Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные.
+
+🚀 **_Источник: DeepSeek_**

docs/git/01-git.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Git
-Источник: DeepSeek
 
 Git — это распределённая система управления версиями, которая позволяет отслеживать изменения в файлах и проектах. Она широко используется в разработке программного обеспечения для управления исходным кодом, но может применяться и для других типов файлов.
 
@@ -25,3 +24,5 @@ Git — это распределённая система управления
 - `git merge` — объединяет ветки.
 
 Git был создан Линусом Торвальдсом в 2005 году для разработки ядра Linux и с тех пор стал стандартом в индустрии разработки.
+
+🚀 **_Источник: DeepSeek_**

docs/git/02-ci-cd.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # CI/CD
-Источник: DeepSeek
 
 CI/CD (Continuous Integration / Continuous Deployment или Continuous Delivery) — это набор практик и инструментов, направленных на автоматизацию процессов разработки, тестирования и развертывания программного обеспечения. CI/CD помогает командам разработчиков быстрее и надежнее выпускать качественные продукты.
 
@@ -53,3 +52,5 @@ Continuous Deployment / Continuous Delivery — Непрерывное разв
 4. После ручного или автоматического подтверждения код развертывается в production.
 
 **CI/CD** — это ключевая часть современной DevOps-культуры, которая помогает командам быть более эффективными и гибкими.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/01-position.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Position
-Источник: DeepSeek
 
 Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.
 
@@ -49,3 +48,5 @@ sidebar_position: 1
 - `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым.
 
 Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/02-flex-grid.md

@@ -3,10 +3,11 @@ sidebar_position: 2
 ---
 
 # Сетка flexbox, grid
-Источник: DeepSeek
+
+Предназначены для создания гибких и адаптивных макетов.
 
 ## Flexbox
-Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
+Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально).
 
 #### Основные концепции Flexbox
 
@@ -25,7 +26,7 @@ Flexbox работает с двумя основными сущностями:
 - Для создания адаптивных интерфейсов.
 
 ## Grid
-**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
+Grid — это двумерная система компоновки, позволяющая работать и с колонками, и со строками одновременно.
 
 #### Основные концепции Grid
 1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
@@ -44,3 +45,5 @@ Flexbox работает с двумя основными сущностями:
 - Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
 - Когда нужно точно контролировать расположение элементов.
 - Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/03-semantic-tags.md

@@ -4,8 +4,6 @@ sidebar_position: 3
 
 # Семантические тэги
 
-Источник: DeepSeek
-
 Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями.
 
 Основные семантические теги
@@ -64,3 +62,5 @@ sidebar_position: 3
 - Для создания структурированных и понятных веб-страниц.
 - Для улучшения доступности и SEO.
 - Для упрощения работы с кодом в команде.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/04-block-model.md

@@ -3,7 +3,6 @@ sidebar_position: 4
 ---
 
 # Блочная модель
-Источник: DeepSeek
 
 **Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
 
@@ -58,3 +57,5 @@ sidebar_position: 4
 - Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
 - Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
 - Понимание блочной модели важно для создания точных и предсказуемых макетов.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/05-selectors.md

@@ -3,7 +3,6 @@ sidebar_position: 5
 ---
 
 # Селекторы, специфичность
-Источник: DeepSeek
 
 **Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.
 
@@ -51,3 +50,5 @@ sidebar_position: 5
 - Специфичность определяет приоритет CSS-правил.
 - Инлайновые стили и !important имеют наивысший приоритет.
 - Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
+  
+🚀 **_Источник: DeepSeek_**

docs/html-css/06-preprocessors.md

@@ -3,7 +3,6 @@ sidebar_position: 6
 ---
 
 # Препроцессоры
-Источник: DeepSeek
 
 **Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
 
@@ -73,3 +72,5 @@ sidebar_position: 6
    - Необходимо изучить новый синтаксис и возможности.
 3. **Сложность отладки:**
    - Скомпилированный CSS может быть сложнее отлаживать.
+
+🚀 **_Источник: DeepSeek_**

docs/html-css/07-size-units.md

@@ -3,7 +3,6 @@ sidebar_position: 7
 ---
 
 # Единицы измерения в CSS
-Источник: DeepSeek
 
 В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.
 
@@ -112,3 +111,5 @@ sidebar_position: 7
 - `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
 - `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
 - `deg`, `rad`, `turn`: Для трансформаций и анимаций.
+
+🚀 **_Источник: DeepSeek_**

docs/react/01-intro.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Зачем нужен React
-Источник: DeepSeek
 
 Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
 
@@ -58,3 +57,5 @@ sidebar_position: 1
 
 ## Итог
 **React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.
+
+🚀 **_Источник: DeepSeek_**

docs/react/02-v-dom.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # Виртуальный DOM
-Источник: DeepSeek
 
 Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
  
@@ -60,3 +59,5 @@ Reconciliation — это процесс сравнения старого и н
 - **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
 - **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
 Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.
+
+🚀 **_Источник: DeepSeek_**

docs/react/03-lifecycle.md

@@ -3,7 +3,6 @@ sidebar_position: 3
 ---
 
 # Жизненный цикл компонента
-Источник: DeepSeek
 
 Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе.
 
@@ -33,3 +32,5 @@ React также предоставляет методы для обработк
 С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими.
 
 Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов.
+
+🚀 **_Источник: DeepSeek_**

docs/react/04-props-state.md

@@ -3,7 +3,6 @@ sidebar_position: 4
 ---
 
 # Состояние и пропсы компонентов
-Источник: DeepSeek
 
 В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
 компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
@@ -64,3 +63,5 @@ sidebar_position: 4
 Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
 изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
 компонента.
+
+🚀 **_Источник: DeepSeek_**

docs/react/05-base-hooks.md

@@ -3,7 +3,6 @@ sidebar_position: 5
 ---
 
 # Базовые хуки React
-Источник: DeepSeek
 
 React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки:
 
@@ -79,3 +78,5 @@ useLayoutEffect(() => {
 ```js
 useDebugValue(isOnline ? 'Online' : 'Offline');
 ```
+
+🚀 **_Источник: DeepSeek_**

docs/react/06-hocs.md

@@ -3,7 +3,6 @@ sidebar_position: 6
 ---
 
 # Что такое HOC
-Источник: DeepSeek
 
 Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании.
 
@@ -41,3 +40,5 @@ Higher-Order Components (HOC) — это продвинутая техника
 - Если вы предпочитаете паттерн декоратора.
 
 В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее.
+
+🚀 **_Источник: DeepSeek_**

docs/react/07-optimization-hooks.md

@@ -3,7 +3,8 @@ sidebar_position: 7
 ---
 
 # Хуки оптимизации и кэширования
-Источник: DeepSeek
+
+useCallback, useMemo, React.Memo (HOC)
 
 ## useCallback
 `useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`.
@@ -110,3 +111,5 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ### Важные моменты:
 - `useMemo` не гарантирует, что функция не будет выполнена. Она может быть вызвана React для "подстраховки" (например, при изменении приоритетов рендеринга).
 - Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды.
+
+🚀 **_Источник: DeepSeek_**

docs/react/08-users-hooks.md

@@ -3,7 +3,6 @@ sidebar_position: 8
 ---
 
 # Пользовательские хуки
-Источник: DeepSeek
 
 Пользовательские хуки в React — это функции, которые позволяют вам использовать состояние и другие возможности React (например, эффекты, контекст и т.д.) в ваших компонентах, но с возможностью повторного использования логики. Пользовательские хуки помогают избежать дублирования кода и делают его более читаемым и поддерживаемым.
 
@@ -65,3 +64,5 @@ function App() {
 
 export default App;
 ```
+
+🚀 **_Источник: DeepSeek_**

docs/react/09-render-portal.md

@@ -3,7 +3,6 @@ sidebar_position: 9
 ---
 
 # Render portal
-Источник: DeepSeek
 
 В контексте библиотеки **React**, **Portal (портал)** — это механизм, который позволяет рендерить дочерние элементы
 
@@ -107,3 +106,5 @@ export default App;
 - Всплывающие подсказки (tooltips).
 - Уведомления.
 - Любые элементы, которые должны отображаться поверх основного интерфейса.
+
+🚀 **_Источник: DeepSeek_**

docs/react/10-pure-function.md

@@ -0,0 +1,84 @@
+---
+sidebar_position: 10
+---
+
+# Pure function
+
+В контексте **React** чистая функция — это **функция, которая**:
+1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат.
+2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные.
+
+## Примеры чистых и нечистых функций в React
+✅ Чистая функция (без побочных эффектов):
+```tsx
+function add(a: number, b: number) {
+    return a + b;
+}
+
+console.log(add(2, 3)); // 5
+console.log(add(2, 3)); // 5 (всегда один и тот же результат)
+
+```
+
+❌ Нечистая функция (изменяет внешнее состояние):
+```tsx
+let total = 0;
+function addToTotal(value: number) {
+    total += value;
+    return total;
+}
+
+console.log(addToTotal(5)); // 5
+console.log(addToTotal(5)); // 10 (изменяется внешнее состояние!)
+
+```
+
+## Чистые функции в React-компонентах
+✅ Функциональные компоненты в React должны быть чистыми!
+```tsx
+function Greeting({ name }: { name: string }) {
+    return <h1>Hello, {name}!</h1>;
+}
+```
+📌 Этот компонент:
+- Всегда рендерит один и тот же вывод для одного name.
+- Не изменяет props и state.
+
+❌ Нечистая компонента (мутирует пропсы!):
+```tsx
+function BadComponent(props: { user: { name: string } }) {
+    props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо!
+    return <h1>Hello, {props.user.name}!</h1>;
+}
+```
+📌 Почему плохо?
+- Нарушает принципы React.
+- Может вызвать неожиданные баги.
+
+## Где React использует чистые функции?
+
+✔️ useReducer
+
+```tsx
+function reducer(state: number, action: { type: string }) {
+    switch (action.type) {
+        case "increment":
+            return state + 1;
+        case "decrement":
+            return state - 1;
+        default:
+            return state;
+    }
+}
+```
+📌 reducer — чистая функция: всегда возвращает новый state, не мутируя старый.
+✔️ useMemo и useCallback
+Используются для оптимизации **чистых функций** и предотвращения лишних ререндеров.
+
+## Итог
+- ✅ Чистые функции не мутируют props и state, не создают побочные эффекты.
+- ✅ Функциональные компоненты должны быть чистыми.
+- ✅ useReducer, useMemo, useCallback — инструменты для работы с чистыми функциями.
+- ❌ Нечистые функции могут вызывать баги и ухудшать производительность.
+
+🚀 **_Источник: ChatGPT_**

docs/state-managers/01-intro.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Зачем нужны state менеджеры
-Источник: DeepSeek
 
 **State Managers** (менеджеры состояния) в контексте React — это инструменты или библиотеки, которые помогают управлять состоянием приложения. В React состояние (state) — это данные, которые определяют, как компонент должен отображаться и вести себя. Однако, когда приложение становится сложным, управление состоянием только с помощью встроенного `useState` или `useReducer` может стать трудным. Здесь на помощь приходят **state managers**.
 
@@ -34,3 +33,5 @@ sidebar_position: 1
 
 ## Выбор state manager
 Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil.
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/02-redux.md

@@ -151,3 +151,5 @@ export default store;
 - Когда нужно отслеживать и отлаживать изменения состояния (например, с помощью Redux DevTools).
 
 Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения.
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/03-rtk-query.md

@@ -56,3 +56,5 @@ sidebar_position: 3
 - Если в приложении много запросов к API и нужно управлять кэшированием.
 - Если уже используется Redux Toolkit и нужно упростить работу с API.
 - Для приложений, где требуется минимум boilerplate-кода.
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/04-zustand.md

@@ -61,3 +61,5 @@ Zustand — это минималистичная и современная би
 | Производительность  | Оптимизирован для минимизации ререндеров | Может требовать дополнительной оптимизации |
 | Инструменты отладки | Ограниченные                             | Redux DevTools                             |
 | Сообщество          | Меньше                                   | Огромное сообщество                        |
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/05-apollo-graphql.md

@@ -42,3 +42,5 @@ sidebar_position: 5
 - Если ваше приложение использует GraphQL API.
 - Если требуется кэширование данных и автоматическое обновление UI.
 - Для сложных приложений с множеством запросов и мутаций.
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/06-tenstack-react-query.md

@@ -43,3 +43,5 @@ sidebar_position: 6
 - Если ваше приложение активно взаимодействует с API.
 - Если требуется кэширование данных и автоматическое обновление UI.
 - Для приложений с большим количеством асинхронных запросов.
+
+🚀 **_Источник: DeepSeek_**

docs/state-managers/07-mobx.md

@@ -54,3 +54,5 @@ MobX легко работает с асинхронными операциям
 - Для небольших и средних приложений, где требуется простое и эффективное управление состоянием.
 - Если вы хотите избежать boilerplate-кода, характерного для Redux.
 - Для приложений с большим количеством реактивных данных.
+
+🚀 **_Источник: DeepSeek_**

docs/team/01-methodology.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # Методологии разработки
-Источник: DeepSeek
 
 ## Waterfall
 
@@ -162,3 +161,5 @@ Kanban часто сравнивают с Scrum, но в отличие от Scr
 - Для проектов с постоянно меняющимися требованиями.
 - Для поддержки и улучшения существующих процессов.
 - Для команд, которые хотят улучшить прозрачность и управление workflow.
+
+🚀 **_Источник: DeepSeek_**

docs/team/02-processes.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # Процессы в команде
-Источник: https://www.youtube.com/watch?v=zCamBnDSbxs
 
 01:52 Методологии работы
 В канбан-методологии нет четкого планирования на следующий день.
@@ -184,3 +183,5 @@ sidebar_position: 2
 Срез – это актуальная версия кода для тестировщиков.
 Срез может называться по-разному, но суть остается той же.
 Важно понимать, что это просто актуальная версия приложения.
+
+🚀 **Источник: https://www.youtube.com/watch?v=zCamBnDSbxs**

docs/testing/01-testing.md

@@ -60,3 +60,5 @@ sidebar_position: 1
    - Тестирование отдельных компонентов или функций приложения (например, тестирование отдельной функции JavaScript).
 5. Интеграционное тестирование
    - Проверка взаимодействия между различными модулями или компонентами приложения.
+
+🚀 **_Источник: DeepSeek_**

docs/testing/02-fronend-test.md

@@ -4,7 +4,6 @@ sidebar_position: 2
 
 
 # Типы тестов в приложениях React
-Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/)
 Тестирование в приложениях React можно разделить на три основных типа: **модульные тесты**, **интеграционные тесты** и **комплексные (E2E) тесты**. Модульные тесты фокусируются на отдельных компонентах, обеспечивая их корректную работу в изоляции, проверяя такие аспекты, как рендеринг, изменения состояния и обработка событий. Интеграционные тесты проверяют, как компоненты взаимодействуют друг с другом, проверяя поток данных и взаимодействие между различными частями приложения. С другой стороны, тесты E2E моделируют реальные пользовательские сценарии для тестирования всего стека приложений, от пользовательского интерфейса до внутренних служб, гарантируя, что приложение работает так, как задумано с точки зрения пользователя. Каждый тип тестирования играет решающую роль в поддержании надежности приложений React.
 
 ## Модульное тестирование
@@ -340,3 +339,5 @@ test('My first test', async t => {
     .expect(Selector('#article-header').innerText).eql('Thank you, John Doe!');
 });
 ```
+
+🚀 **Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/)**

docs/typescript/01-intro.md

@@ -58,3 +58,5 @@ Babel и TypeScript могут использоваться вместе. Нап
    - Это позволяет использовать все возможности Babel (например, экспериментальные функции JavaScript).
 2. **Babel для транспиляции:**
    - Babel может транспилировать TypeScript-код с помощью плагина `@babel/preset-typescripts`. Этот плагин удаляет типы и преобразует код в JavaScript.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/02-data-types.md

@@ -133,3 +133,5 @@ TypeScript предоставляет богатую систему типов,
 - Продвинутые типы (интерфейсы, объединения, пересечения, дженерики).
 
 Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/03-types-vs-interface.md

@@ -155,3 +155,5 @@ class User implements Person {
 - `type` более гибок и подходит для сложных типов.
 - `interface` лучше подходит для объектов и классов, а также поддерживает слияние.
 - В большинстве случаев выбор между ними зависит от предпочтений разработчика и конкретной задачи.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/04-utility-types.md

@@ -220,3 +220,5 @@ type UserWithoutEmail = Omit<User, "email">;
 - Повышать читаемость и поддерживаемость кода.
 
 Использование **Utility Types** делает TypeScript более гибким и выразительным, особенно в больших проектах.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/05-generic-types.md

@@ -84,3 +84,5 @@ let numbers = createArray<number>(3, 42); // number[]
 - **Универсальность:** Generics позволяют писать код, который работает с разными типами.
 - **Безопасность типов:** TypeScript проверяет типы на этапе компиляции, что помогает избежать ошибок.
 - **Читаемость:** Generics делают код более выразительным и понятным.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/06-type-guards.md

@@ -3,6 +3,7 @@ sidebar_position: 6
 ---
 
 # Type guards
+
 **Type Guards (защитники типов)** в TypeScript — это механизм, который позволяет сужать тип переменной внутри блока кода на основе проверки условий. Это помогает TypeScript лучше понимать, с каким типом данных он работает, и обеспечивает безопасность типов.
 
 ## Зачем нужны Type Guards?
@@ -111,3 +112,5 @@ function move(vehicle: Car | Boat) {
 - Делать код более читаемым и выразительным.
 
 Используйте **Type Guards**, чтобы TypeScript лучше понимал ваши намерения и помогал избегать ошибок.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/07-enums-vs-as-const.md

@@ -95,3 +95,5 @@ console.log(currentStatus); // 1
 - **`as const`** — это современная альтернатива, которая более гибкая и эффективная.
 
 Используйте **`as const`**, если хотите избежать недостатков Enum и сделать код более легковесным и оптимизированным.
+
+🚀 **_Источник: DeepSeek_**

docs/typescript/08-namespaces.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 8
+---
+
+# Namespaces
+
+В TypeScript **namespace** (пространство имён) — это способ группировки логически связанных объектов, функций и интерфейсов. Они помогают избежать конфликтов имён в больших кодовых базах, инкапсулируя объявления внутри единого блока.
+
+Основные особенности:
+- Определяются с помощью ключевого слова `namespace`.
+- Внутри можно объявлять переменные, функции, интерфейсы, классы и другие элементы.
+- Для экспорта элементов используется `export`, иначе они остаются приватными.
+- Для доступа к элементам снаружи используется `namespaceName.elementName`.
+
+
+```ts
+namespace MyNamespace {
+    export class Person {
+        constructor(public name: string) {}
+        greet() {
+            return `Hello, ${this.name}!`;
+        }
+    }
+}
+
+// Использование
+const user = new MyNamespace.Person("Alice");
+console.log(user.greet()); // Hello, Alice!
+```
+
+**Важно: В современных проектах вместо `namespace` чаще используют модули (ES6 modules), так как они поддерживаются нативно и лучше интегрируются с инструментами сборки.**
+
+🚀 **_Источник: ChatGPT_**

docs/typescript/09-decorators.md

@@ -0,0 +1,89 @@
+---
+sidebar_position: 9
+---
+
+# Декораторы
+
+Декораторы — это специальный вид функций, которые позволяют изменять или дополнять поведение классов, их методов, свойств и параметров. Они используются для метапрограммирования и широко применяются, например, в Angular.
+
+Особенности:
+- Включаются флагом experimentalDecorators в tsconfig.json.
+- Представляют собой функции, принимающие конструктор или описание метода/свойства.
+- Применяются с @ перед именем.
+
+Типы декораторов:
+1. Класс (@ClassDecorator)
+2. Метод (@MethodDecorator)
+3. Свойство (@PropertyDecorator)
+4. Аксессор (@AccessorDecorator)
+5. Параметр (@ParameterDecorator)
+
+## Примеры использования
+1. **Декоратор класса** - Добавляет новое свойство или изменяет поведение класса.
+```ts
+function WithTimestamp(constructor: Function) {
+    constructor.prototype.timestamp = new Date();
+}
+
+@WithTimestamp
+class MyClass {}
+
+const obj = new MyClass();
+console.log((obj as any).timestamp); // Выведет текущую дату
+```
+
+2. **Декоратор метода** - Логирует вызов метода.
+```ts
+function Log(target: any, methodName: string, descriptor: PropertyDescriptor) {
+    const original = descriptor.value;
+    descriptor.value = function (...args: any[]) {
+        console.log(`Вызван метод: ${methodName}, аргументы: ${args}`);
+        return original.apply(this, args);
+    };
+}
+
+class MyClass {
+    @Log
+    sayHello(name: string) {
+        console.log(`Привет, ${name}!`);
+    }
+}
+
+new MyClass().sayHello("Алиса");
+// В консоли:
+// Вызван метод: sayHello, аргументы: Алиса
+// Привет, Алиса!
+```
+
+3. **Декоратор свойства** - Изменяет значение свойства при создании объекта.
+```ts
+function DefaultValue(value: any) {
+    return function (target: any, propertyKey: string) {
+        let _val = value;
+        Object.defineProperty(target, propertyKey, {
+            get: () => _val,
+            set: (newVal) => _val = newVal,
+            enumerable: true,
+            configurable: true
+        });
+    };
+}
+
+class User {
+    @DefaultValue("Гость")
+    name: string;
+}
+
+const user = new User();
+console.log(user.name); // "Гость"
+```
+
+## Итог
+- Декораторы позволяют изменять классы и их члены.
+- Их часто используют **в фреймворках (например, Angular)**.
+- Требуют включения `experimentalDecorators`.
+- Альтернативой являются **метапрограммирование и DI (dependency injection)**.
+
+❗ Важно: В JavaScript декораторы пока находятся в стадии разработки (TC39 Stage 3).
+
+🚀 **_Источник: ChatGPT_**