https://github.com/avin/real-js-practice
Задачи которые реально встречаются в работе фронтендера
https://github.com/avin/real-js-practice
Last synced: 26 days ago
JSON representation
Задачи которые реально встречаются в работе фронтендера
- Host: GitHub
- URL: https://github.com/avin/real-js-practice
- Owner: avin
- Created: 2025-11-01T08:16:19.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-11-03T08:16:58.000Z (8 months ago)
- Last Synced: 2026-01-21T14:10:58.389Z (5 months ago)
- Size: 62.5 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Практический задачник по JavaScript/TypeScript для фронтенд-разработчиков
Этот задачник содержит практические задачи, которые реально встречаются в повседневной работе фронтенд-разработчика. Все задачи охватывают типичные ситуации из реальных проектов.
## Оглавление
### 1. [Работа с массивами и объектами](./01-arrays-objects.md)
- Фильтрация и трансформация данных из API
- Группировка элементов
- Нормализация данных
- Поиск и сортировка
- Удаление дубликатов
- Слияние данных из разных источников
### 2. [Работа с формами и валидация](./02-forms-validation.md)
- Валидация email, телефона, пароля
- Обработка изменений в форме
- Debounce для автосохранения
- Динамические поля формы
- Валидация на стороне клиента
### 3. [Асинхронные операции](./03-async-operations.md)
- Обработка множественных запросов
- Retry логика для запросов
- Кэширование данных
- Загрузка данных с пагинацией
- Обработка ошибок API
- Race conditions
### 4. [Работа с DOM и события](./04-dom-events.md)
- Делегирование событий
- Throttle и debounce для scroll/resize
- Обработка кликов вне элемента
- Drag & Drop
- Виртуальный скроллинг
- Управление фокусом
### 5. [State Management](./05-state-management.md)
- Простой state manager
- Подписки на изменения
- Вычисляемые значения
- Immutable обновления
- Undo/Redo функциональность
### 6. [Работа со строками и форматирование](./06-strings-formatting.md)
- Форматирование валюты
- Работа с датами
- Склонение числительных
- Обрезка текста с многоточием
- Генерация slug из заголовка
- Парсинг URL параметров
### 7. [TypeScript типы](./07-typescript-types.md)
- Типизация ответов API
- Generic компоненты
- Utility types для форм
- Строгая типизация конфигураций
- Типы для event handlers
- Discriminated unions
### 8. [Производительность и оптимизация](./08-performance.md)
- Мемоизация функций
- Ленивая загрузка
- Батчинг операций
- Web Workers для тяжелых вычислений
- Оптимизация рендеринга списков
### 9. [Работа с localStorage/sessionStorage](./09-storage.md)
- Типобезопасное хранилище
- Синхронизация между вкладками
- Управление размером хранилища
- Сериализация сложных объектов
- Миграции данных
### 10. [Утилиты и хелперы](./10-utilities.md)
- Deep clone и deep merge
- Работа с cookies
- Генерация уникальных ID
- Проверка типов данных
- Retry с экспоненциальной задержкой
- Composing функций
### 11. [Работа с API и HTTP](./11-api-http.md)
- Типизированный API клиент
- Interceptors для запросов
- Обработка токенов и refresh
- Query параметры
- Загрузка файлов с прогрессом
- AbortController для отмены запросов
### 12. [React специфичные задачи](./12-react-specific.md)
- Custom hooks
- Context оптимизация
- Управление side-effects
- Работа с refs
- Оптимизация ре-рендеров
- Композиция компонентов
## Как использовать этот задачник
1. **Читайте задачу** - каждая задача описывает реальную ситуацию из практики
2. **Попробуйте решить самостоятельно** - используйте подсказки только если застряли
3. **Проверьте edge cases** - подумайте о граничных случаях
4. **Оптимизируйте** - подумайте о производительности и читаемости кода
5. **Типизируйте** - для TypeScript задач обеспечьте полную типобезопасность
## Уровни сложности
- 🟢 **Базовый** - ежедневные задачи, должны решаться за 5-10 минут
- 🟡 **Средний** - требуют знания паттернов и лучших практик
- 🔴 **Продвинутый** - сложные сценарии, требующие глубокого понимания
## Рекомендации
- Пишите код так, как писали бы в production
- Думайте о переиспользовании кода
- Учитывайте типобезопасность
- Обрабатывайте ошибки
- Пишите понятный код (self-documenting)